/* ==========================================================================
   SPEAKDOS MASTER THEME — design tokens
   The single source of truth for the Speakdos look, shared by every Speakdos
   app: the learner site and its installed PWA, the Ambassador and Privacy
   pages, and Speakdos Admin (Command Center + Labs, installed or not).

   This file holds VALUES only — colours, gradients, surfaces, status colours,
   radii, shadows and motion, in light and dark. It paints nothing by itself,
   so any page can link it without inheriting another page's layout:

     learner pages   link this, then /sd-theme.css (the expressive learner
                     layer: atmosphere, living tree, moments)
     Speakdos Admin  links this and maps its own quieter surfaces onto it
                     (html[data-sd-app="admin"] in admin.html)
     a future app    links this first and starts out as Speakdos

   Dark mode is the `dark` class on <html>, the same switch in every app.
   Dark is not an inversion: the same four hues deepened into plum, violet
   and midnight blue.

   Sections
     1. Tokens (light)
     2. Tokens (dark)
     3. Reduced motion
   ========================================================================== */

/* ---------- 1. Tokens (light) ------------------------------------------- */
:root,
html.side-es,
html.side-en{
  /* Palette, sampled from the business card. */
  --sd-peach:#ffd6bf;
  --sd-apricot:#ffe2cc;
  --sd-pink:#f9c6d8;
  --sd-lavender:#ddcbf3;
  --sd-periwinkle:#cfd4f7;
  --sd-sky:#c2e1f9;

  /* The atmosphere. Four soft washes over a peach → pink → lavender → blue
     sweep. Pure CSS: no image, no request, painted once. */
  --sd-atmos:
    radial-gradient(64rem 46rem at -8% -12%,rgba(255,214,186,.95),transparent 62%),
    radial-gradient(40rem 30rem at 34% 8%,rgba(252,200,218,.55),transparent 70%),
    radial-gradient(56rem 44rem at 108% 108%,rgba(186,222,250,.95),transparent 62%),
    radial-gradient(46rem 36rem at 62% 52%,rgba(214,198,245,.55),transparent 72%),
    linear-gradient(118deg,#ffdcc7 0%,#fbd0db 28%,#e9cff2 52%,#d5d6f7 72%,#c6e3fa 100%);
  --sd-base:#f3e5f1;               /* under the atmosphere, and the fallback */

  /* How much of the atmosphere shows through, per screen tone (section 3).
     A white veil: 0 = full colour, higher = calmer. */
  --sd-veil-vivid:rgba(255,255,255,0);
  --sd-veil-hub:rgba(255,255,255,.2);
  --sd-veil-calm:rgba(255,255,255,.5);

  /* The Bilingual Somos gradient. --bsx-grad stays the canonical name the
     pages already use; --sd-grad-ink is a deeper cut of the same four hues
     for gradient TEXT on light surfaces, where the pastel original is too
     faint to read. */
  --bsx-grad:linear-gradient(90deg,#f59e0b,#ec4899 45%,#8b5cf6 75%,#06b6d4);
  --sd-grad:var(--bsx-grad);
  --sd-grad-ink:linear-gradient(90deg,#c2410c,#db2777 40%,#7c3aed 72%,#0369a1);
  --sd-grad-soft:linear-gradient(135deg,rgba(255,214,186,.55),rgba(249,198,216,.5) 38%,rgba(221,203,243,.5) 68%,rgba(194,225,249,.55));

  /* Semantic tokens the pages already read. */
  --fg:#1c1631;
  --muted:#575170;
  --primary:#4f46e5;
  --pf:#fff;
  --accent:#f59e0b;
  --bg:#faf5fb;                    /* inset panels inside cards */
  --card:rgba(255,255,255,.86);    /* in-flow cards over the atmosphere */
  --border:#e4d9ee;

  /* Surfaces. */
  --sd-surface:var(--card);
  --sd-surface-solid:#fffcfe;      /* floating panels, answer choices */
  --sd-tint:#f1ecfd;               /* replaces the old pale-blue #eff6ff */
  --sd-tint-2:#f7f1f8;             /* replaces #f1f5f9 */
  --sd-ink-accent:#4338ca;         /* replaces the old #1d4ed8 accent text */
  --sd-ring:#ddd6fe;               /* replaces the old #dbeafe focus/selection ring */
  --sd-header:rgba(255,251,253,.7);
  --sd-header-line:rgba(255,255,255,.65);

  /* Depth. Tinted shadows so cards sit in the world, not on top of it. */
  --sd-shadow-sm:0 1px 2px rgba(76,45,120,.05),0 6px 18px rgba(120,80,170,.08);
  --sd-shadow-md:0 14px 38px rgba(110,70,160,.14);
  --sd-radius:16px;

  /* Tree glow. */
  --sd-glow:radial-gradient(closest-side,rgba(255,255,255,.9),rgba(255,226,238,.55) 48%,rgba(221,203,243,.25) 72%,transparent);
  --sd-leaf:linear-gradient(135deg,#86d96a,#2f9e44);
  --sd-spark:#fff8e1;

  /* Motion. One place to slow the whole world down or speed it up. */
  --sd-sway-dur:7.5s;
  --sd-glow-dur:8s;
  --sd-ease:cubic-bezier(.45,.05,.35,1);

  /* The legacy wallpaper tints are retired; the atmosphere replaces them. */
  --wall-1:transparent;--wall-2:transparent;--wall-3:transparent;

  /* Status. Shared by learner feedback and every admin table and pill, so a
     "paid", a "warning" or a "failed" means the same colour everywhere. */
  --sd-success:#047857;--sd-success-bg:#ecfdf5;--sd-success-line:#a7f3d0;
  --sd-warning:#b45309;--sd-warning-bg:#fffbeb;--sd-warning-line:#fde68a;
  --sd-error:#b91c1c;--sd-error-bg:#fef2f2;--sd-error-line:#fecaca;
  --sd-info:#4338ca;--sd-info-bg:#f1ecfd;--sd-info-line:#ddd6fe;

  /* Operational surfaces — the quiet side of the brand, for screens where
     numbers are read closely (Speakdos Admin analytics, tables, settings).
     A barely-there lavender page and solid white cards: the Speakdos hue is
     present, but never behind a figure. */
  --sd-calm:#f7f3fa;               /* quiet page background */
  --sd-calm-edge:#efe7f5;          /* where the quiet page meets the gradient band */
  --sd-field:#ffffff;              /* inputs, selects, text areas */
  --sd-table-head:#f6f1fa;
  --sd-row-hover:#faf6fc;
  --sd-track:#ebe4f2;              /* progress / bar tracks */
  --sd-scrim:rgba(28,22,49,.45);

  /* Shape and type. */
  --sd-radius-sm:10px;
  --sd-radius-lg:22px;
  --sd-font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --sd-font-mono:ui-monospace,SFMono-Regular,Menlo,monospace;

  /* Motion for controls (menus, drawers, toggles). The decorative motion
     above is learner-only; admin screens use only these short ones. */
  --sd-dur-fast:.15s;
  --sd-dur:.2s;

  /* Installed-app chrome (manifest theme_color / <meta name=theme-color>). */
  --sd-chrome:#f7d9e3;

  /* The Speakdos night: the dark sweep of the same four hues. It is the
     Speakdos Admin header band in both modes (and the Admin app icon), so the
     control centre is recognisably Speakdos without looking like the learner
     homepage. Its chrome colour is #1a1433. */
  --sd-night:
    radial-gradient(28rem 8rem at 0% 0%,rgba(160,72,98,.45),transparent 70%),
    radial-gradient(28rem 8rem at 100% 100%,rgba(30,96,176,.45),transparent 70%),
    linear-gradient(118deg,#2a1530 0%,#2b1734 28%,#241b4a 52%,#1b2150 72%,#10284a 100%);
  --sd-night-chrome:#1a1433;
}

/* ---------- 2. Tokens (dark) --------------------------------------------
   Not an inversion: the same four hues, deepened — plum where the peach
   was, violet in the middle, midnight blue on the right. */
html.dark,
html.dark.side-es,
html.dark.side-en{
  --sd-atmos:
    radial-gradient(64rem 46rem at -8% -12%,rgba(160,72,98,.42),transparent 62%),
    radial-gradient(40rem 30rem at 34% 8%,rgba(150,60,130,.22),transparent 70%),
    radial-gradient(56rem 44rem at 108% 108%,rgba(30,96,176,.42),transparent 62%),
    radial-gradient(46rem 36rem at 62% 52%,rgba(98,68,184,.30),transparent 72%),
    linear-gradient(118deg,#26152b 0%,#29172f 28%,#221a44 52%,#1a2049 72%,#10243f 100%);
  --sd-base:#150f27;
  --sd-veil-vivid:rgba(14,10,28,0);
  --sd-veil-hub:rgba(14,10,28,.22);
  --sd-veil-calm:rgba(14,10,28,.5);

  --sd-grad-ink:var(--bsx-grad);

  --fg:#efeaf9;
  --muted:#b1a9cb;
  --primary:#a5a8ff;
  --pf:#130e2a;
  --accent:#fbbf24;
  --bg:#1b1636;
  --card:rgba(27,22,52,.88);
  --border:#3a3162;

  --sd-surface-solid:#1d1839;
  --sd-tint:#282150;
  --sd-tint-2:#211b43;
  --sd-ink-accent:#c7c4ff;
  --sd-ring:rgba(165,168,255,.32);
  --sd-header:rgba(20,15,40,.72);
  --sd-header-line:rgba(165,150,230,.16);

  --sd-shadow-sm:0 1px 2px rgba(0,0,0,.3),0 6px 18px rgba(0,0,0,.28);
  --sd-shadow-md:0 14px 38px rgba(0,0,0,.45);

  --sd-glow:radial-gradient(closest-side,rgba(200,180,255,.38),rgba(236,120,180,.18) 50%,rgba(90,120,220,.12) 72%,transparent);
  --sd-spark:#fde68a;
}

  --sd-success:#6ee7b7;--sd-success-bg:rgba(16,185,129,.14);--sd-success-line:rgba(110,231,183,.32);
  --sd-warning:#fcd34d;--sd-warning-bg:rgba(245,158,11,.14);--sd-warning-line:rgba(252,211,77,.32);
  --sd-error:#fca5a5;--sd-error-bg:rgba(239,68,68,.14);--sd-error-line:rgba(252,165,165,.32);
  --sd-info:#c7c4ff;--sd-info-bg:rgba(129,120,255,.16);--sd-info-line:rgba(199,196,255,.3);

  --sd-calm:#130e25;
  --sd-calm-edge:#1a1433;
  --sd-field:#18132f;
  --sd-table-head:#211b43;
  --sd-row-hover:#1f1940;
  --sd-track:#2d2654;
  --sd-scrim:rgba(5,3,14,.6);

  --sd-chrome:#1a1433;
}

/* ---------- 3. Reduced motion -------------------------------------------
   Control transitions collapse to nothing; the learner layer (sd-theme.css
   section 10) additionally stops every decorative movement. */
@media (prefers-reduced-motion:reduce){
  :root{--sd-dur-fast:0s;--sd-dur:0s}
}