/* Copied from brand/tokens.css (v1.0). Replace the whole file when the brand file changes. */
/* NAAM brand tokens v1.0 (01.11.2026)
 * Names in the first block are fixed by docs/SPEC.md section 7; values are final.
 * Role of each fixed name (dark mode keeps the role, swaps the value):
 *   --naam-foam  page background        --naam-ink   main text
 *   --naam-mist  quiet surface, lines   --naam-river brand primary, links, headers
 *   --naam-gold  highlight, sun, rating --naam-lotus action (primary buttons)
 * Contrast (WCAG 2.x) of every recommended text pair is printed in brand/index.html.
 */
:root{
  /* fixed names, SPEC section 7 */
  --naam-river:#0E5E6F;   /* white text 7.37, on foam 6.97 */
  --naam-ink:#0A1F2B;     /* on foam 15.96, on white 16.88 */
  --naam-gold:#F5A623;    /* ink text on gold 8.33; never text on light */
  --naam-lotus:#DC2157;   /* white text on lotus 4.77 (spec draft #FF4F6D gave 3.19) */
  --naam-foam:#F3FAF9;
  --naam-mist:#D9EEEC;    /* ink on mist 13.98, river on mist 6.10 */
  --naam-radius:16px;
  --naam-font-display:"Sora",system-ui,sans-serif;
  --naam-font-body:"Inter","Noto Sans Thai",system-ui,sans-serif;

  /* added colour roles */
  --naam-surface:#FFFFFF;          /* cards on foam */
  --naam-text-muted:#4A6470;       /* on foam 5.93, on white 6.27, on mist 5.19 */
  --naam-line:#B9D9D6;             /* borders, dividers (non-text) */
  --naam-on-river:#FFFFFF;
  --naam-on-lotus:#FFFFFF;
  --naam-on-gold:#0A1F2B;
  --naam-gold-text:#9A5B00;        /* gold-family text on light: on foam 5.13, on white 5.43 */
  --naam-lotus-bright:#FF4F6D;     /* decoration only: the boat dot, glows; never behind text */
  --naam-success:#1E7D4F;          /* on foam 4.84 */
  --naam-danger:#B42318;           /* on foam 6.22 */
  --naam-focus:#F5A623;            /* focus ring, 3px, offset 2px */
  --naam-font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --naam-font-thai:"Noto Sans Thai","Inter",system-ui,sans-serif;

  /* type scale, ratio 1.25, base 16px */
  --naam-text-xs:0.8rem;     /* 12.8 */
  --naam-text-sm:0.875rem;   /* 14, captions only */
  --naam-text-md:1rem;       /* 16 body */
  --naam-text-lg:1.25rem;    /* 20 */
  --naam-text-xl:1.563rem;   /* 25 */
  --naam-text-2xl:1.953rem;  /* 31 */
  --naam-text-3xl:2.441rem;  /* 39 */
  --naam-text-4xl:3.052rem;  /* 49 */
  --naam-text-hero:clamp(2.441rem, 7vw, 4.768rem); /* 39..76 */
  --naam-leading-tight:1.1;
  --naam-leading-body:1.55;
  --naam-leading-thai:1.75;  /* Thai stacks tone marks above the line */
  --naam-weight-body:400;
  --naam-weight-strong:600;
  --naam-weight-display:700;

  /* spacing scale, 4px grid */
  --naam-space-1:4px;
  --naam-space-2:8px;
  --naam-space-3:12px;
  --naam-space-4:16px;
  --naam-space-5:24px;
  --naam-space-6:32px;
  --naam-space-7:48px;
  --naam-space-8:64px;
  --naam-space-9:96px;

  /* radii */
  --naam-radius-sm:8px;
  --naam-radius-lg:24px;
  --naam-radius-pill:999px;

  /* shadows, tinted with river ink */
  --naam-shadow-1:0 1px 2px rgba(10,31,43,.08), 0 1px 1px rgba(10,31,43,.04);
  --naam-shadow-2:0 4px 12px rgba(10,31,43,.10), 0 2px 4px rgba(10,31,43,.06);
  --naam-shadow-3:0 16px 40px rgba(10,31,43,.16), 0 4px 12px rgba(10,31,43,.08);
  --naam-shadow-glow:0 8px 28px rgba(245,166,35,.35);

  /* motion */
  --naam-dur-fast:120ms;
  --naam-dur-base:200ms;
  --naam-dur-slow:360ms;
  --naam-dur-flow:2400ms;    /* the river line drift, loops */
  --naam-ease:cubic-bezier(.2,.7,.2,1);
  --naam-ease-flow:cubic-bezier(.45,0,.55,1);

  /* layout */
  --naam-tap:48px;           /* minimum touch target */
  --naam-container:1120px;
}

@media (prefers-color-scheme: dark){
  :root{
    --naam-river:#4FC1C6;   /* links and brand text on foam 8.51, on mist 6.82 */
    --naam-ink:#EAF6F4;     /* on foam 16.52, on mist 13.24 */
    --naam-gold:#F7B547;    /* on foam 10.14 */
    --naam-lotus:#FF5C7A;   /* dark text on lotus 6.15 */
    --naam-foam:#06171E;    /* page background at night */
    --naam-mist:#0F2C36;    /* quiet surface */

    --naam-surface:#0B222B;
    --naam-text-muted:#9DB8BF;  /* on foam 8.74, on mist 7.00 */
    --naam-line:#1E4652;
    --naam-on-river:#06171E;    /* 8.51 */
    --naam-on-lotus:#06171E;    /* 6.15 */
    --naam-on-gold:#06171E;     /* 10.14 */
    --naam-gold-text:#F7B547;
    --naam-lotus-bright:#FF5C7A;
    --naam-success:#5FD39A;     /* 9.81 */
    --naam-danger:#FF8A7A;      /* 7.98 */
    --naam-focus:#F7B547;

    --naam-shadow-1:0 1px 2px rgba(0,0,0,.4);
    --naam-shadow-2:0 4px 12px rgba(0,0,0,.45);
    --naam-shadow-3:0 16px 40px rgba(0,0,0,.55);
    --naam-shadow-glow:0 8px 28px rgba(247,181,71,.25);
  }
}

@media (prefers-reduced-motion: reduce){
  :root{ --naam-dur-fast:0ms; --naam-dur-base:0ms; --naam-dur-slow:0ms; --naam-dur-flow:0ms; }
}

/* ---- NAAM app override (not part of the brand file) ----
   Lets the in-app Theme setting force light or dark regardless of the OS setting.
   Same names, same values as the blocks above. */
:root[data-theme="light"] {
  --naam-river:#0E5E6F; --naam-ink:#0A1F2B; --naam-gold:#F5A623; --naam-lotus:#DC2157; --naam-foam:#F3FAF9; --naam-mist:#D9EEEC;
  --naam-surface:#FFFFFF; --naam-text-muted:#4A6470; --naam-line:#B9D9D6; --naam-on-river:#FFFFFF; --naam-on-lotus:#FFFFFF;
  --naam-on-gold:#0A1F2B; --naam-gold-text:#9A5B00; --naam-lotus-bright:#FF4F6D; --naam-success:#1E7D4F; --naam-danger:#B42318; --naam-focus:#F5A623;
}
:root[data-theme="dark"] {
  --naam-river:#4FC1C6; --naam-ink:#EAF6F4; --naam-gold:#F7B547; --naam-lotus:#FF5C7A; --naam-foam:#06171E; --naam-mist:#0F2C36;
  --naam-surface:#0B222B; --naam-text-muted:#9DB8BF; --naam-line:#1E4652; --naam-on-river:#06171E; --naam-on-lotus:#06171E;
  --naam-on-gold:#06171E; --naam-gold-text:#F7B547; --naam-lotus-bright:#FF5C7A; --naam-success:#5FD39A; --naam-danger:#FF8A7A; --naam-focus:#F7B547;
}