/* xatc pilot site: design tokens (deliverable 2 of the Step 1 brief, plans/pilot-site-plan.md).
   The Soft look, the owner's choice of 2026-10-11 ("Lets go with 'soft' for now"): a rounded consumer app. A lavender
   page, white cards with a soft shadow, one violet accent, pill buttons and fields, and the live flight as a filled
   violet-to-green card. The other nine looks stay in mockup.html for later; only this one is built.
   Light values on :root; dark values repeated under prefers-color-scheme (guarded so an explicit light choice wins)
   and under [data-theme="dark"], so the toggle wins both ways. The site hosts no fonts (its CSP allows only its own
   origin), so the type is the platform's rounded face where it has one (SF Pro Rounded on Apple, Segoe UI Variable on
   Windows) and its sans elsewhere, with its monospace for callsigns and routes. */

:root {
  color-scheme: light;

  /* colour */
  --bg: #f6f3ff;          /* the page: a lavender tint */
  --panel: #ffffff;       /* a card, a field */
  --panel-2: #f1edfb;     /* a quieter surface: a list row's hover, a skeleton, the bottom bar's current link */
  --ink: #221c35;         /* text */
  --muted: #6f6a85;       /* secondary text, labels */
  --line: #e6e0f5;        /* hairlines */
  --line-strong: #cfc5ec; /* a field's border */
  --accent: #6d4aff;      /* the one accent: links, the primary button, the current link, focus */
  --accent-hover: #5a38e6;
  --on-accent: #ffffff;
  --ok: #16a34a;          /* a flight in progress, a confirmed state */
  --warn: #d97706;        /* "sign in again to change this" */
  --err: #e11d48;         /* an error notice */
  --ok-bg: #dcfce7;
  --warn-bg: #fef3c7;
  --err-bg: #ffe4e6;
  --focus: #6d4aff;
  /* the brand mark's three bands: Ground, Tower, TRACON, in this look's hues */
  --band-1: #22c55e;
  --band-2: #f59e0b;
  --band-3: #6d4aff;

  /* type: the platform's own faces, since no font is hosted */
  --font: ui-rounded, "SF Pro Rounded", "Nunito", "Segoe UI Variable Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --fs-display: 2.5rem;   /* 40: one per page at most (the landing) */
  --fs-title: 1.5rem;     /* 24: the page title */
  --fs-h2: 1.125rem;      /* 18: a section */
  --fs-body: 1rem;        /* 16 */
  --fs-small: 0.875rem;   /* 14: secondary lines */
  --fs-label: 0.75rem;    /* 12: uppercase labels, with letter-spacing */
  --lh-body: 1.5;
  --lh-tight: 1.2;
  --tracking-label: 0.06em;
  --tracking-title: -0.02em; /* page titles and the landing title are set tight and bold */

  /* spacing: a 4 px grid */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --gutter: 1rem;         /* the side gutter at every width */
  --measure: 40rem;       /* 640 px: one column, everything */

  /* shape */
  --r-pill: 999px;        /* buttons, inputs, the top bar's links */
  --r-field: 16px;        /* a code field, a notice, the bottom bar's current link */
  --r-card: 24px;         /* a card */
  --r-mark: 50%;          /* the brand mark is round in this look */
  --shadow: 0 6px 20px rgba(109, 74, 255, 0.10);
  --live-card: linear-gradient(135deg, var(--accent), var(--band-1)); /* the flight in progress */

  /* motion: short, and none when the viewer asks for none */
  --t-fast: 120ms;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #15112a;
    --panel: #1f1a37;
    --panel-2: #2a2446;
    --ink: #f1edff;
    --muted: #a79fcb;
    --line: #352e57;
    --line-strong: #4b4374;
    --accent: #a48bff;
    --accent-hover: #b9a6ff;
    --on-accent: #15112a;
    --ok: #4ade80;
    --warn: #fbbf24;
    --err: #fb7185;
    --ok-bg: #15301f;
    --warn-bg: #332a12;
    --err-bg: #3a1a24;
    --focus: #a48bff;
    --band-1: #4ade80;
    --band-2: #fbbf24;
    --band-3: #a48bff;
    --shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #15112a;
  --panel: #1f1a37;
  --panel-2: #2a2446;
  --ink: #f1edff;
  --muted: #a79fcb;
  --line: #352e57;
  --line-strong: #4b4374;
  --accent: #a48bff;
  --accent-hover: #b9a6ff;
  --on-accent: #15112a;
  --ok: #4ade80;
  --warn: #fbbf24;
  --err: #fb7185;
  --ok-bg: #15301f;
  --warn-bg: #332a12;
  --err-bg: #3a1a24;
  --focus: #a48bff;
  --band-1: #4ade80;
  --band-2: #fbbf24;
  --band-3: #a48bff;
  --shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; }
}

/* The Soft look's rules beyond the tokens (the design mockup carries them under its Soft look; the built site
   applies them unconditionally, since Soft is its one look):
   - page titles: font-weight 700, letter-spacing var(--tracking-title); the landing title var(--fs-display)
   - buttons: border-radius var(--r-pill), padding .7rem 1.25rem; a quiet button .7rem .9rem
   - inputs: border-radius var(--r-pill), padding-left 1rem; a code field var(--r-field)
   - the top bar's links: var(--r-pill); the current one filled with var(--accent) and var(--on-accent) text; no bottom border on the bar
   - the bottom bar's current link: var(--panel-2) background, var(--accent) text, var(--r-field) corners
   - the brand mark and the empty state's glyph: round (var(--r-mark))
   - cards: no border, var(--shadow); the card of the flight in progress: background var(--live-card), text
     var(--on-accent), its secondary lines inherit the text colour at 85% opacity, its live badge, dot and button are
     white at 18 to 22% opacity over the gradient
   - notices: var(--r-field) corners */