/* ============================================================
   STRUCTURAL TOKENS — shared across all themes and modes
   ============================================================ */
:root {
  --ui-font-sans: "IBM Plex Sans Arabic", sans-serif;

  --space-2: 0.125rem;
  --space-4: 0.25rem;
  --space-8: 0.5rem;
  --space-12: 0.75rem;
  --space-16: 1rem;
  --space-20: 1.25rem;
  --space-24: 1.5rem;
  --space-32: 2rem;
  --space-40: 2.5rem;
  --space-48: 3rem;

  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-full: 999px;

  --border-width-default: 1px;
  --border-width-strong: 2px;

  --motion-fast: 140ms;
  --motion-normal: 200ms;
  --easing-standard: ease;

  --text-display-lg-size: 2.5rem;
  --text-display-lg-line: 3rem;
  --text-display-md-size: 2rem;
  --text-display-md-line: 2.5rem;
  --text-heading-xl-size: 1.75rem;
  --text-heading-xl-line: 2.25rem;
  --text-heading-lg-size: 1.5rem;
  --text-heading-lg-line: 2rem;
  --text-heading-md-size: 1.25rem;
  --text-heading-md-line: 1.75rem;
  --text-body-lg-size: 1.125rem;
  --text-body-lg-line: 1.75rem;
  --text-body-md-size: 1rem;
  --text-body-md-line: 1.5rem;
  --text-body-sm-size: 0.875rem;
  --text-body-sm-line: 1.25rem;
  --text-caption-size: 0.75rem;
  --text-caption-line: 1rem;
  --text-label-size: 0.875rem;
  --text-label-line: 1.25rem;
  --text-code-size: 0.8125rem;
  --text-code-line: 1.125rem;
}

/* ============================================================
   COBALT — default theme (primary: #1e50a2 · secondary: #4a7ec7)
   ============================================================ */
:root,
[data-theme="cobalt"][data-mode="light"] {
  color-scheme: light;

  --color-bg-canvas: #f4f6fa;
  --color-bg-subtle: #ecf0f7;
  --color-surface-default: #ffffff;
  --color-surface-raised: #ffffff;
  --color-surface-overlay: #ffffff;

  --color-text-primary: #0e1626;
  --color-text-secondary: #4a5669;
  --color-text-tertiary: #7a8899;
  --color-text-inverse: #ffffff;
  --color-text-disabled: #aab4c4;

  --color-border-subtle: #dde3ee;
  --color-border-default: #c4cede;
  --color-border-strong: #96a4bc;
  --color-border-focus: #3a70c9;

  --color-icon-primary: #0e1626;
  --color-icon-secondary: #4a5669;
  --color-icon-inverse: #ffffff;

  --color-action-primary-bg: #1e50a2;
  --color-action-primary-bg-hover: #173e82;
  --color-action-primary-text: #ffffff;

  --color-action-secondary-bg: #e6edf8;
  --color-action-secondary-bg-hover: #d8e6f4;
  --color-action-secondary-text: #4a7ec7;

  --color-feedback-success-bg: #e3f2ea;
  --color-feedback-success-text: #1f7a4d;
  --color-feedback-success-border: #8ec9a8;

  --color-feedback-warning-bg: #fbf0d6;
  --color-feedback-warning-text: #8a5a00;
  --color-feedback-warning-border: #d4aa64;

  --color-feedback-danger-bg: #fbe6e2;
  --color-feedback-danger-text: #a8311f;
  --color-feedback-danger-border: #d48070;

  --color-focus-ring: #7aaee0;
  --color-overlay-scrim: rgba(14, 22, 38, 0.48);

  --shadow-raised: 0 18px 42px -24px rgba(14, 22, 38, 0.20);
  --shadow-overlay: 0 28px 70px -34px rgba(14, 22, 38, 0.36);
}

[data-theme="cobalt"][data-mode="dark"] {
  color-scheme: dark;

  --color-bg-canvas: #0b0f17;
  --color-bg-subtle: #090e14;
  --color-surface-default: #111825;
  --color-surface-raised: #18212e;
  --color-surface-overlay: #1e2a38;

  --color-text-primary: #e4eaf2;
  --color-text-secondary: #94a0b1;
  --color-text-tertiary: #68778a;
  --color-text-inverse: #ffffff;
  --color-text-disabled: #4a5768;

  --color-border-subtle: #1e2a3a;
  --color-border-default: #2e3f54;
  --color-border-strong: #45607a;
  --color-border-focus: #5e8fd4;

  --color-icon-primary: #d8e2ee;
  --color-icon-secondary: #94a0b1;
  --color-icon-inverse: #ffffff;

  --color-action-primary-bg: #7aaee0;
  --color-action-primary-bg-hover: #92bfe8;
  --color-action-primary-text: #060d18;

  --color-action-secondary-bg: #162235;
  --color-action-secondary-bg-hover: #1e2e45;
  --color-action-secondary-text: #7aaee0;

  --color-feedback-success-bg: #16291f;
  --color-feedback-success-text: #6dcf9b;
  --color-feedback-success-border: #2a6040;

  --color-feedback-warning-bg: #2c2415;
  --color-feedback-warning-text: #e3b366;
  --color-feedback-warning-border: #6a5420;

  --color-feedback-danger-bg: #2e1a17;
  --color-feedback-danger-text: #e88477;
  --color-feedback-danger-border: #6e3428;

  --color-focus-ring: #4a7bba;
  --color-overlay-scrim: rgba(11, 15, 23, 0.72);

  --shadow-raised: 0 18px 42px -24px rgba(7, 12, 22, 0.60);
  --shadow-overlay: 0 32px 78px -36px rgba(7, 12, 22, 0.80);
}

/* ============================================================
   FOREST — primary: #2d6a4f · secondary: #5a9e7a
   ============================================================ */
[data-theme="forest"][data-mode="light"] {
  color-scheme: light;

  --color-bg-canvas: #f4f7f5;
  --color-bg-subtle: #ecf1ee;
  --color-surface-default: #ffffff;
  --color-surface-raised: #ffffff;
  --color-surface-overlay: #ffffff;

  --color-text-primary: #0f1f16;
  --color-text-secondary: #4a5f53;
  --color-text-tertiary: #7a9184;
  --color-text-inverse: #ffffff;
  --color-text-disabled: #a8bdb5;

  --color-border-subtle: #d9e6df;
  --color-border-default: #bdd0c6;
  --color-border-strong: #8caa9a;
  --color-border-focus: #2d6a4f;

  --color-icon-primary: #0f1f16;
  --color-icon-secondary: #4a5f53;
  --color-icon-inverse: #ffffff;

  --color-action-primary-bg: #2d6a4f;
  --color-action-primary-bg-hover: #245840;
  --color-action-primary-text: #ffffff;

  --color-action-secondary-bg: #daeee3;
  --color-action-secondary-bg-hover: #cce6d8;
  --color-action-secondary-text: #5a9e7a;

  --color-feedback-success-bg: #e3f2ea;
  --color-feedback-success-text: #1f7a4d;
  --color-feedback-success-border: #8ec9a8;

  --color-feedback-warning-bg: #fbf0d6;
  --color-feedback-warning-text: #8a5a00;
  --color-feedback-warning-border: #d4aa64;

  --color-feedback-danger-bg: #fbe6e2;
  --color-feedback-danger-text: #a8311f;
  --color-feedback-danger-border: #d48070;

  --color-focus-ring: #8cc4a7;
  --color-overlay-scrim: rgba(15, 31, 22, 0.48);

  --shadow-raised: 0 18px 42px -24px rgba(15, 31, 22, 0.20);
  --shadow-overlay: 0 28px 70px -34px rgba(15, 31, 22, 0.36);
}

[data-theme="forest"][data-mode="dark"] {
  color-scheme: dark;

  --color-bg-canvas: #090f0b;
  --color-bg-subtle: #070d09;
  --color-surface-default: #101a12;
  --color-surface-raised: #162019;
  --color-surface-overlay: #1b2820;

  --color-text-primary: #ddeee6;
  --color-text-secondary: #8aaa97;
  --color-text-tertiary: #5c7a6a;
  --color-text-inverse: #ffffff;
  --color-text-disabled: #3d5c4c;

  --color-border-subtle: #182e21;
  --color-border-default: #264038;
  --color-border-strong: #3d6050;
  --color-border-focus: #5aa882;

  --color-icon-primary: #d0e8db;
  --color-icon-secondary: #8aaa97;
  --color-icon-inverse: #ffffff;

  --color-action-primary-bg: #6cbf9c;
  --color-action-primary-bg-hover: #82cba8;
  --color-action-primary-text: #050e08;

  --color-action-secondary-bg: #122a1c;
  --color-action-secondary-bg-hover: #1a3826;
  --color-action-secondary-text: #6cbf9c;

  --color-feedback-success-bg: #16291f;
  --color-feedback-success-text: #6dcf9b;
  --color-feedback-success-border: #2a6040;

  --color-feedback-warning-bg: #2c2415;
  --color-feedback-warning-text: #e3b366;
  --color-feedback-warning-border: #6a5420;

  --color-feedback-danger-bg: #2e1a17;
  --color-feedback-danger-text: #e88477;
  --color-feedback-danger-border: #6e3428;

  --color-focus-ring: #3d9268;
  --color-overlay-scrim: rgba(9, 15, 11, 0.72);

  --shadow-raised: 0 18px 42px -24px rgba(5, 12, 8, 0.60);
  --shadow-overlay: 0 32px 78px -36px rgba(5, 12, 8, 0.80);
}

/* ============================================================
   EMBER — primary: #9c3722 · secondary: #c4714a
   ============================================================ */
[data-theme="ember"][data-mode="light"] {
  color-scheme: light;

  --color-bg-canvas: #f8f4f1;
  --color-bg-subtle: #f2ece6;
  --color-surface-default: #ffffff;
  --color-surface-raised: #ffffff;
  --color-surface-overlay: #ffffff;

  --color-text-primary: #1f0f0a;
  --color-text-secondary: #63493e;
  --color-text-tertiary: #94786c;
  --color-text-inverse: #ffffff;
  --color-text-disabled: #c4a89c;

  --color-border-subtle: #e8dcd6;
  --color-border-default: #d4c2b8;
  --color-border-strong: #b09688;
  --color-border-focus: #9c3722;

  --color-icon-primary: #1f0f0a;
  --color-icon-secondary: #63493e;
  --color-icon-inverse: #ffffff;

  --color-action-primary-bg: #9c3722;
  --color-action-primary-bg-hover: #852e1c;
  --color-action-primary-text: #ffffff;

  --color-action-secondary-bg: #f5e0d4;
  --color-action-secondary-bg-hover: #ecd5c6;
  --color-action-secondary-text: #c4714a;

  --color-feedback-success-bg: #e3f2ea;
  --color-feedback-success-text: #1f7a4d;
  --color-feedback-success-border: #8ec9a8;

  --color-feedback-warning-bg: #fbf0d6;
  --color-feedback-warning-text: #8a5a00;
  --color-feedback-warning-border: #d4aa64;

  --color-feedback-danger-bg: #fbe6e2;
  --color-feedback-danger-text: #a8311f;
  --color-feedback-danger-border: #d48070;

  --color-focus-ring: #d4917e;
  --color-overlay-scrim: rgba(31, 15, 10, 0.48);

  --shadow-raised: 0 18px 42px -24px rgba(31, 15, 10, 0.20);
  --shadow-overlay: 0 28px 70px -34px rgba(31, 15, 10, 0.36);
}

[data-theme="ember"][data-mode="dark"] {
  color-scheme: dark;

  --color-bg-canvas: #120704;
  --color-bg-subtle: #0f0603;
  --color-surface-default: #1c0e09;
  --color-surface-raised: #251510;
  --color-surface-overlay: #2e1c16;

  --color-text-primary: #f0e4dc;
  --color-text-secondary: #b09080;
  --color-text-tertiary: #7a6055;
  --color-text-inverse: #ffffff;
  --color-text-disabled: #5a3a30;

  --color-border-subtle: #321810;
  --color-border-default: #4a2819;
  --color-border-strong: #6a3d2e;
  --color-border-focus: #cf6e58;

  --color-icon-primary: #e8dbd2;
  --color-icon-secondary: #b09080;
  --color-icon-inverse: #ffffff;

  --color-action-primary-bg: #e08068;
  --color-action-primary-bg-hover: #e8907a;
  --color-action-primary-text: #100402;

  --color-action-secondary-bg: #2e1008;
  --color-action-secondary-bg-hover: #3a1810;
  --color-action-secondary-text: #e08068;

  --color-feedback-success-bg: #16291f;
  --color-feedback-success-text: #6dcf9b;
  --color-feedback-success-border: #2a6040;

  --color-feedback-warning-bg: #2c2415;
  --color-feedback-warning-text: #e3b366;
  --color-feedback-warning-border: #6a5420;

  --color-feedback-danger-bg: #2e1a17;
  --color-feedback-danger-text: #e88477;
  --color-feedback-danger-border: #6e3428;

  --color-focus-ring: #c06050;
  --color-overlay-scrim: rgba(18, 7, 4, 0.72);

  --shadow-raised: 0 18px 42px -24px rgba(14, 5, 2, 0.60);
  --shadow-overlay: 0 32px 78px -36px rgba(14, 5, 2, 0.80);
}

/* ============================================================
   VIOLET — primary: #5c3d8f · secondary: #8b66c4
   ============================================================ */
[data-theme="violet"][data-mode="light"] {
  color-scheme: light;

  --color-bg-canvas: #f6f4f9;
  --color-bg-subtle: #f0ecf6;
  --color-surface-default: #ffffff;
  --color-surface-raised: #ffffff;
  --color-surface-overlay: #ffffff;

  --color-text-primary: #150e22;
  --color-text-secondary: #524465;
  --color-text-tertiary: #8a7aa0;
  --color-text-inverse: #ffffff;
  --color-text-disabled: #c0b0d4;

  --color-border-subtle: #e4dcf0;
  --color-border-default: #cfc4e4;
  --color-border-strong: #a891c8;
  --color-border-focus: #5c3d8f;

  --color-icon-primary: #150e22;
  --color-icon-secondary: #524465;
  --color-icon-inverse: #ffffff;

  --color-action-primary-bg: #5c3d8f;
  --color-action-primary-bg-hover: #4c3178;
  --color-action-primary-text: #ffffff;

  --color-action-secondary-bg: #ede6f8;
  --color-action-secondary-bg-hover: #e4d8f4;
  --color-action-secondary-text: #8b66c4;

  --color-feedback-success-bg: #e3f2ea;
  --color-feedback-success-text: #1f7a4d;
  --color-feedback-success-border: #8ec9a8;

  --color-feedback-warning-bg: #fbf0d6;
  --color-feedback-warning-text: #8a5a00;
  --color-feedback-warning-border: #d4aa64;

  --color-feedback-danger-bg: #fbe6e2;
  --color-feedback-danger-text: #a8311f;
  --color-feedback-danger-border: #d48070;

  --color-focus-ring: #b09cd8;
  --color-overlay-scrim: rgba(21, 14, 34, 0.48);

  --shadow-raised: 0 18px 42px -24px rgba(21, 14, 34, 0.20);
  --shadow-overlay: 0 28px 70px -34px rgba(21, 14, 34, 0.36);
}

[data-theme="violet"][data-mode="dark"] {
  color-scheme: dark;

  --color-bg-canvas: #0e0915;
  --color-bg-subtle: #0b0712;
  --color-surface-default: #161020;
  --color-surface-raised: #1e1830;
  --color-surface-overlay: #262040;

  --color-text-primary: #e8e0f4;
  --color-text-secondary: #a898c4;
  --color-text-tertiary: #7a6a90;
  --color-text-inverse: #ffffff;
  --color-text-disabled: #4a3a60;

  --color-border-subtle: #241a38;
  --color-border-default: #362a50;
  --color-border-strong: #524070;
  --color-border-focus: #8a6cc8;

  --color-icon-primary: #e0d6f0;
  --color-icon-secondary: #a898c4;
  --color-icon-inverse: #ffffff;

  --color-action-primary-bg: #a98de0;
  --color-action-primary-bg-hover: #bc9ee8;
  --color-action-primary-text: #0e0918;

  --color-action-secondary-bg: #1e1438;
  --color-action-secondary-bg-hover: #281c48;
  --color-action-secondary-text: #a98de0;

  --color-feedback-success-bg: #16291f;
  --color-feedback-success-text: #6dcf9b;
  --color-feedback-success-border: #2a6040;

  --color-feedback-warning-bg: #2c2415;
  --color-feedback-warning-text: #e3b366;
  --color-feedback-warning-border: #6a5420;

  --color-feedback-danger-bg: #2e1a17;
  --color-feedback-danger-text: #e88477;
  --color-feedback-danger-border: #6e3428;

  --color-focus-ring: #7a52b0;
  --color-overlay-scrim: rgba(14, 9, 21, 0.72);

  --shadow-raised: 0 18px 42px -24px rgba(10, 6, 18, 0.60);
  --shadow-overlay: 0 32px 78px -36px rgba(10, 6, 18, 0.80);
}