/* Motorcoach Club · Cockpit r2 design tokens.
   Source of truth: design/mcc-identity-2026-10/r2/proto/cockpit.css and NOTES.md §5.
   One system, two lighting states. Day = printed instrument panel in sun;
   Night = backlit panel, warm text, amber needle. Names are identical in both
   modes; only values swap.

   Theme selection:
   - html[data-theme] is set before first paint by the inline head script
     (app/views/shared/_cockpit_head.html.erb) from prefers-color-scheme, or
     from a pinned Auto / Day / Night choice.
   - Without the script (other layouts) the media query below still applies.

   Fonts are self-hosted under public/fonts/cockpit with their SIL OFL 1.1
   licence texts: Overpass (numbers, headings, nav) and Atkinson Hyperlegible
   (text). */

@font-face { font-family: "Overpass"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("/fonts/cockpit/Overpass-400-900.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/cockpit/Atkinson-400.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/cockpit/Atkinson-700.woff2") format("woff2"); }

/* ---------- Day (default) ---------- */
:root,
html[data-theme="day"] {
  --bg: #eceee8;
  --rail: #ffffff;
  --surface: #ffffff;
  --surface-2: #f4f5f1;
  --sunk: #e3e6df;
  --line: #c9cec5;
  --line-strong: #8d958c;
  --text: #0c110f;
  --muted: #424b46;
  --accent: #0a6a43;
  --accent-text: #08603c;
  --accent-soft: #d8eee2;
  --on-accent: #ffffff;
  --ok: #075c39; --ok-bg: #d6efe0;
  --nc: #2c3430; --nc-bg: #e2e5df;
  --bad: #ffffff; --bad-bg: #b42318; --bad-text: #a01f10;
  --warn-text: #7a4100; --warn-bg: #fff1d6;
  --focus: #0a6a43;
  --badge-bg: #b42318; --badge-fg: #ffffff;
  --shadow: 0 1px 0 rgba(12, 17, 15, 0.06), 0 6px 18px rgba(12, 17, 15, 0.06);

  /* Messenger bubbles (app/assets/stylesheets/messenger_bubbles.css).
     Each *-fg is the text colour on that fill; every pair meets AA. */
  --msg-surface: #f4f5f2;
  --msg-text: #0c110f;
  --msg-muted: #4a524d;
  --msg-mcc: #0b5cad;   --msg-mcc-fg: #ffffff;
  --msg-sms: #1d7a3b;   --msg-sms-fg: #ffffff;
  --msg-voice: #f2bf45; --msg-voice-fg: #1a1204;
  --msg-email: #475569; --msg-email-fg: #0c110f;   /* grey outline; text uses --msg-email-fg */
  --msg-other: #ffffff; --msg-other-fg: #0c110f; --msg-other-line: #d3d8d1;
  --msg-notice-bg: #fff4d6; --msg-notice-fg: #4a3200;
}

/* color-scheme only where the cockpit head script runs, so layouts that
   have not adopted the shell keep their current form-control defaults. */
html[data-theme="day"] { color-scheme: light; }

/* ---------- Night ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="day"]) {
    --bg: #07080a;
    --rail: #0b0c0f;
    --surface: #111317;
    --surface-2: #171a1f;
    --sunk: #0c0e11;
    --line: #23272d;
    --line-strong: #3a4048;
    --text: #ece6da;
    --muted: #a59f94;
    --accent: #ffb020;
    --accent-text: #ffbd45;
    --accent-soft: #2a2010;
    --on-accent: #1a1204;
    --ok: #7fd9a4; --ok-bg: #10261a;
    --nc: #c9cdd2; --nc-bg: #1d2127;
    --bad: #ffd9d3; --bad-bg: #5a1a12; --bad-text: #ff9a8a;
    --warn-text: #ffc266; --warn-bg: #2a1d08;
    --focus: #ffbd45;
    --badge-bg: #ff9a8a; --badge-fg: #1a0603;
    --shadow: none;
    --msg-surface: #111317;
    --msg-text: #ece6da;
    --msg-muted: #b3ada2;
    --msg-mcc: #1f6fc4;   --msg-mcc-fg: #ffffff;
    --msg-sms: #237a41;   --msg-sms-fg: #ffffff;
    --msg-voice: #f2bf45; --msg-voice-fg: #1a1204;
    --msg-email: #94a3b8; --msg-email-fg: #ece6da;
    --msg-other: #e3e5e8; --msg-other-fg: #111317; --msg-other-line: #e3e5e8;
    --msg-notice-bg: #2a1d08; --msg-notice-fg: #ffd98a;
  }
}

html[data-theme="night"] {
  color-scheme: dark;
  --bg: #07080a;
  --rail: #0b0c0f;
  --surface: #111317;
  --surface-2: #171a1f;
  --sunk: #0c0e11;
  --line: #23272d;
  --line-strong: #3a4048;
  --text: #ece6da;
  --muted: #a59f94;
  --accent: #ffb020;
  --accent-text: #ffbd45;
  --accent-soft: #2a2010;
  --on-accent: #1a1204;
  --ok: #7fd9a4; --ok-bg: #10261a;
  --nc: #c9cdd2; --nc-bg: #1d2127;
  --bad: #ffd9d3; --bad-bg: #5a1a12; --bad-text: #ff9a8a;
  --warn-text: #ffc266; --warn-bg: #2a1d08;
  --focus: #ffbd45;
  --badge-bg: #ff9a8a; --badge-fg: #1a0603;
  --shadow: none;
  --msg-surface: #111317;
  --msg-text: #ece6da;
  --msg-muted: #b3ada2;
  --msg-mcc: #1f6fc4;   --msg-mcc-fg: #ffffff;
  --msg-sms: #237a41;   --msg-sms-fg: #ffffff;
  --msg-voice: #f2bf45; --msg-voice-fg: #1a1204;
  --msg-email: #94a3b8; --msg-email-fg: #ece6da;
  --msg-other: #e3e5e8; --msg-other-fg: #111317; --msg-other-line: #e3e5e8;
  --msg-notice-bg: #2a1d08; --msg-notice-fg: #ffd98a;
}

/* ---------- shared by both lighting states ---------- */
:root {
  --font-num: "Overpass", "Helvetica Neue", Arial, sans-serif;
  --font-text: "Atkinson Hyperlegible", "Helvetica Neue", Arial, sans-serif;
  --r-tile: 18px; --r-inner: 12px; --r-btn: 14px; --r-chip: 999px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --target: 56px;
  --elev-1: var(--shadow);

  /* Shell geometry (r2b, 6-item nav). */
  --ck-rail-w: 104px;           /* 83px buttons + 10px padding + 1px edge */
  --ck-bar-h: 76px;             /* phone bottom bar, 64px targets */
  --ck-phone-max: 900px;

  /* Legacy page bodies: until each page is restyled in a later slice it
     keeps the dark canvas it was written for, in both themes, so text-white
     bodies stay readable on a Day shell. */
  --legacy-canvas: #000000;
  --legacy-text: #ffffff;
}