/* ============================================================
   Bite&Brief — Design Tokens (single source of truth for colour)
   ------------------------------------------------------------
   Load this BEFORE style.css. Every colour in the system resolves
   from here so light/dark themes stay in sync from one place.

   Layers:
     1. Primary scale        --color-primary-NNN   (raw ramp)
     2. Status / accent       --color-success etc.  (raw)
     3. Semantic tokens       --bg- / --text- / --btn- (spec)
     4. Status surface pairs  --badge- / --flash-   (bg/text/border)
     5. Alias layer           --color- legacy names -> semantic

   Theme resolution:
     • :root                          → light (default)
     • @media prefers-color-scheme    → dark for no-JS visitors
     • :root[data-theme="dark"]       → manual dark  (JS sets this)
     • :root[data-theme="light"]      → manual light (wins over media)
   The inline head script sets data-theme to the *resolved* value
   before first paint, so the media query only serves JS-less loads.

   NOTE (intentional deviation from the brief): the brief's
   `--color-accent:#e3a706` (gold) collides with the existing
   `--color-accent` which the whole codebase already uses for the
   BLUE primary. To avoid repainting every button/link gold, the
   blue meaning is preserved (aliased to --color-primary-500) and
   the gold accent is exposed as --color-accent-amber / --color-warning.
   ============================================================ */

:root{
  /* ---- 0. Brand ---- */
  /* Ink the header wordmark is masked with. These are the exact fills the two
     logo SVGs used to hard-code, so the logo keeps its brand colour rather than
     drifting to whatever --text-primary happens to be. */
  --brand-logo-ink:#0b0d12;
  /* Surface a cover box falls back to when its image fails to load (see
     .cover-fallback in style.css); the wordmark on top uses --brand-logo-ink. */
  --cover-fallback-bg:#eef0f2;

  /* ---- 1. Primary scale (light) ---- */
  --color-primary-900:#03286b;
  --color-primary-700:#0447ad;
  --color-primary-600:#0554cc;
  --color-primary-500:#065ee3;
  --color-primary-300:#5b93ec;
  --color-primary-100:#c3d9fa;
  --color-primary-50:#eaf2fe;

  /* ---- 2. Status / accent (light) ---- */
  --color-accent-amber:#e3a706;   /* the brief's "accent" gold, kept separate */
  --color-success:#16a34a;
  --color-warning:#e3a706;
  --color-error:#dc2626;
  --color-info:var(--color-primary-500);

  /* Fixed brand gradient (does NOT invert — white text always sits on it) */
  --brand-gradient:linear-gradient(135deg,#043b8f 0%,#065ee3 55%,#4c8bf5 100%);

  /* ---- 3. Semantic surface / text tokens (light) ---- */
  --bg-base:#ffffff;
  --bg-subtle:#f8fafc;
  --bg-elevated:#ffffff;
  --text-primary:#0f172a;
  --text-secondary:#475569;
  --border-default:#e2e8f0;
  --border-strong:#cbd5e1;        /* hover/emphasis borders */

  --link-color:var(--color-primary-500);
  --link-hover:var(--color-primary-600);

  --btn-primary-bg:var(--color-primary-500);
  --btn-primary-hover:var(--color-primary-600);
  --btn-primary-active:var(--color-primary-700);
  --btn-primary-text:#ffffff;

  /* Danger button keeps a saturated red in both themes so white text stays AA
     (the --color-error text token goes lighter in dark, which is why it isn't
     reused here). */
  --btn-danger-bg:#dc2626;
  --btn-danger-text:#ffffff;

  /* Primary / info badge (spec tokens) */
  --badge-bg:var(--color-primary-100);
  --badge-text:var(--color-primary-700);

  /* ---- 4. Status surface pairs (light) ---- */
  --badge-success-bg:#dcfce7; --badge-success-text:#166534;
  --badge-warning-bg:#fef3c7; --badge-warning-text:#92400e;
  --badge-neutral-bg:#eef2f7; --badge-neutral-text:#475569;
  --badge-info-bg:var(--color-primary-50); --badge-info-text:var(--color-primary-700);

  --flash-success-bg:#ecfdf3; --flash-success-border:#a7f3d0; --flash-success-text:#166534;
  --flash-error-bg:#fef2f2;   --flash-error-border:#fecaca;   --flash-error-text:#b91c1c;
  --flash-warning-bg:#fffbeb; --flash-warning-border:#fde68a; --flash-warning-text:#92600a;
  --flash-info-bg:var(--color-primary-50); --flash-info-border:#bfd8fd; --flash-info-text:var(--color-primary-700);

  /* ---- 5. Alias layer: legacy --color-* names → semantic tokens ----
     Defined once. Each references a token that gets re-pointed in dark
     mode, so var() resolves to the right value at use-time everywhere. */
  --color-bg:var(--bg-base);
  --color-bg-alt:var(--bg-subtle);
  --color-text:var(--text-primary);
  --color-text-primary:var(--text-primary);
  --color-text-secondary:var(--text-secondary);
  --color-accent:var(--color-primary-500);
  --color-accent-hover:var(--color-primary-600);
  --color-accent-soft:var(--color-primary-50);
  --color-accent-soft-strong:var(--color-primary-100);
  --color-border:var(--border-default);
  --color-danger:var(--color-error);

  /* ---- 6. Glass / frosted surfaces (light) ----
     --glass-bg needs backdrop-filter to read correctly; --glass-bg-solid is the
     opaque fallback served to browsers without it (see the @supports in
     style.css). --glass-surface tints controls that sit ON a glass panel so
     they stay visible without turning into opaque blocks. */
  --glass-bg:rgba(255,255,255,.66);
  --glass-bg-solid:rgba(255,255,255,.94);
  --glass-surface:rgba(15,23,42,.04);
  --glass-surface-hover:rgba(15,23,42,.07);
  --glass-border:rgba(15,23,42,.09);
  --glass-shadow:0 4px 24px rgba(11,18,32,.06);
  --glass-highlight:inset 0 1px 0 rgba(255,255,255,.65);
  --glass-blur:blur(14px) saturate(180%);
}

/* ---- Dark values (raw tokens only; aliases inherit automatically) ---- */

/* No-JS system dark: applies only when JS hasn't stamped an explicit theme. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]):not([data-theme="dark"]){
    --brand-logo-ink:#ffffff;
    --cover-fallback-bg:#141c2c;
    --color-primary-900:#eaf2fe;
    --color-primary-700:#c3d9fa;
    --color-primary-600:#7fabf0;
    --color-primary-500:#5b93ec;
    --color-primary-300:#3a6fd6;
    --color-primary-100:#1b3a75;
    --color-primary-50:#10254d;

    --color-accent-amber:#f0bc3d;
    --color-success:#22c55e;
    --color-warning:#f0bc3d;
    --color-error:#f87171;

    --bg-base:#0b1120;
    --bg-subtle:#0f172a;
    --bg-elevated:#161f34;
    --text-primary:#e2e8f0;
    --text-secondary:#94a3b8;
    --border-default:#263149;
    --border-strong:#334155;

    --btn-primary-text:#0b1120;

    --badge-bg:var(--color-primary-100);
    --badge-text:var(--color-primary-700);

    --badge-success-bg:#0f2e1c; --badge-success-text:#4ade80;
    --badge-warning-bg:#2e230a; --badge-warning-text:#fbbf24;
    --badge-neutral-bg:#1e293b; --badge-neutral-text:#94a3b8;
    --badge-info-bg:var(--color-primary-100); --badge-info-text:var(--color-primary-700);

    --flash-success-bg:#0f2e1c; --flash-success-border:#15803d; --flash-success-text:#4ade80;
    --flash-error-bg:#2e1113;   --flash-error-border:#7f1d1d;   --flash-error-text:#f87171;
    --flash-warning-bg:#2e230a; --flash-warning-border:#854d0e; --flash-warning-text:#fbbf24;
    --flash-info-bg:var(--color-primary-100); --flash-info-border:#2c5aa0; --flash-info-text:var(--color-primary-700);

    --glass-bg:rgba(11,17,32,.60);
    --glass-bg-solid:rgba(11,17,32,.94);
    --glass-surface:rgba(255,255,255,.06);
    --glass-surface-hover:rgba(255,255,255,.10);
    --glass-border:rgba(226,232,240,.10);
    --glass-shadow:0 4px 24px rgba(0,0,0,.38);
    --glass-highlight:inset 0 1px 0 rgba(255,255,255,.06);
  }
}

/* Manual dark (JS sets data-theme="dark"; also the resolved value for system-dark) */
:root[data-theme="dark"]{
  --brand-logo-ink:#ffffff;
  --cover-fallback-bg:#141c2c;
  --color-primary-900:#eaf2fe;
  --color-primary-700:#c3d9fa;
  --color-primary-600:#7fabf0;
  --color-primary-500:#5b93ec;
  --color-primary-300:#3a6fd6;
  --color-primary-100:#1b3a75;
  --color-primary-50:#10254d;

  --color-accent-amber:#f0bc3d;
  --color-success:#22c55e;
  --color-warning:#f0bc3d;
  --color-error:#f87171;

  --bg-base:#0b1120;
  --bg-subtle:#0f172a;
  --bg-elevated:#161f34;
  --text-primary:#e2e8f0;
  --text-secondary:#94a3b8;
  --border-default:#263149;
  --border-strong:#334155;

  --btn-primary-text:#0b1120;

  --badge-bg:var(--color-primary-100);
  --badge-text:var(--color-primary-700);

  --badge-success-bg:#0f2e1c; --badge-success-text:#4ade80;
  --badge-warning-bg:#2e230a; --badge-warning-text:#fbbf24;
  --badge-neutral-bg:#1e293b; --badge-neutral-text:#94a3b8;
  --badge-info-bg:var(--color-primary-100); --badge-info-text:var(--color-primary-700);

  --flash-success-bg:#0f2e1c; --flash-success-border:#15803d; --flash-success-text:#4ade80;
  --flash-error-bg:#2e1113;   --flash-error-border:#7f1d1d;   --flash-error-text:#f87171;
  --flash-warning-bg:#2e230a; --flash-warning-border:#854d0e; --flash-warning-text:#fbbf24;
  --flash-info-bg:var(--color-primary-100); --flash-info-border:#2c5aa0; --flash-info-text:var(--color-primary-700);

  --glass-bg:rgba(11,17,32,.60);
  --glass-bg-solid:rgba(11,17,32,.94);
  --glass-surface:rgba(255,255,255,.06);
  --glass-surface-hover:rgba(255,255,255,.10);
  --glass-border:rgba(226,232,240,.10);
  --glass-shadow:0 4px 24px rgba(0,0,0,.38);
  --glass-highlight:inset 0 1px 0 rgba(255,255,255,.06);

  /* CKEditor 5 ships a fixed light theme; retint via its own custom props.
     Best-effort: covers content area, toolbar, panels, inputs. Some deep
     internals may keep their defaults. */
  --ck-color-base-background:var(--bg-elevated);
  --ck-color-base-foreground:var(--bg-subtle);
  --ck-color-base-border:var(--border-default);
  --ck-color-base-text:var(--text-primary);
  --ck-color-text:var(--text-primary);
  --ck-color-shadow-drop:rgba(0,0,0,.35);
  --ck-color-shadow-inner:rgba(0,0,0,.2);
  --ck-color-toolbar-background:var(--bg-subtle);
  --ck-color-toolbar-border:var(--border-default);
  --ck-color-button-default-background:transparent;
  --ck-color-button-default-hover-background:#1e293b;
  --ck-color-button-default-active-background:#1e293b;
  --ck-color-button-on-background:#1e293b;
  --ck-color-button-on-hover-background:#243149;
  --ck-color-panel-background:var(--bg-elevated);
  --ck-color-panel-border:var(--border-default);
  --ck-color-dropdown-panel-background:var(--bg-elevated);
  --ck-color-input-background:var(--bg-subtle);
  --ck-color-input-border:var(--border-default);
  --ck-color-input-text:var(--text-primary);
  --ck-color-list-background:var(--bg-elevated);
  --ck-color-list-button-hover-background:#1e293b;
}