/* ============================================================
   HINWE design tokens — the only place style values are written.
   Source of truth: design/hinwe-ui-v2.html (approved target UI).
   Every other stylesheet, inline style and script uses var(--…).
   Dark theme only: the approved design has no light theme.

   Breakpoints cannot be custom properties (CSS does not allow
   var() inside @media), so these four widths are the only numbers
   written outside this file, and only inside @media conditions:
     600px  phone        760px  narrow
     900px  tablet       1080px wide
   ============================================================ */
:root{
  /* ---------- Colour: surfaces ---------- */
  --bg-canvas:#060608; --bg-surface:#0E0F12; --bg-raised:#15171B;
  --bg-sunken:#0A0B0D; --bg-hover:#1B1D22; --bg-graphite:#1F2127;

  /* ---------- Colour: text ---------- */
  --fg-1:#F4F5F7; --fg-2:#C9CBD1; --fg-3:#8A8D96; --fg-4:#5A5D66; --fg-5:#3A3D44;

  /* ---------- Colour: borders ---------- */
  --bd-hairline:#1E2026; --bd-strong:#2A2D34; --bd-focus:#C9CBD1; --bd-grid:#15171B;

  /* ---------- Colour: the one red ---------- */
  --red:#E13B2A; --red-bright:#FF4A38; --red-dim:#8A2A20; --red-bg:#2A0F0C; --red-line:#5A1A12;

  /* ---------- Colour: status ---------- */
  --ok:#6BB07A; --warn:#C9A24A; --crit:var(--red);

  /* ---------- Colour: state shades used by the design ---------- */
  --warn-bg:#1a1406;          /* warning banner, deadline approaching */
  --warn-bg-strong:#241a06;   /* due / pending pills, stale tag */
  --warn-line:#4a3a12;
  --warn-text:#e6c97a;
  --ok-bg:#0c1a10;
  --ok-text:#b6d7bd;
  --crit-text:#ffb2a6;
  --info:#6690C9;             /* proof submitted */
  --info-text:#a9c3e8;        /* partner accepted, proof submitted */
  --on-red:#fff;              /* text and ticks on solid red */
  --red-disabled-bg:#3a1410;
  --red-disabled-text:#7a4a44;
  --red-skeleton-bg:#1a0906;
  --red-tint-6:rgba(225,59,42,.06);   /* selected option card */
  --red-tint-8:rgba(225,59,42,.08);   /* selected chip, sign-in glow */
  --scrim:rgba(6,6,8,.72);

  /* ---------- Type: families ---------- */
  --font-display:'Saira','Helvetica Neue',system-ui,sans-serif;
  --font-ui:'Space Grotesk','Helvetica Neue',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;

  /* ---------- Type: sizes ---------- */
  --t-10:10px; --t-11:11px; --t-12:12px; --t-13:13px; --t-14:14px;
  --t-15:15px; --t-16:16px; --t-18:18px; --t-24:24px; --t-28:28px; --t-36:36px;
  /* Roles */
  --t-h1:var(--t-36); --t-h2:var(--t-24); --t-h3:var(--t-18); --t-h4:var(--t-15);
  --t-body:var(--t-15); --t-mono:var(--t-13); --t-caps:var(--t-11);

  /* ---------- Type: weights ---------- */
  --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-heavy:800;

  /* ---------- Type: line heights ---------- */
  --lh-tight:1.05; --lh-snug:1.2; --lh-140:1.4; --lh-145:1.45; --lh-body:1.55;
  --lh-170:1.7; --lh-180:1.8; --lh-190:1.9;

  /* ---------- Type: letter spacing ---------- */
  --tr-tight:-.02em; --tr-normal:0; --tr-02:.02em; --tr-06:.06em; --tr-08:.08em;
  --tr-cap:.14em; --tr-cap-wide:.22em;

  /* ---------- Spacing ----------
     Named by size. Main steps for new layout: 4 8 12 16 24 32 48 64.
     The in-between steps reproduce the approved components exactly. */
  --space-1:1px; --space-2:2px; --space-3:3px; --space-4:4px; --space-5:5px;
  --space-6:6px; --space-7:7px; --space-8:8px; --space-10:10px; --space-11:11px;
  --space-12:12px; --space-14:14px; --space-16:16px; --space-18:18px; --space-20:20px;
  --space-22:22px; --space-24:24px; --space-26:26px; --space-28:28px; --space-32:32px;
  --space-36:36px; --space-48:48px; --space-64:64px;
  --space-neg-1:-1px;

  /* ---------- Radii ---------- */
  --r-0:0; --r-1:2px; --r-2:4px; --r-3:8px; --r-round:50%;
  --shield-cut-md:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);

  /* ---------- Borders ---------- */
  --bw-1:1px; --bw-2:2px; --bw-3:3px;

  /* ---------- Shadows, blur, filters ---------- */
  --shadow-dialog:0 20px 60px rgba(0,0,0,.6);
  --blur-crumb:6px; --blur-scrim:8px;
  --filter-stale:grayscale(.2);

  /* ---------- Motion ---------- */
  --dur-spin:.8s; --dur-skel:1.4s; --dur-skel-slow:1.6s; --dur-pulse:1.4s;

  /* ---------- Opacity and layers ---------- */
  --o-35:.35; --o-50:.5; --o-55:.55; --o-70:.7;
  --z-sticky:10; --z-dialog:20;   /* dialog layer: an app addition (the design shows dialogs inline) */

  /* ---------- Sizes ---------- */
  --size-visually-hidden:1px;
  --size-rail:280px;
  --size-page:1180px;
  --size-auth-card:420px;
  --size-dialog:520px;
  --size-form:480px;
  --size-wide:820px;
  --size-prose:56ch;
  --size-scrim-min:320px;
  --size-mark:36px; --size-mark-lg:56px; --size-wordmark:16px;
  --size-dot:6px; --size-dot-lg:8px;
  --size-check:18px;
  --size-spinner:16px; --size-spinner-lg:24px;
  --size-touch:44px;
  --size-textarea-min:88px;
  --size-meta-min:180px; --size-stat-min:160px; --size-review-label:180px;
  --size-skel-line:12px; --size-skel-line-lg:22px; --size-skel-line-sm:10px;
  --size-skel-pill-h:20px; --size-skel-pill-w:96px;
  --size-skel-btn-h:36px; --size-skel-btn-w:120px;
  --size-skel-count-h:32px; --size-skel-count-w:44px;
  --size-skel-bar:44px;

  /* ============================================================
     APP ADDITIONS — values for parts of the app the design does not
     have. None of them overrides a design value. Do not use them for
     anything the design covers.
     ============================================================ */
  --t-wordmark:34px; --lh-wordmark:1.1;  /* sign-in "HINWE" text; the design shows a logo image (not in the repo) */
  --z-fatal:9999;                         /* startup error banner, above every other layer */
  --size-app-placeholder:240px;           /* app area while its code loads */
  --size-target-min:24px;                 /* minimum tap height for the sign-in/sign-up switch */
  --size-status-line:20px;                /* Create's save-status line, so it does not jump */
}