:root,
:root[data-theme="blue"] {
  color-scheme: light;

  /* Semantic surfaces */
  --surface-canvas: #f3f7fb;
  --surface-raised: #ffffff;
  --surface-muted: #eaf1f7;
  --surface-soft: #f8fbfd;
  --surface-inverse: #0b3557;

  /* Semantic text */
  --text-primary: #15232d;
  --text-secondary: #344958;
  --text-muted: #6c7c87;
  --text-inverse: #f7fbfd;

  /* Borders */
  --border-subtle: #d7e2e9;
  --border-strong: #9fb3c1;

  /* Brand / editorial accents */
  --accent: #176b9b;
  --accent-hover: #0f557e;
  --accent-soft: #dcecf6;
  --accent-secondary: #0f7a70;
  --signal: #c99122;
  --footer-bg: #0d3553;
  --footer-text: rgba(255,255,255,.88);
  --footer-muted: rgba(255,255,255,.64);

  /* Status */
  --success: #21845a;
  --warning: #a96f16;
  --danger: #b64747;

  /* Elevation */
  --shadow-color: 20 45 64;
  --shadow-1: 0 1px 2px rgb(var(--shadow-color) / .07), 0 4px 12px rgb(var(--shadow-color) / .04);
  --shadow-2: 0 10px 28px rgb(var(--shadow-color) / .10), 0 2px 6px rgb(var(--shadow-color) / .05);
  --shadow-3: 0 20px 56px rgb(var(--shadow-color) / .14), 0 4px 14px rgb(var(--shadow-color) / .07);
  --shadow-focus: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent);

  /* Backwards-compatible aliases */
  --paper-0: var(--surface-canvas);
  --paper-1: var(--surface-raised);
  --paper-2: var(--surface-muted);
  --ink-0: var(--text-primary);
  --ink-1: var(--text-secondary);
  --ink-2: var(--text-muted);
  --line: var(--border-subtle);
  --brand-oxide: var(--accent);
  --brand-nile: var(--accent-secondary);
  --brand-signal: var(--signal);
  --brand-deep: var(--footer-bg);

  /* Typography — Fonts V1
     Role-based scale. Components should consume these semantic tokens instead
     of inventing isolated font sizes/weights. */
  --font-ui: "Alexandria", "Segoe UI", Tahoma, Arial, sans-serif;
  --font-editorial-ar: "Noto Naskh Arabic", "Traditional Arabic", serif;
  --font-editorial-en: Georgia, "Times New Roman", serif;
  --font-mono: "Cascadia Code", Consolas, "SFMono-Regular", monospace;

  /* Weight ladder */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* Line-height ladder */
  --lh-meta: 1.35;
  --lh-tight: 1.22;
  --lh-title: 1.38;
  --lh-story: 1.48;
  --lh-body: 1.72;

  /* Core type scale */
  --fs-caption: .6875rem; /* 11px */
  --fs-meta: .75rem;      /* 12px */
  --fs-label: .8125rem;   /* 13px */
  --fs-body-sm: .875rem;  /* 14px */
  --fs-body: .9375rem;    /* 15px */
  --fs-story-sm: .96875rem; /* 15.5px */
  --fs-story: 1.0625rem;    /* 17px */
  --fs-section: 1.25rem;    /* 20px */
  --fs-card-lead: clamp(1.22rem, 1.7vw, 1.58rem);
  --fs-section-lead: clamp(1.55rem, 2.3vw, 2.15rem);
  --fs-home-lead: clamp(2rem, 3.1vw, 2.85rem);

  /* Homepage / news roles */
  --fs-sidebar-heading: 1.0625rem;
  --fs-sidebar-story: .9375rem;
  --fs-rank: .75rem;
  --fs-story-meta: .71875rem;
  --fs-section-label: .71875rem;

  /* Backwards-compatible legacy scale */
  --text-xs: var(--fs-meta);
  --text-sm: var(--fs-body-sm);
  --text-md: 1rem;
  --text-lg: 1.18rem;
  --text-xl: clamp(1.42rem, 2vw, 1.95rem);
  --text-2xl: clamp(2.1rem, 4.7vw, 4.8rem);
  --text-display: clamp(3.4rem, 10vw, 9rem);

  /* Radius */
  --radius-xs: 5px;
  --radius-sm: 9px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* Spacing */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 7rem;

  /* Motion */
  --motion-instant: 70ms;
  --motion-fast: 110ms;
  --motion-normal: 160ms;
  --motion-moderate: 240ms;
  --motion-slow: 400ms;
  --ease-productive: cubic-bezier(.2, 0, .38, .9);
  --ease-enter: cubic-bezier(0, 0, .38, .9);
  --ease-exit: cubic-bezier(.2, 0, 1, .9);
  --ease-expressive: cubic-bezier(.4, .14, .3, 1);
  --ease-out: var(--ease-productive);
  --ease-snap: cubic-bezier(.2, .8, .2, 1);

  --content-max: 1320px;
  --reading-max: 760px;
}

:root[data-theme="light"] {
  color-scheme: light;
  --surface-canvas: #f7f7f5;
  --surface-raised: #ffffff;
  --surface-muted: #ececea;
  --surface-soft: #fbfbf9;
  --surface-inverse: #232629;
  --text-primary: #181b1e;
  --text-secondary: #3f4549;
  --text-muted: #737a7f;
  --text-inverse: #ffffff;
  --border-subtle: #dedfdd;
  --border-strong: #aeb3b5;
  --accent: #285f7a;
  --accent-hover: #174a63;
  --accent-soft: #e1edf2;
  --accent-secondary: #526b62;
  --signal: #ba861f;
  --footer-bg: #23282c;
  --shadow-color: 26 31 35;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-canvas: #0d1317;
  --surface-raised: #151d22;
  --surface-muted: #202a31;
  --surface-soft: #11191e;
  --surface-inverse: #f3f7f8;
  --text-primary: #f3f6f7;
  --text-secondary: #d4dde2;
  --text-muted: #9aaab4;
  --text-inverse: #10161a;
  --border-subtle: #34424b;
  --border-strong: #53646e;
  --accent: #67b2dc;
  --accent-hover: #8ac8e8;
  --accent-soft: #17384a;
  --accent-secondary: #62baa9;
  --signal: #dfb44d;
  --footer-bg: #080d11;
  --footer-text: rgba(255,255,255,.90);
  --footer-muted: rgba(255,255,255,.62);
  --success: #68ba8c;
  --warning: #d9ae5a;
  --danger: #df7b78;
  --shadow-color: 0 0 0;
  --shadow-1: 0 1px 2px rgb(0 0 0 / .34), 0 5px 14px rgb(0 0 0 / .18);
  --shadow-2: 0 12px 32px rgb(0 0 0 / .36), 0 2px 8px rgb(0 0 0 / .22);
  --shadow-3: 0 24px 64px rgb(0 0 0 / .46), 0 4px 16px rgb(0 0 0 / .24);
}

:root[data-theme="green"] {
  color-scheme: light;
  --surface-canvas: #f3f7f4;
  --surface-raised: #ffffff;
  --surface-muted: #e8f0eb;
  --surface-soft: #f8fbf8;
  --surface-inverse: #173d34;
  --text-primary: #17251f;
  --text-secondary: #385147;
  --text-muted: #708078;
  --text-inverse: #f7fbf8;
  --border-subtle: #d6e2da;
  --border-strong: #9cb4a7;
  --accent: #17705d;
  --accent-hover: #105a4b;
  --accent-soft: #dceee7;
  --accent-secondary: #497665;
  --signal: #b98620;
  --footer-bg: #173f35;
  --shadow-color: 24 62 51;
}

:root[data-theme="red"] {
  color-scheme: light;
  --surface-canvas: #faf5f4;
  --surface-raised: #ffffff;
  --surface-muted: #f2e8e6;
  --surface-soft: #fdf9f8;
  --surface-inverse: #5d2a30;
  --text-primary: #2b1d1f;
  --text-secondary: #584346;
  --text-muted: #867477;
  --text-inverse: #fffafa;
  --border-subtle: #ead8d5;
  --border-strong: #c4a5a2;
  --accent: #a64043;
  --accent-hover: #873136;
  --accent-soft: #f4dddd;
  --accent-secondary: #7a5657;
  --signal: #b78320;
  --footer-bg: #622e34;
  --shadow-color: 83 35 41;
}


/* Fonts V1 responsive scale */
@media (max-width: 620px) {
  :root {
    --fs-body: .9375rem;
    --fs-story-sm: .9375rem;
    --fs-story: 1.03125rem;
    --fs-section: 1.1875rem;
    --fs-card-lead: clamp(1.2rem, 5.8vw, 1.5rem);
    --fs-section-lead: clamp(1.45rem, 6.7vw, 1.85rem);
    --fs-home-lead: clamp(1.9rem, 8.8vw, 2.35rem);
    --fs-sidebar-heading: 1rem;
    --fs-sidebar-story: .9375rem;
    --fs-rank: .75rem;
    --fs-story-meta: .71875rem;
  }
}


/* Fonts V1 — Article reading roles */
:root{
  --fs-article-title:clamp(2.15rem,3.5vw,3.55rem);
  --fs-article-dek:1.05rem;
  --fs-article-body:1.15rem;
  --fs-article-block-title:1.35rem;
  --fs-article-meta:.75rem;
  --fs-article-sidebar-title:1rem;
  --fs-article-discovery-title:clamp(1.5rem,2.4vw,2rem);
}
@media(max-width:620px){
  :root{
    --fs-article-title:clamp(2rem,9.2vw,2.55rem);
    --fs-article-dek:1rem;
    --fs-article-body:1.08rem;
    --fs-article-block-title:1.22rem;
    --fs-article-sidebar-title:1rem;
    --fs-article-discovery-title:1.55rem;
  }
}


/* ==========================================================================
   Color System V1 — semantic editorial roles
   Components must consume these roles instead of brand-* colors directly.
   Theme palettes change the base semantic tokens; these roles stay stable.
   ========================================================================== */
:root{
  /* Page and neutral surfaces */
  --editorial-page-bg:var(--surface-canvas);
  --editorial-surface:var(--surface-raised);
  --editorial-surface-soft:var(--surface-soft);
  --editorial-surface-muted:var(--surface-muted);

  /* Text hierarchy */
  --editorial-title:var(--text-primary);
  --editorial-body:var(--text-secondary);
  --editorial-meta:var(--text-muted);
  --editorial-on-inverse:var(--text-inverse);

  /* Rules and accents */
  --editorial-rule:var(--border-subtle);
  --editorial-rule-strong:var(--border-strong);
  --editorial-accent:var(--accent);
  --editorial-accent-hover:var(--accent-hover);
  --editorial-accent-soft:var(--accent-soft);
  --editorial-secondary-accent:var(--accent-secondary);
  --editorial-highlight:var(--signal);

  /* Cards */
  --editorial-card-bg:var(--surface-raised);
  --editorial-card-title:var(--text-primary);
  --editorial-card-text:var(--text-secondary);
  --editorial-card-meta:var(--text-muted);
  --editorial-card-border:var(--border-subtle);

  /* Sidebar / ranking */
  --editorial-sidebar-bg:var(--surface-raised);
  --editorial-sidebar-title:var(--accent);
  --editorial-sidebar-text:var(--text-primary);
  --editorial-rank:var(--accent);
  --editorial-rank-bg:var(--surface-soft);

  /* Emphasis section: visible hierarchy without a harsh inverse block. */
  --editorial-emphasis-bg:color-mix(in srgb,var(--accent-soft) 48%,var(--surface-raised));
  --editorial-emphasis-card-bg:color-mix(in srgb,var(--accent-soft) 30%,var(--surface-raised));
  --editorial-emphasis-title:var(--text-primary);
  --editorial-emphasis-text:var(--text-secondary);
  --editorial-emphasis-meta:var(--text-muted);
  --editorial-emphasis-border:color-mix(in srgb,var(--accent) 38%,var(--border-subtle));
  --editorial-emphasis-decoration:color-mix(in srgb,var(--accent) 28%,transparent);

  /* True inverse surfaces are reserved for footer/modal/intentional contrast. */
  --editorial-inverse-bg:var(--surface-inverse);
  --editorial-inverse-title:var(--text-inverse);
  --editorial-inverse-text:var(--text-inverse);

  /* Controls */
  --editorial-active-bg:var(--accent);
  --editorial-active-border:var(--accent);
  --editorial-active-text:#fff;
  --editorial-control-bg:var(--surface-raised);
  --editorial-control-text:var(--text-secondary);
  --editorial-control-border:var(--border-subtle);
  --editorial-focus-ring:var(--shadow-focus);

  /* Links and status */
  --editorial-link:var(--accent);
  --editorial-link-hover:var(--accent-hover);
  --editorial-success:var(--success);
  --editorial-warning:var(--warning);
  --editorial-danger:var(--danger);
}

/* Active accent is light in Dark Theme, so dark foreground is required. */
:root[data-theme="dark"]{
  --editorial-active-text:#0d1317;
}


/* Color System V1 — component-level aliases. */
:root{
  --editorial-hero-bg:transparent;
  --editorial-hero-title:var(--editorial-title);
  --editorial-hero-dek:var(--editorial-body);
  --editorial-section-bg:transparent;
  --editorial-section-title:var(--editorial-title);
  --editorial-section-label:var(--editorial-accent);
  --editorial-section-rule:var(--editorial-rule-strong);
  --editorial-section-rule-accent:var(--editorial-accent);
  --editorial-sidebar-border:var(--editorial-card-border);
  --editorial-control-hover-border:var(--editorial-accent);
  --editorial-control-hover-text:var(--editorial-accent);
}

/* Explicit theme contracts for emphasis surfaces and active controls. */
:root[data-theme="blue"]{
  --editorial-emphasis-bg:#e7f1f7;
  --editorial-emphasis-card-bg:#f4f8fb;
  --editorial-emphasis-border:#9fc7dc;
  --editorial-active-text:#ffffff;
}
:root[data-theme="light"]{
  --editorial-emphasis-bg:#edf2f4;
  --editorial-emphasis-card-bg:#f7f9fa;
  --editorial-emphasis-border:#b8cbd4;
  --editorial-active-text:#ffffff;
}
:root[data-theme="dark"]{
  --editorial-emphasis-bg:#15242c;
  --editorial-emphasis-card-bg:#1a2c35;
  --editorial-emphasis-border:#3f697d;
  --editorial-active-text:#0d1317;
}
:root[data-theme="green"]{
  --editorial-emphasis-bg:#e3efe9;
  --editorial-emphasis-card-bg:#f1f7f3;
  --editorial-emphasis-border:#a4c7b7;
  --editorial-active-text:#ffffff;
}
:root[data-theme="red"]{
  --editorial-emphasis-bg:#f6e7e6;
  --editorial-emphasis-card-bg:#fbf2f1;
  --editorial-emphasis-border:#d8aaa8;
  --editorial-active-text:#ffffff;
}