/* GermanMed Platform — Design Tokens
   Maximalism + claymorphism on the LOCKED brand palette: RED · BLACK · YELLOW · WHITE.
   No other hue exists in this system. Neutrals are warm greys derived from black/white.

   TWO COLOUR SYSTEMS, kept strictly apart (owner directive):

   1. BRAND — the German flag: BLACK · RED · GOLD, plus white and warm neutrals.
      This is identity: the masthead, zone bands, buttons, nav, surfaces, type.
      Nothing outside black/red/gold/white ever carries brand meaning.

   2. FUNCTIONAL — the traffic light: RED · AMBER · GREEN.
      Status only, where the meaning is universal and instantly readable:
        red   = urgent / blocking / overdue / failed
        amber = needs attention / due soon / stale
        green = good / verified / done / passed
      Green is NEVER brand furniture. It appears only on a status pill, a severity
      rail, a "done" action, or a verified stamp — never a band, header or surface.

   Brand red and functional red are the same value by design: the flag colour also
   reads as danger, which is why the two systems coexist without noise.

   Every value below is contrast-checked. Failures found and fixed in review:
     ink-50  #787C83 -> #73777D   (was 4.19:1 on white, failed AA)
     gold text       -> #8F6900   (passes on white AND on gold-wash: 4.53:1)
     dark red fill   -> #B8151B   (--gm-red on dark was 3.82:1, failed)
     focus ring: INK on light (gold on white is 1.84:1 and fails), GOLD on dark (9.36:1) */

/* ── Dubai — self-hosted, four weights, Arabic + Latin from one family ──
   No CDN, no external request: strict CSP + offline PWA + a regulated tool must not
   phone out for a font. Licensed free of charge by the Dubai Executive Council. */
@font-face{font-family:'Dubai';src:url('/app/fonts/Dubai-Light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Dubai';src:url('/app/fonts/Dubai-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Dubai';src:url('/app/fonts/Dubai-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Dubai';src:url('/app/fonts/Dubai-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{
  /* ── BRAND — the German flag (black · red · gold) + white ──────────── */
  --gm-red:#E11B22;            /* white on it = 4.79:1 */
  --gm-red-ink:#BE141B;        /* red TEXT on white = 6.35:1 */
  --gm-red-solid:#E11B22;      /* fill that carries white text */
  --gm-red-wash:rgba(225,27,34,.10);
  --gm-gold:#F5B400;           /* SURFACE only — never text on white (1.84:1) */
  --gm-gold-ink:#8F6900;       /* gold TEXT: 5.0:1 on white, 4.53:1 on gold-wash */
  --gm-gold-deep:#8F6900;      /* legacy alias */
  --gm-gold-wash:rgba(245,180,0,.16);
  /* ── FUNCTIONAL — traffic light. STATUS ONLY, never brand furniture. ── */
  --gm-danger:#E11B22;         /* red: urgent / blocking / failed */
  --gm-amber:#8F6900;          /* amber TEXT = gold ink (raw gold fails on white) */
  --gm-green:#2C8654;          /* green: good / verified / done — 4.52:1 on white */
  --gm-green-ink:#28794C;      /* green TEXT on a green wash — 4.54:1 */
  --gm-green-wash:rgba(44,134,84,.13);

  /* ── warm clay grounds — cards sit on TINTED ground, never white-on-white ── */
  --gm-canvas:#F4F0EE;
  --gm-surface:#FFFFFF;
  --gm-surface-2:#EDE7E4;
  --gm-surface-3:#E3DBD7;
  --gm-band-ink:#16181C;       /* black band — brand furniture (masthead, identity) */
  --gm-band-red:#B8151B;       /* traffic RED band — white on it = 6.64:1 */
  --gm-band-green:#1F6B43;     /* traffic GREEN band — white on it = 6.48:1 */

  /* ── ink ───────────────────────────────────────────────────────────── */
  --gm-ink:#16181C;            /* 17.8:1 on white */
  --gm-ink-70:#494C52;         /* 8.61:1 */
  --gm-ink-50:#73777D;         /* 4.50:1 — fixed from #787C83 */
  --gm-ink-30:#AEB2B9;         /* decorative only, never text */
  --gm-line:#E2DBD8;
  --gm-line-2:#D0C7C2;

  /* ── clay depth: a hairline edge does the work a heavy shadow would,
        at a fraction of the paint cost. Critical: the register is 226 rows. ── */
  --gm-clay-edge:1px solid rgba(30,20,16,.055);
  --gm-shadow:0 1px 2px rgba(30,20,16,.05), 0 10px 24px -8px rgba(30,20,16,.13);
  --gm-shadow-2:0 3px 6px rgba(30,20,16,.06), 0 20px 40px -12px rgba(30,20,16,.18);
  --gm-press:inset 0 2px 6px rgba(30,20,16,.16);
  --gm-well:inset 0 2px 10px rgba(30,20,16,.09);

  --gm-focus:#16181C;
  --gm-focus-halo:rgba(245,180,0,.45);

  /* ── shape: claymorphism means large radii ─────────────────────────── */
  --r-s:10px; --r-m:16px; --r-l:24px; --r-xl:32px; --r-pill:999px;

  /* ── type ──────────────────────────────────────────────────────────── */
  --font:'Dubai',system-ui,-apple-system,'Segoe UI',Tahoma,sans-serif;
  --font-brand:'Dubai',system-ui,-apple-system,'Segoe UI',Tahoma,sans-serif;

  /* ── motion (Emil): every duration < 300ms, ease-out only, never ease-in ── */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --dur-press:120ms; --dur-state:180ms; --dur-modal:240ms;

  color-scheme:light;
}

/* ── DARK: solved deliberately, not inverted.
      Clay reads through a LIGHT TOP EDGE here, because a dark drop shadow is
      invisible on a dark bed. Red must lift or it fails contrast. ── */
[data-theme="dark"]{
  --gm-red:#E74A50;            /* lifted: brand red on dark surface is only 3.59:1 */
  --gm-red-ink:#FF8A85;
  --gm-red-solid:#B8151B;      /* fill carrying white text: 6.64:1 */
  --gm-red-wash:rgba(231,74,80,.16);
  --gm-gold:#F5B400;
  --gm-gold-ink:#F5B400;       /* 9.36:1 on dark surface */
  --gm-gold-deep:#F5B400;
  --gm-gold-wash:rgba(245,180,0,.16);
  --gm-danger:#E74A50;
  --gm-amber:#F5B400;
  --gm-green:#59C08A;          /* lifted for dark — 7.66:1 on surface */
  --gm-green-ink:#59C08A;      /* 5.85:1 on the dark green wash */
  --gm-green-wash:rgba(89,192,138,.15);

  --gm-canvas:#131011;
  --gm-surface:#1E1A1B;
  --gm-surface-2:#262122;
  --gm-surface-3:#2F292A;
  --gm-band-ink:#0C0A0B;
  --gm-band-red:#8E1016;
  --gm-band-green:#1A5C39;     /* white on it = 7.97:1 */

  --gm-ink:#F4F0EE;            /* 15.2:1 */
  --gm-ink-70:#B9B1AE;         /* 8.17:1 */
  --gm-ink-50:#8A817E;         /* 4.53:1 */
  --gm-ink-30:#615956;
  --gm-line:#332C2E;
  --gm-line-2:#3F3739;

  --gm-clay-edge:1px solid rgba(255,255,255,.06);
  --gm-shadow:0 2px 6px rgba(0,0,0,.42), 0 14px 30px -10px rgba(0,0,0,.58);
  --gm-shadow-2:0 4px 10px rgba(0,0,0,.48), 0 24px 48px -14px rgba(0,0,0,.68);
  --gm-press:inset 0 2px 8px rgba(0,0,0,.55);
  --gm-well:inset 0 2px 12px rgba(0,0,0,.45);

  --gm-focus:#F5B400;          /* gold IS the focus ring in dark: 9.36:1 */
  --gm-focus-halo:rgba(245,180,0,.28);

  color-scheme:dark;
}