/* ============================================================================
 * Aucilla Systems design system — tokens for the Windy Ridge Silo Check Log.
 *
 * Source: the "Aucilla Systems Design System" project the owner shared
 * (claude.ai/design). Colors, type, spacing and radii below are taken from that
 * system's tokens (tokens/colors.css, typography.css, spacing.css, fonts.css)
 * and its self-hosted webfonts (Red Hat Display, Red Hat Text, JetBrains Mono).
 * The app's own semantic variables are mapped onto these at the bottom, so this
 * stays the one file to touch if the system changes.
 *
 * This is the Windy Ridge Longleaf app wearing the Aucilla Systems system — no
 * Aucilla product logo or wordmark is used. Aucilla is a warm, light, high-
 * contrast system; the app runs light-only for bright-sun field legibility.
 * ========================================================================== */

/* --- Self-hosted webfonts (Aucilla, variable, subset to latin) --- */
@font-face {
  font-family: "Red Hat Display";
  src: url("fonts/red-hat-display-var.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Red Hat Text";
  src: url("fonts/red-hat-text-var.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrains-mono-var.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

/* --- Aucilla base palette (tokens/colors.css) --- */
:root {
  --charcoal: #252522;
  --live-oak: #35483a;
  --clay: #8a4a35;
  --clay-mid: #a8654a;
  --mist-gray: #6f746d;
  --sand: #e8e2d4;
  --chert: #cfc3a6;
  --kite-slate: #2f3e52;
  --moss: #4a6428;
  --paper: #f4f1ea;

  /* Semantic (tokens/colors.css) */
  --surface-page: var(--paper);
  --surface-raised: var(--sand);
  --surface-sunken: #ede8dd;
  --surface-inverse: var(--charcoal);
  --surface-brand: var(--kite-slate);
  --text-primary: var(--charcoal);
  --text-secondary: #3f433d;
  --text-muted: var(--mist-gray);
  --text-inverse: var(--sand);
  --text-accent: var(--clay);
  --border-subtle: #ddd6c6;
  --border-strong: #d6d0c0;
  --link: var(--clay);
  --link-hover: var(--charcoal);
  --focus-ring: var(--clay-mid);

  --control-border: #c9c1ae;
  --control-border-hover: var(--mist-gray);
  --control-fill-on: var(--kite-slate);
  --control-track-off: var(--chert);
  --status-success: var(--moss);
  --status-error: var(--clay);
  --scrim: rgba(37, 37, 34, 0.5);

  /* Soft status surfaces for inline notices and the fans-off row. Derived from
   * the base palette (Aucilla leaves soft status backgrounds to the product;
   * the swatch stays within Moss / Clay so alerts read as the system's own). */
  --status-success-soft: color-mix(in srgb, var(--moss) 14%, var(--paper));
  --status-error-soft: color-mix(in srgb, var(--clay) 16%, var(--paper));
}

/* --- Aucilla type (tokens/typography.css) --- */
:root {
  --font-display: "Red Hat Display", system-ui, sans-serif;
  --font-body: "Red Hat Text", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --tracking-display: -0.015em;
  --tracking-label: 0.08em;
  --leading-tight: 1.05;
  --leading-body: 1.5;
}

/* --- Aucilla spacing + radii (tokens/spacing.css) --- */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;

  --radius-sm: 4px; /* badges, tags, pills, checkboxes */
  --radius-md: 6px; /* buttons, inputs, cards */
  --radius-lg: 12px; /* large panels, dialogs */
  --border-width: 1px;
}

/* ============================================================================
 * App semantic variables, mapped onto the Aucilla tokens above.
 * Aucilla uses generous whitespace at a 14–16px base; sizes and tap targets
 * here are tuned UP from the base system for one-handed, gloved, bright-sun
 * field use. Aucilla shadows are "none" — surfaces separate with a 1px line
 * or a tonal shift (Paper -> Sand -> Surface Sunken).
 * ========================================================================== */
:root {
  --color-bg: var(--surface-page);
  --color-surface: var(--paper);
  --color-surface-raised: var(--surface-raised);
  --color-surface-sunken: var(--surface-sunken);
  --color-border: var(--border-subtle);
  --color-border-strong: var(--control-border);

  --color-text: var(--text-primary);
  --color-text-muted: var(--text-muted);

  --color-brand: var(--kite-slate);
  --color-primary: var(--kite-slate);
  --color-primary-hover: var(--charcoal);
  --color-primary-contrast: var(--sand);

  --color-success: var(--status-success);
  --color-success-bg: var(--status-success-soft);

  --color-danger: var(--status-error);
  --color-danger-contrast: var(--sand);
  --color-danger-bg: var(--status-error-soft);

  --color-focus: var(--focus-ring);

  /* Typography */
  --font-sans: var(--font-body);
  --font-size-base: 18px; /* bumped from the system's 14–16px for field legibility */
  --font-size-sm: 0.8125rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.625rem;
  --font-weight-normal: var(--weight-regular);
  --font-weight-bold: var(--weight-bold);
  --line-height: var(--leading-body);

  /* Radius */
  --radius: var(--radius-md);

  /* Aucilla focus: 2px ring offset from a Paper gap (components/shared) */
  --focus-shadow: 0 0 0 2px var(--surface-page), 0 0 0 4px var(--focus-ring);

  /* Controls — large tap targets for one-handed phone use */
  --tap-target: 56px;
  --control-font: 1.125rem;

  --max-width: 760px;
}