/* ==========================================================================
   BEARING — design tokens (the contract every stylesheet builds on).
   Owned by the foundation. Components/shell/pages live in their own files
   and use ONLY these role-named tokens (never raw hex) so light/dark both work.
   Direction: GE2 calm warm-paper IA + Cloud boldness/motion (research 02),
   floor motion budget (research 03 §3). Colour carries meaning only.
   ========================================================================== */

@font-face{font-family:'Hanken';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/hanken.woff2') format('woff2')}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300 900;font-display:swap;src:url('../fonts/fraunces.woff2') format('woff2')}
@font-face{font-family:'BearingMono';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/mono.woff2') format('woff2')}

:root{
  color-scheme: light;

  /* ---- type ---- */
  --f-ui: 'Hanken', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --f-display: 'Hanken', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;  /* used at 760–850 weight, tight tracking */
  --f-ed: 'Fraunces', Georgia, 'Times New Roman', serif;                              /* editorial moments only */
  --f-mono: 'BearingMono', ui-monospace, SFMono-Regular, Menlo, monospace;            /* phones, times, IDs */
  --fs-xs: 11.5px; --fs-sm: 13px; --fs: 14.5px; --fs-md: 16px; --fs-lg: 18px;
  --fs-xl: 22px; --fs-2xl: 28px; --fs-3xl: 36px; --fs-4xl: 48px;
  --lh: 1.5; --tr-tight: -.025em; --tr-display: -.035em; --tr-label: .1em;

  /* ---- surfaces (warm paper) ---- */
  --bg: #F5F4EF;          /* canvas */
  --bg-2: #EEECE5;        /* sunken wells, board columns */
  --panel: #FFFFFF;       /* cards */
  --panel-2: #FBFAF7;     /* card headers, hover rows */
  --panel-3: #F4F2EC;     /* inputs at rest, chips */
  --scrim: rgba(10,15,26,.42);

  /* ---- ink ---- */
  --ink: #111827;         /* primary text  (16.9:1 on panel) */
  --ink-2: #3D4656;       /* secondary     (9.7:1) */
  --ink-3: #5E6878;       /* ghosted meta  (5.6:1 — AA) */
  --ink-4: #8C95A3;       /* placeholders, disabled, decorative only (3.0:1 — never body text) */
  --line: rgba(17,24,39,.08);
  --line-2: rgba(17,24,39,.15);
  --field-line: #8A94A3;  /* 3:1 for form-control boundaries (WCAG 1.4.11) */

  /* ---- brand / meaning (hue = meaning, never decoration) ---- */
  --brand: #0E1B2E;       /* Bearing ink-navy: primary buttons, hero strips */
  --brand-ink: #FFFFFF;
  --brand-2: #1B2D48;
  --go: #087F5B;          /* call / save / positive action — white text 5.0:1 */
  --go-hi: #066B4C;
  --go-ink: #FFFFFF;
  --go-bg: #E5F5EE;       /* tinted wells */
  --go-text: #06704F;     /* green as text on panel (5.9:1) */
  --gold: #C9A24F;        /* wins, achievement, goals — fill only */
  --gold-2: #E2C27A;
  --wm-deg: #B8913F;      /* the wordmark's degree ring on paper (deeper gold for contrast) */
  --gold-bg: #FBF4E3;
  --gold-text: #7A5C22;   /* gold as text (6.6:1) */
  --hot: #D92D20;         /* urgent: waiting too long, DNC, errors */
  --hot-bg: #FDECEA;
  --hot-text: #B42318;
  --warn: #B54708;        /* watch: approaching SLA, window opening soon */
  --warn-bg: #FEF4E6;
  --info: #1F6FEB;        /* information, links in data */
  --info-bg: #EAF1FE;
  --info-text: #1757C2;
  --plan: #6E4FF6;        /* "their plan" (data from the modeling tool) */
  --plan-bg: #F1EDFF;
  --plan-text: #5B3DE0;
  --focus: #1F6FEB;

  /* ---- geometry ---- */
  --r-xs: 6px; --r-s: 9px; --r-m: 12px; --r-l: 16px; --r-xl: 22px; --r-2xl: 28px; --r-pill: 999px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;
  --rail-w: 248px; --rail-w-min: 76px; --topbar-h: 60px; --page-max: 1320px; --gutter: 32px;

  /* ---- elevation (navy-tinted, soft) ---- */
  --sh-1: 0 1px 2px rgba(14,27,46,.06), 0 0 0 1px rgba(14,27,46,.05);
  --sh-2: 0 10px 28px -12px rgba(14,27,46,.18), 0 2px 6px -2px rgba(14,27,46,.07), 0 0 0 1px rgba(14,27,46,.05);
  --sh-3: 0 30px 70px -20px rgba(14,27,46,.34), 0 12px 26px -12px rgba(14,27,46,.18), 0 0 0 1px rgba(14,27,46,.06);
  --sh-go: 0 1px 2px rgba(8,127,91,.25), 0 8px 18px -8px rgba(8,127,91,.55);
  --sh-focus: 0 0 0 3px color-mix(in srgb, var(--focus) 30%, transparent);

  /* ---- hero strip (bold dark band — used on Today/Desk/Floor headers) ---- */
  --hero-bg: #0E1B2E;
  --hero-ink: #F3F6FA;
  --hero-ink-2: #A9B6C8;
  --hero-glow-a: rgba(201,162,79,.30);
  --hero-glow-b: rgba(31,111,235,.38);

  /* ---- motion (snappy, short — research 03 §3) ---- */
  --dur-press: 90ms;
  --dur-micro: 140ms;
  --dur-card: 200ms;      /* card swap: out 160 / in 200 */
  --dur-panel: 240ms;     /* drawer, palette, modal */
  --dur-celebrate: 600ms; /* hard ceiling */
  --ease-out: cubic-bezier(.22,1,.36,1);
  --ease-in: cubic-bezier(.4,0,1,1);
  --ease-io: cubic-bezier(.65,0,.35,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
}

/* ---- dark: deep-navy command deck ---- */
:root[data-theme="dark"]{
  color-scheme: dark;
  --bg: #070D18; --bg-2: #0A1322; --panel: #0F1A2C; --panel-2: #132036; --panel-3: #172742;
  --scrim: rgba(0,0,0,.6);
  --ink: #EEF2F8; --ink-2: #C3CDDB; --ink-3: #93A0B4; --ink-4: #627089;
  --line: rgba(255,255,255,.07); --line-2: rgba(255,255,255,.13); --field-line: #6B7A92;
  --brand: #E8EEF7; --brand-ink: #0B1424; --brand-2: #C9D4E4;
  --go: #2BD49B; --go-hi: #4BE3B0; --go-ink: #04140E; --go-bg: rgba(43,212,155,.12); --go-text: #4BE3B0;
  --gold: #E2C27A; --gold-2: #F0D9A3; --gold-bg: rgba(226,194,122,.12); --gold-text: #F0D9A3;
  --wm-deg: #E2C27A;
  --hot: #FF6B5E; --hot-bg: rgba(255,107,94,.13); --hot-text: #FF8A80;
  --warn: #FFB547; --warn-bg: rgba(255,181,71,.12);
  --info: #6AA7FF; --info-bg: rgba(106,167,255,.12); --info-text: #8DBBFF;
  --plan: #A693FF; --plan-bg: rgba(166,147,255,.13); --plan-text: #BDAEFF;
  --focus: #6AA7FF;
  --sh-1: 0 0 0 1px rgba(255,255,255,.06);
  --sh-2: 0 14px 34px -14px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.07);
  --sh-3: 0 30px 80px -20px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.09);
  --sh-go: 0 8px 22px -8px rgba(43,212,155,.45);
  --hero-bg: #0B1526;
  --hero-ink: #F3F6FA;
  --hero-ink-2: #A9B6C8;
}
/* No-JS "system" theme: follow the OS when no explicit theme is set. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]):not([data-theme="dark"]){
  color-scheme: dark;
  --bg: #070D18; --bg-2: #0A1322; --panel: #0F1A2C; --panel-2: #132036; --panel-3: #172742;
  --scrim: rgba(0,0,0,.6);
  --ink: #EEF2F8; --ink-2: #C3CDDB; --ink-3: #93A0B4; --ink-4: #627089;
  --line: rgba(255,255,255,.07); --line-2: rgba(255,255,255,.13); --field-line: #6B7A92;
  --brand: #E8EEF7; --brand-ink: #0B1424; --brand-2: #C9D4E4;
  --go: #2BD49B; --go-hi: #4BE3B0; --go-ink: #04140E; --go-bg: rgba(43,212,155,.12); --go-text: #4BE3B0;
  --gold: #E2C27A; --gold-2: #F0D9A3; --gold-bg: rgba(226,194,122,.12); --gold-text: #F0D9A3;
  --wm-deg: #E2C27A;
  --hot: #FF6B5E; --hot-bg: rgba(255,107,94,.13); --hot-text: #FF8A80;
  --warn: #FFB547; --warn-bg: rgba(255,181,71,.12);
  --info: #6AA7FF; --info-bg: rgba(106,167,255,.12); --info-text: #8DBBFF;
  --plan: #A693FF; --plan-bg: rgba(166,147,255,.13); --plan-text: #BDAEFF;
  --focus: #6AA7FF;
  --sh-1: 0 0 0 1px rgba(255,255,255,.06);
  --sh-2: 0 14px 34px -14px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.07);
  --sh-3: 0 30px 80px -20px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.09);
  --sh-go: 0 8px 22px -8px rgba(43,212,155,.45);
  --hero-bg: #0B1526;
  --hero-ink: #F3F6FA;
  --hero-ink-2: #A9B6C8;
  }
}


/* User motion preference (Account → Appearance) overrides the device setting. */
:root[data-motion="reduced"]{ --dur-press:1ms; --dur-micro:1ms; --dur-card:1ms; --dur-panel:1ms; --dur-celebrate:1ms; }
@media (prefers-reduced-motion: reduce){
  :root:not([data-motion="full"]){ --dur-press:1ms; --dur-micro:1ms; --dur-card:1ms; --dur-panel:1ms; --dur-celebrate:1ms; }
}

/* ---- minimal base (components live in components.css / shell.css) ---- */
*,*::before,*::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body{
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 var(--fs)/var(--lh) var(--f-ui); letter-spacing: -.006em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden; overflow-x: clip; /* clip, never hidden-only: keeps position:sticky alive */
}
[hidden]{ display: none !important; }
img, svg{ display: block; max-width: 100%; }
button, input, select, textarea{ font: inherit; color: inherit; }
input, select, textarea{ font-size: 16px; } /* iOS never zooms */
a{ color: var(--info-text); text-decoration: none; }
a:hover{ text-decoration: underline; text-underline-offset: 2px; }
:focus-visible{ outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.num, .tnum{ font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.mono{ font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---- bare error page (View::errorPage — must work with nothing else loaded) ---- */
.errpage{ min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.errpage__card{ max-width: 520px; background: var(--panel); border-radius: var(--r-xl); box-shadow: var(--sh-2); padding: 40px 36px; }
.errpage__code{ font: 800 13px/1 var(--f-display); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--gold-text); margin: 0 0 10px; }
.errpage h1{ font: 800 var(--fs-2xl)/1.15 var(--f-display); letter-spacing: var(--tr-display); margin: 0 0 10px; }
.errpage p{ color: var(--ink-2); margin: 0 0 16px; }
.errpage__ref{ font-size: var(--fs-sm); color: var(--ink-3); }
.errpage .btn{ display: inline-flex; align-items: center; height: 44px; padding: 0 20px; border-radius: var(--r-pill);
  background: var(--brand); color: var(--brand-ink); font-weight: 700; text-decoration: none; }