: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 */
  --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;

  --text-xs: .74rem;
  --text-sm: .88rem;
  --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;
}