/* Fixboard design tokens: colours for the light and dark themes, shadows,
   radii and layout sizes. Every other stylesheet reads these.

   Borders come in three strengths:
     --border        card and section outlines (decorative),
     --border-mid    dashed boxes, quote bars, the timeline line (decorative),
     --border-strong the only edge of a control (secondary button, chip,
                     radio card, drop zone): at least 3:1 against every
                     surface it sits on (CONTRACT section 5). */

:root {
  color-scheme: light;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --bg: #F4F6FB;
  --surface: #FFFFFF;
  --surface-2: #F7F9FC;
  --surface-3: #EDF1F7;
  --border: #E0E6EF;
  --border-mid: #C7D0DE;
  --border-strong: #7D899E;
  --input-border: #7D899E;
  --text: #0F172A;
  --text-2: #364256;
  --text-3: #556074;
  --brand: #1E4ED8;
  --brand-hover: #1A45C2;
  --brand-active: #163AA6;
  --brand-wash: #E9EEFC;
  --brand-ink: #1C47C7;
  --on-brand: #FFFFFF;
  --link: #1C47C7;
  --focus: #1E4ED8;
  --danger: #B42318;
  --danger-wash: #FEF0EE;
  --danger-border: #F0B4AD;
  --header-bg: rgba(255, 255, 255, 0.88);
  --skeleton: #E5EAF2;
  --skeleton-shine: #F2F5FA;
  --backdrop: rgba(15, 23, 42, 0.6);
  --code-bg: #EEF2F8;
  --halo: rgba(255, 255, 255, 0.4);

  --st-open: #1E4ED8;
  --st-open-bg: #E9EEFC;
  --st-open-ink: #1A43BD;
  --st-progress: #6D28D9;
  --st-progress-bg: #F1EBFE;
  --st-progress-ink: #5B21B6;
  --st-needs: #B45309;
  --st-needs-bg: #FEF3C7;
  --st-needs-ink: #853A08;
  --st-fixed: #15803D;
  --st-fixed-bg: #DCFCE7;
  --st-fixed-ink: #166534;
  --st-fixed-solid: #15803D;
  --st-fixed-mark: #16A34A;
  --st-partial: #0F766E;
  --st-partial-bg: #CCFBF1;
  --st-partial-ink: #115E59;
  --st-declined: #5B6779;
  --st-declined-bg: #EDF0F5;
  --st-declined-ink: #475467;
  --urgent: #B42318;
  --urgent-bg: #FEE4E2;
  --urgent-ink: #9F1D13;
  --high: #C2410C;
  --high-bg: #FFEDD5;
  --high-ink: #9A3412;

  --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 1px rgba(15, 23, 42, 0.03);
  --shadow-2: 0 8px 24px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04);
  --shadow-3: 0 24px 64px rgba(15, 23, 42, 0.24);
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Layout. --pad-l and --pad-r are the side gutters, widened to the safe
     area when a notched phone is in landscape (viewport-fit=cover).
     --sticky-h is how much of the top the sticky header covers: anchors,
     focus and scrollIntoView keep their target below it. */
  --gutter: 16px;
  --pad-l: max(var(--gutter), env(safe-area-inset-left, 0px));
  --pad-r: max(var(--gutter), env(safe-area-inset-right, 0px));
  --max: 1100px;
  --header-h: 64px;
  --sticky-h: var(--header-h);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0B1120;
    --surface: #111A2C;
    --surface-2: #142036;
    --surface-3: #1B2840;
    --border: #22304A;
    --border-mid: #33456A;
    --border-strong: #64759A;
    --input-border: #7584A3;
    --text: #E8EDF6;
    --text-2: #C1CADB;
    --text-3: #9AA6BD;
    --brand: #2B5BE6;
    --brand-hover: #3A68EE;
    --brand-active: #2450D0;
    --brand-wash: rgba(76, 125, 255, 0.16);
    --brand-ink: #A9C1FF;
    --link: #93B1FF;
    --focus: #93B1FF;
    --danger: #FF8A80;
    --danger-wash: rgba(240, 68, 56, 0.14);
    --danger-border: rgba(255, 138, 128, 0.45);
    --header-bg: rgba(14, 21, 38, 0.86);
    --skeleton: #1C2841;
    --skeleton-shine: #24324F;
    --backdrop: rgba(2, 6, 16, 0.72);
    --code-bg: #1B2740;
    --halo: rgba(255, 255, 255, 0.06);
    --st-open: #86A8FF;
    --st-open-bg: rgba(76, 125, 255, 0.18);
    --st-open-ink: #B3C8FF;
    --st-progress: #BBA1FF;
    --st-progress-bg: rgba(139, 92, 246, 0.2);
    --st-progress-ink: #D6C7FF;
    --st-needs: #FBBF24;
    --st-needs-bg: rgba(245, 158, 11, 0.16);
    --st-needs-ink: #FCD34D;
    --st-fixed: #4ADE80;
    --st-fixed-bg: rgba(34, 197, 94, 0.16);
    --st-fixed-ink: #86EFAC;
    --st-fixed-solid: #15803D;
    --st-fixed-mark: #16A34A;
    --st-partial: #2DD4BF;
    --st-partial-bg: rgba(20, 184, 166, 0.16);
    --st-partial-ink: #5EEAD4;
    --st-declined: #A3B0C4;
    --st-declined-bg: rgba(148, 163, 184, 0.16);
    --st-declined-ink: #CBD5E1;
    --urgent: #FF8A80;
    --urgent-bg: rgba(240, 68, 56, 0.16);
    --urgent-ink: #FFB4AB;
    --high: #FDBA74;
    --high-bg: rgba(249, 115, 22, 0.16);
    --high-ink: #FED7AA;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-3: 0 24px 64px rgba(0, 0, 0, 0.6);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0B1120;
  --surface: #111A2C;
  --surface-2: #142036;
  --surface-3: #1B2840;
  --border: #22304A;
  --border-mid: #33456A;
  --border-strong: #64759A;
  --input-border: #7584A3;
  --text: #E8EDF6;
  --text-2: #C1CADB;
  --text-3: #9AA6BD;
  --brand: #2B5BE6;
  --brand-hover: #3A68EE;
  --brand-active: #2450D0;
  --brand-wash: rgba(76, 125, 255, 0.16);
  --brand-ink: #A9C1FF;
  --link: #93B1FF;
  --focus: #93B1FF;
  --danger: #FF8A80;
  --danger-wash: rgba(240, 68, 56, 0.14);
  --danger-border: rgba(255, 138, 128, 0.45);
  --header-bg: rgba(14, 21, 38, 0.86);
  --skeleton: #1C2841;
  --skeleton-shine: #24324F;
  --backdrop: rgba(2, 6, 16, 0.72);
  --code-bg: #1B2740;
  --halo: rgba(255, 255, 255, 0.06);
  --st-open: #86A8FF;
  --st-open-bg: rgba(76, 125, 255, 0.18);
  --st-open-ink: #B3C8FF;
  --st-progress: #BBA1FF;
  --st-progress-bg: rgba(139, 92, 246, 0.2);
  --st-progress-ink: #D6C7FF;
  --st-needs: #FBBF24;
  --st-needs-bg: rgba(245, 158, 11, 0.16);
  --st-needs-ink: #FCD34D;
  --st-fixed: #4ADE80;
  --st-fixed-bg: rgba(34, 197, 94, 0.16);
  --st-fixed-ink: #86EFAC;
  --st-fixed-solid: #15803D;
  --st-fixed-mark: #16A34A;
  --st-partial: #2DD4BF;
  --st-partial-bg: rgba(20, 184, 166, 0.16);
  --st-partial-ink: #5EEAD4;
  --st-declined: #A3B0C4;
  --st-declined-bg: rgba(148, 163, 184, 0.16);
  --st-declined-ink: #CBD5E1;
  --urgent: #FF8A80;
  --urgent-bg: rgba(240, 68, 56, 0.16);
  --urgent-ink: #FFB4AB;
  --high: #FDBA74;
  --high-bg: rgba(249, 115, 22, 0.16);
  --high-ink: #FED7AA;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-3: 0 24px 64px rgba(0, 0, 0, 0.6);
}

/* Phones: a 56px header leaves more of a small screen for reports. Short
   landscape screens: the header scrolls away (see base.css), so nothing
   sticks to the top. */
@media (max-width: 559px) {
  :root { --header-h: 56px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  :root { --sticky-h: 0px; }
}
@media (min-width: 900px) {
  :root { --gutter: 24px; }
}