/* ---------------------------------------------------------------
   Design tokens — Zen & Dynamics.

   Brand: black, warm ivory and gold. Gold (--gold*) is the only accent
   and the only call-to-action colour. Green/red (--status-*) are NOT
   decoration — they only ever mean live status: at the site or not, on
   shift, a success or an error. WhatsApp green (--wa) is used only on
   WhatsApp share buttons, where it's the recognisable cue.
----------------------------------------------------------------*/
:root {
  color-scheme: light;

  /* surfaces */
  --paper: #F5F2EB;          /* page: warm ivory */
  --panel: #FFFFFF;          /* cards */
  --panel-raised: #FFFFFF;   /* inputs and anything on a card */
  --panel-2: #FAF8F3;        /* quiet fill inside cards (group headers) */
  --ink: #15130F;            /* text, black brand element */
  --ink2: #5E5A51;           /* secondary text */
  --ink3: #9C978B;           /* tertiary text, captions */
  --line: #E6E1D5;           /* borders */
  --line2: #EFEBE2;          /* dividers inside cards */

  /* the dark "hero" surfaces (header, live clock) */
  --hero: #0A0A0A;
  --hero-2: #1A1A1A;
  --hero-ink: #F6F1E4;
  --hero-ink2: rgba(246, 241, 228, .62);
  --hero-line: rgba(246, 241, 228, .14);

  /* gold */
  --gold: #D2AA55;
  --gold-strong: #A9832F;
  --gold-soft: #F6EDD7;
  --gold-grad: linear-gradient(135deg, #EDCD86 0%, #D6AC55 48%, #B88A35 100%);
  --on-gold: #1C1506;

  /* status only (see header) */
  --status-good: #1C7A4D;
  --status-good-soft: #E1F2E8;
  --status-bad: #B5412D;
  --status-bad-soft: #F8E5E0;

  --wa: #1DA851;
  --wa-strong: #168A42;

  --ring-idle: var(--ink3);

  --sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: var(--sans);   /* numbers use tabular figures, not a code font */

  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 26px;

  --shadow-sm: 0 1px 2px rgba(21, 19, 15, .05), 0 1px 1px rgba(21, 19, 15, .03);
  --shadow-md: 0 10px 24px -12px rgba(21, 19, 15, .18), 0 2px 6px -2px rgba(21, 19, 15, .06);
  --shadow-lg: 0 24px 48px -18px rgba(21, 19, 15, .45);
  --shadow-gold: 0 10px 22px -10px rgba(169, 131, 47, .65);

  --ease: cubic-bezier(.2, .7, .3, 1);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --paper: #0D0C0A;
    --panel: #181713;
    --panel-raised: #1F1D18;
    --panel-2: #1C1A16;
    --ink: #F4F0E6;
    --ink2: #C3BEB1;
    --ink3: #8E897D;
    --line: #2E2B24;
    --line2: #26241E;

    --hero: #050505;
    --hero-2: #141414;

    --gold: #E2BC68;
    --gold-strong: #F0D08C;
    --gold-soft: #33280F;
    --on-gold: #1C1506;

    --status-good: #52BD80;
    --status-good-soft: #15321F;
    --status-bad: #E58A72;
    --status-bad-soft: #3A211A;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 10px 24px -12px rgba(0, 0, 0, .7);
    --shadow-lg: 0 24px 48px -18px rgba(0, 0, 0, .8);
    --shadow-gold: 0 10px 22px -12px rgba(226, 188, 104, .45);
  }
}