/*
 * Waypoints theme tokens: the one source for color, type, spacing, radius and
 * shadow. The app, the design folder (design/) and the Waypoints Design System
 * artifact all read these; nothing else declares a color.
 *
 * Each color is light-dark(<light>, <dark>). The page follows the system's
 * light or dark setting; data-theme="light" or "dark" on <html>, or on any
 * element, pins one there, which is how the design previews show both.
 *
 * The palette is the 2009-2016 copilot.aero one (navy header, gold logo bars,
 * orange Sign Up), flattened, with link and muted text darkened just enough to
 * pass WCAG AA on every ground they sit on.
 */

:root {
  color-scheme: light dark;
  --cp-modal-backdrop: rgb(0 0 0 / 55%);

  /* ---------- Brand ---------- */
  --cp-navy: light-dark(#2f4268, #1b2740);        /* header */
  --cp-navy-deep: light-dark(#263552, #141d31);   /* header's bottom edge, tooltip */
  --cp-navy-panel: light-dark(#3d5a8a, #233656);  /* landing hero panel */
  --cp-navy-line: light-dark(#4f6c9c, #34507e);   /* chart lines and rules on navy */
  --cp-gold: #bf9a01;                             /* logo bars, both modes */
  --cp-gold-light: #d8b205;
  --cp-cta: light-dark(#b45800, #e08a2a);         /* Sign Up */
  --cp-cta-hover: light-dark(#9c4b00, #eb9c45);
  --cp-on-cta: light-dark(#ffffff, #1a1206);
  --cp-cta-border: light-dark(#8a4300, #b86d1c);

  /* ---------- Text on navy (header, hero) ---------- */
  --cp-on-navy: #ffffff;
  --cp-on-navy-muted: light-dark(#d5deec, #b9c6db);
  --cp-on-navy-accent: light-dark(#f7c98e, #f0b46a); /* header link hover, trial notice */
  --cp-go: #7fd35b;                                   /* the "Take a Tour" arrow */

  /* ---------- Surfaces and text ---------- */
  --cp-page: light-dark(#f3f3f3, #11161f);
  --cp-surface: light-dark(#ffffff, #19202c);
  --cp-surface-sunken: light-dark(#f8f8f8, #151b26);  /* form panels */
  --cp-surface-bar: light-dark(#e9edf3, #1f2838);     /* app tabs, panel caps */
  --cp-rule: light-dark(#dddddd, #2c3647);
  --cp-rule-strong: light-dark(#c9d1de, #3a465b);
  --cp-text: light-dark(#333333, #e2e6ee);
  --cp-text-strong: light-dark(#222222, #f4f6fa);
  --cp-text-muted: light-dark(#555555, #b1bacb);
  --cp-text-faint: light-dark(#6b6b6b, #8d98ab);

  /* ---------- Links and focus ---------- */
  --cp-link: light-dark(#2d67a8, #8cb9ee);
  --cp-link-hover: light-dark(#94600a, #e7bd63);
  --cp-focus: light-dark(#2d67a8, #8cb9ee);

  /* ---------- Controls ---------- */
  --cp-control: light-dark(#f4f4f4, #263043);
  --cp-control-hover: light-dark(#ffffff, #2e3a50);
  --cp-control-border: light-dark(#7d7d7d, #74839e);
  --cp-control-text: light-dark(#222222, #e2e6ee);
  --cp-input: light-dark(#ffffff, #0f141d);
  --cp-input-border: light-dark(#7d7d7d, #74839e);
  --cp-selected: light-dark(#2d67a8, #8cb9ee);        /* current page in the pager */
  --cp-on-selected: light-dark(#ffffff, #0f141d);

  /* ---------- Messages ---------- */
  --cp-notice: light-dark(#e4f6d8, #1b3020);
  --cp-notice-border: light-dark(#7fb35a, #4d8a45);
  --cp-notice-text: light-dark(#2f5f12, #b8e4a3);
  --cp-error: light-dark(#ffe5e0, #3a1d1d);
  --cp-error-border: light-dark(#b73733, #e0645f);
  --cp-error-text: light-dark(#8a1f1b, #f4b9b5);
  --cp-warning: light-dark(#fefecc, #35311a);
  --cp-warning-border: light-dark(#a39a2a, #8f8435);
  --cp-warning-text: light-dark(#5c5410, #ece08f);

  /* ---------- Logbook grid ---------- */
  --cp-grid-line: light-dark(#cdcdcd, #2c3647);
  --cp-grid-head: light-dark(#e5eaf6, #222d42);
  --cp-grid-text: light-dark(#4a4a4a, #c9d0dc);
  --cp-row-odd: light-dark(#ffffff, #19202c);
  --cp-row-even: light-dark(#f0f0f0, #1d2533);
  --cp-row-new: light-dark(#e4f6d8, #1b3020);
  --cp-row-totals: light-dark(#ffffdd, #2c2a19);
  --cp-row-duplicate: light-dark(#ffd8aa, #43301a);
  --cp-row-invalid: light-dark(#efd3d2, #44232a);
  --cp-row-pending: light-dark(#aed4ff, #1e3a5f);
  --cp-row-awaiting: light-dark(#dcf2d7, #1d3524);
  --cp-row-requesting: light-dark(#ffffe6, #2c2a19);
  --cp-row-empty: light-dark(#ffffff, #19202c);
  --cp-flag: light-dark(#fff3a6, #4a4116);            /* a cross-country check that failed */
  --cp-flag-border: light-dark(#a08700, #c9ad3a);

  /* ---------- Map (drawn on OpenStreetMap's light tiles in both modes) ---------- */
  --cp-map-route: #2d67a8;
  --cp-map-airport: #cd7f32;
  --cp-map-airport-edge: #1e2c45;

  /* ---------- Type ---------- */
  --cp-font: system-ui, -apple-system, "Segoe UI", "Lucida Grande", sans-serif;
  --cp-font-display: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --cp-font-grid: Verdana, "DejaVu Sans", sans-serif;
  --cp-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --cp-size-hero: 30px;
  --cp-size-title: 21px;
  --cp-size-heading: 15px;
  --cp-size-body: 13px;
  --cp-size-small: 12px;
  --cp-size-caption: 11px;
  --cp-size-grid: 10px;

  /* ---------- Space ---------- */
  --cp-space-1: 4px;
  --cp-space-2: 8px;
  --cp-space-3: 12px;
  --cp-space-4: 16px;
  --cp-space-5: 24px;
  --cp-space-6: 32px;
  --cp-gutter: 12px;

  /* ---------- Layout ---------- */
  --cp-content-width: 970px;
  --cp-header-height: 70px;

  /* ---------- Radius ---------- */
  --cp-radius-sm: 3px;
  --cp-radius: 6px;
  --cp-radius-panel: 8px;
  --cp-radius-pill: 999px;

  /* ---------- Shadow ---------- */
  --cp-shadow-card: 0 1px 3px light-dark(rgba(20, 30, 50, 0.22), rgba(0, 0, 0, 0.6));
  --cp-shadow-raised: 0 2px 6px light-dark(rgba(20, 30, 50, 0.25), rgba(0, 0, 0, 0.6));
}

[data-theme="light"] { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }