/* FeedCentral Design System — tokens.
   UI Foundation phase. One canonical source for color/typography/spacing/shape/interaction
   values shared by News.Web, News.Portal, and News.Admin. Inspired (structure/rhythm only — see
   project memory's "template inspiration" note) by mature SaaS dashboard conventions; no code or
   asset was copied from any reference product.

   Light+dark from day one via the same prefers-color-scheme + data-theme[both directions] pattern
   already proven in News.Web's marketing.css — extended here to the full shared token set so
   Portal/Admin inherit working dark-mode-readiness even though neither exposes a theme toggle in
   this phase (Task 12: structure for both modes now, wire up a switch later — cheap now,
   expensive to retrofit). No component styling lives in this file — see primitives.css. */

:root {
  color-scheme: light dark;

  /* ---- color: surfaces ------------------------------------------------------------------- */
  --fc-bg: #f5f6fa;
  --fc-surface: #ffffff;
  --fc-surface-raised: #ffffff;
  --fc-surface-sunken: #eef0f5;
  --fc-border: #e1e3ea;
  --fc-border-strong: #c7cbd8;

  /* ---- color: text ------------------------------------------------------------------------ */
  --fc-text: #14161f;
  --fc-text-muted: #565b6b;
  --fc-text-faint: #8a8fa3;
  --fc-text-on-accent: #ffffff;

  /* ---- color: brand ------------------------------------------------------------------------ */
  --fc-primary: #2b4fe0;
  --fc-primary-strong: #1d3bc4;
  --fc-primary-soft: #eaefff;
  --fc-accent: #0f9d8f;
  --fc-accent-soft: #e3f6f3;

  /* ---- color: semantic ---------------------------------------------------------------------- */
  --fc-success: #1a8f5a;
  --fc-success-soft: #e5f6ee;
  --fc-warning: #a15a06;
  --fc-warning-soft: #fdf1dc;
  --fc-danger: #c22b3f;
  --fc-danger-soft: #fbe9ec;
  --fc-info: #2b6cb0;
  --fc-info-soft: #e8f0fb;

  /* ---- typography ---------------------------------------------------------------------------- */
  --fc-font-display: "Iowan Old Style", "Palatino Linotype", "URW Palladio", Georgia, serif;
  --fc-font-body: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", system-ui, sans-serif;
  --fc-font-mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;

  --fc-text-h1: 700 clamp(1.7rem, 2.6vw, 2.15rem)/1.2 var(--fc-font-display);
  --fc-text-h2: 700 1.5rem/1.25 var(--fc-font-display);
  --fc-text-h3: 600 1.15rem/1.35 var(--fc-font-body);
  --fc-text-body: 400 0.95rem/1.6 var(--fc-font-body);
  --fc-text-small: 400 0.82rem/1.5 var(--fc-font-body);
  --fc-text-label: 600 0.72rem/1.2 var(--fc-font-body);
  --fc-text-stat: 700 1.9rem/1.1 var(--fc-font-body);

  /* ---- spacing scale (8px base) --------------------------------------------------------------- */
  --fc-space-1: 4px;
  --fc-space-2: 8px;
  --fc-space-3: 12px;
  --fc-space-4: 16px;
  --fc-space-5: 24px;
  --fc-space-6: 32px;
  --fc-space-7: 48px;
  --fc-space-8: 64px;

  /* ---- shape ------------------------------------------------------------------------------- */
  --fc-radius-sm: 6px;
  --fc-radius-md: 10px;
  --fc-radius-lg: 14px;
  --fc-radius-pill: 999px;
  --fc-shadow-sm: 0 1px 2px rgba(20, 22, 31, 0.05);
  --fc-shadow-md: 0 1px 2px rgba(20, 22, 31, 0.04), 0 8px 24px rgba(20, 22, 31, 0.07);
  --fc-shadow-lg: 0 4px 8px rgba(20, 22, 31, 0.05), 0 16px 40px rgba(20, 22, 31, 0.1);

  /* ---- interaction --------------------------------------------------------------------------- */
  --fc-focus-ring: 0 0 0 2px var(--fc-bg), 0 0 0 4px var(--fc-primary);
  --fc-hover-overlay: rgba(20, 22, 31, 0.04);
  --fc-active-overlay: rgba(20, 22, 31, 0.08);
  --fc-disabled-opacity: 0.5;
  --fc-transition-fast: 120ms ease;
  --fc-transition: 180ms ease;

  /* ---- layout -------------------------------------------------------------------------------- */
  --fc-content-width: 1080px;
  --fc-sidebar-width: 248px;
  --fc-sidebar-width-collapsed: 68px;
  --fc-topbar-height: 60px;

  /* ---- code panels ----------------------------------------------------------------------------
     Public Website Redesign — a code/API response block reads as intentionally "terminal-like"
     rather than a plain content box, so it stays dark-on-light in BOTH themes (the deliberate
     exception to the rest of this token set, which is fully theme-reactive) — the same convention
     most developer-facing sites use. Shared here (not hardcoded per-page) because both the new
     marketing API section AND the developer docs code blocks need the identical treatment. */
  --fc-code-bg: #12141c;
  --fc-code-text: #e3e6f0;
  --fc-code-text-muted: #8a90a8;
  --fc-code-border: #2a2e40;
  --fc-code-key: #7fb8ff;
  --fc-code-string: #8fd99f;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fc-bg: #0b0d13;
    --fc-surface: #12141c;
    --fc-surface-raised: #161925;
    --fc-surface-sunken: #0e1017;
    --fc-border: #262a3a;
    --fc-border-strong: #363c52;

    --fc-text: #e8e9f2;
    --fc-text-muted: #9a9fb4;
    --fc-text-faint: #6d7288;
    --fc-text-on-accent: #0b0d13;

    --fc-primary: #6d87ff;
    --fc-primary-strong: #8a9fff;
    --fc-primary-soft: #1a2140;
    --fc-accent: #3fd6c4;
    --fc-accent-soft: #103330;

    --fc-success: #4fd695;
    --fc-success-soft: #103828;
    --fc-warning: #f0b350;
    --fc-warning-soft: #3a2c0f;
    --fc-danger: #ef8090;
    --fc-danger-soft: #3a1720;
    --fc-info: #8fb4ef;
    --fc-info-soft: #182338;

    --fc-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --fc-shadow-md: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.4);
    --fc-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.35), 0 16px 40px rgba(0, 0, 0, 0.5);

    --fc-focus-ring: 0 0 0 2px var(--fc-bg), 0 0 0 4px var(--fc-primary);
    --fc-hover-overlay: rgba(255, 255, 255, 0.06);
    --fc-active-overlay: rgba(255, 255, 255, 0.1);
  }
}

/* Explicit override wins in BOTH directions over the media query — a user-toggled theme (via a
   future switch) always beats the OS preference, exactly as News.Web's own marketing.css already
   established. Portal/Admin get this for free even before either ships a visible toggle. */
:root[data-theme="dark"] {
  --fc-bg: #0b0d13; --fc-surface: #12141c; --fc-surface-raised: #161925; --fc-surface-sunken: #0e1017;
  --fc-border: #262a3a; --fc-border-strong: #363c52;
  --fc-text: #e8e9f2; --fc-text-muted: #9a9fb4; --fc-text-faint: #6d7288; --fc-text-on-accent: #0b0d13;
  --fc-primary: #6d87ff; --fc-primary-strong: #8a9fff; --fc-primary-soft: #1a2140;
  --fc-accent: #3fd6c4; --fc-accent-soft: #103330;
  --fc-success: #4fd695; --fc-success-soft: #103828; --fc-warning: #f0b350; --fc-warning-soft: #3a2c0f;
  --fc-danger: #ef8090; --fc-danger-soft: #3a1720; --fc-info: #8fb4ef; --fc-info-soft: #182338;
  --fc-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --fc-shadow-md: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.4);
  --fc-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.35), 0 16px 40px rgba(0, 0, 0, 0.5);
  --fc-hover-overlay: rgba(255, 255, 255, 0.06);
  --fc-active-overlay: rgba(255, 255, 255, 0.1);
}

:root[data-theme="light"] {
  --fc-bg: #f5f6fa; --fc-surface: #ffffff; --fc-surface-raised: #ffffff; --fc-surface-sunken: #eef0f5;
  --fc-border: #e1e3ea; --fc-border-strong: #c7cbd8;
  --fc-text: #14161f; --fc-text-muted: #565b6b; --fc-text-faint: #8a8fa3; --fc-text-on-accent: #ffffff;
  --fc-primary: #2b4fe0; --fc-primary-strong: #1d3bc4; --fc-primary-soft: #eaefff;
  --fc-accent: #0f9d8f; --fc-accent-soft: #e3f6f3;
  --fc-success: #1a8f5a; --fc-success-soft: #e5f6ee; --fc-warning: #a15a06; --fc-warning-soft: #fdf1dc;
  --fc-danger: #c22b3f; --fc-danger-soft: #fbe9ec; --fc-info: #2b6cb0; --fc-info-soft: #e8f0fb;
  --fc-shadow-sm: 0 1px 2px rgba(20, 22, 31, 0.05);
  --fc-shadow-md: 0 1px 2px rgba(20, 22, 31, 0.04), 0 8px 24px rgba(20, 22, 31, 0.07);
  --fc-shadow-lg: 0 4px 8px rgba(20, 22, 31, 0.05), 0 16px 40px rgba(20, 22, 31, 0.1);
  --fc-hover-overlay: rgba(20, 22, 31, 0.04);
  --fc-active-overlay: rgba(20, 22, 31, 0.08);
}

@media (prefers-reduced-motion: reduce) {
  :root { --fc-transition-fast: 0ms; --fc-transition: 0ms; }
}