/* SiteWise design tokens — the single source of visual truth.
   Identity: the working documents of building surveying — drawing ink on cool
   drafting paper, spruce green as the working colour, hi-vis orange STRICTLY
   for "needs attention" (pending sync, awaiting validation, warnings).
   Type: Archivo variable (width axis: expanded = title-block display voice,
   normal = UI voice) + Spline Sans Mono for the data voice (room codes, money,
   references). Grade colours follow the RICS A–D convention and never change.
   Light/dark aware. */

@font-face {
  font-family: 'Sora';
  src: url('/fonts/sora-var.woff2') format('woff2-variations');
  font-weight: 100 800;
  font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('/fonts/hanken-grotesk-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Spline Sans Mono';
  src: url('/fonts/spline-sans-mono-var.woff2') format('woff2-variations');
  font-weight: 300 700;
  font-display: swap;
}

:root {
  /* Native form-control chrome (date-picker calendar glyph, select arrows,
     scrollbars) follows the theme — without this Chrome draws them for light
     mode on our dark surfaces. */
  color-scheme: light;

  /* Brand */
  --sw-primary: #1d5c4b;
  --sw-primary-strong: #143f33;
  /* Text sat ON the primary green: white works on the deep light-theme green,
     but the brighter dark-theme green needs dark ink (contrast ~2.5:1 with white). */
  --sw-on-primary: #ffffff;
  --sw-primary-soft: #dfede6;
  --sw-ink-bar: #12362c;          /* the appbar's signage green, both themes */
  --sw-ink-bar-text: #e9f2ee;
  --sw-mint: #7fc8af;             /* brand highlight on dark surfaces */
  --sw-accent: #e8642c;           /* hi-vis: attention states ONLY */
  --sw-accent-soft: #fde9de;

  /* Surfaces */
  --sw-bg: #f2f5f3;
  --sw-surface: #fcfdfc;
  --sw-surface-raised: #ffffff;
  --sw-border: #dce3df;
  --sw-border-strong: #b4c0ba;

  /* Text */
  --sw-text: #16211c;
  --sw-text-muted: #5e6e67;
  --sw-text-invert: #ffffff;

  /* Feedback */
  --sw-danger: #be3d2e;
  --sw-danger-soft: #fbe9e6;
  --sw-warn: #b7791f;
  --sw-warn-soft: #fdf3e0;
  /* Priority P3 — a true yellow, clearly apart from P2's amber. */
  --prio-3: #8f7d08;
  --prio-3-soft: #faf5cf;
  --sw-ok: #2e7d54;
  --sw-ok-soft: #e4f2ea;
  --sw-info-soft: #e6eef7;

  /* Condition grades (chips + heat colouring) — RICS convention */
  --grade-a: #2e7d54;
  --grade-a-soft: #e4f2ea;
  --grade-b: #8f9e1b;
  --grade-b-soft: #f2f5dc;
  --grade-c: #d96a1f;
  --grade-c-soft: #fbeadd;
  --grade-d: #be3d2e;
  --grade-d-soft: #fbe9e6;
  --grade-na: #6f7f88;
  --grade-na-soft: #edf1f3;

  /* Type ramp — Sora for display (precise, technical, never fat), Hanken
     Grotesk for reading/UI, Spline Sans Mono for the data voice. */
  --font-body: 'Hanken Grotesk', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-display: 'Sora', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'Spline Sans Mono', Consolas, 'Cascadia Mono', monospace;
  --display-stretch: 100%;        /* legacy hook — the display voice is weight + Sora now */
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.2rem;
  --fs-xl: clamp(1.35rem, 1.1rem + 1vw, 1.7rem);
  --fs-2xl: clamp(1.7rem, 1.3rem + 1.6vw, 2.3rem);

  /* Space + radius */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --radius: 10px;
  --radius-sm: 6px;
  --radius-pill: 999px;

  --shadow-1: 0 1px 3px rgb(16 32 27 / 0.09);
  --shadow-2: 0 6px 22px rgb(16 32 27 / 0.13);
  --focus-ring: 0 0 0 2px var(--sw-bg), 0 0 0 4px var(--sw-primary);

  /* Touch targets — tablet gloves */
  --tap: 44px;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --sw-bg: #0e1512;
    --sw-surface: #151e1a;
    --sw-surface-raised: #1b2620;
    --sw-border: #263129;
    --sw-border-strong: #39463f;
    --sw-text: #e8eeea;
    --sw-text-muted: #93a39b;
    --sw-primary: #3f9b7e;
    --sw-primary-strong: #4fb694;
    --sw-primary-soft: #14332a;
    --sw-on-primary: #0c1712;
    --sw-ink-bar: #10241d;
    --sw-accent-soft: #3b2113;
    --sw-danger-soft: #3a1d19;
    --sw-warn-soft: #362a12;
    --prio-3: #e0cf4a;
    --prio-3-soft: #33300f;
    --sw-ok-soft: #143024;
    --sw-info-soft: #16283e;
    --grade-a: #4caf7d;
    --grade-a-soft: #143024;
    --grade-b: #b3c33e;
    --grade-b-soft: #262b10;
    --grade-c: #e88a45;
    --grade-c-soft: #37220f;
    --grade-d: #e06552;
    --grade-d-soft: #3a1d19;
    --grade-na: #93a3ab;
    --grade-na-soft: #232a31;
    --shadow-1: 0 1px 3px rgb(0 0 0 / 0.4);
    --shadow-2: 0 6px 22px rgb(0 0 0 / 0.5);
  }
}