/* ==========================================================================
   قبس (Qabas) — Design Tokens
   Three layers: primitive → semantic → component.
   Source of truth: CLAUDE.md §6, §7, §8, §10, §24, §28.
   Components must consume SEMANTIC / COMPONENT tokens only — never a raw hex
   or a primitive directly. Theme switching swaps the SEMANTIC layer only.
   ========================================================================== */

/* ---------- LAYER 1: PRIMITIVES (raw values, no meaning) ---------- */
:root {
  /* Oud brown ramp (hue ~28°) */
  --oud-50:#FAF4F0; --oud-100:#F2E5D9; --oud-200:#E8D0BA; --oud-300:#DAB390;
  --oud-400:#C9905E; --oud-500:#B0713B; --oud-600:#8E5B2F; --oud-700:#6B4524;
  --oud-800:#54361C; --oud-900:#3D2714; --oud-950:#2A1B0E;

  /* Ember gold ramp (hue ~36°) */
  --ember-50:#FBF6EE; --ember-100:#F4E6D2; --ember-200:#ECD2AC; --ember-300:#E1BA7F;
  --ember-400:#D6A151; --ember-500:#CF8F30; --ember-600:#B67E2B; --ember-700:#996A24;
  --ember-800:#7C561D; --ember-900:#5F4216; --ember-950:#422E10;

  /* Sage ramp (hue ~83°) */
  --sage-50:#F3F4F0; --sage-100:#E4E7DE; --sage-200:#CED4C4; --sage-300:#B4C0A0;
  --sage-400:#95A380; --sage-500:#7A8863; --sage-600:#657051; --sage-700:#525C42;
  --sage-800:#424A36; --sage-900:#323829; --sage-950:#22261C;

  /* Warm neutral gray ramp (hue ~30°) */
  --gray-50:#FAFAFA; --gray-100:#F6F5F4; --gray-200:#EAE8E6; --gray-300:#D9D6D3;
  --gray-400:#BDB8B3; --gray-500:#9B948C; --gray-600:#7E756D; --gray-700:#655E58;
  --gray-800:#4C4742; --gray-900:#37332F; --gray-950:#23211F;

  /* Warm surfaces */
  --paper:#F7F1E6; --paper-surface:#FFFDF8; --paper-surface-2:#FBF6EE;

  /* Fixed status hues (paired with icon+text everywhere) */
  --blue-500:#466FA4; --blue-700:#325985; --blue-50:#EDF2F8;
  --green-500:#39744D; --green-700:#2F6A3B; --green-50:#EAF6EC;
  --red-500:#C0492F;  --red-700:#A53827;  --red-50:#FBF0EE;
  --amber-700:#956718; --amber-50:#FBF5E9;

  /* Spacing scale (base 4px) */
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px;
  --space-16:64px; --space-24:96px;

  /* Radius */
  --radius-sm:6px; --radius-md:10px; --radius-lg:14px; --radius-xl:20px; --radius-pill:999px;

  /* Type scale */
  --fs-xs:0.75rem; --fs-sm:0.875rem; --fs-base:1rem; --fs-md:1.125rem; --fs-lg:1.25rem;
  --fs-xl:1.5rem; --fs-2xl:1.875rem; --fs-3xl:2.25rem; --fs-4xl:2.75rem;
  --lh-tight:1.25; --lh-ui:1.5; --lh-body:1.75;
  --font-display:"Aref Ruqaa","Amiri","Scheherazade New",serif;
  --font-display-en:"Lora",Georgia,"Times New Roman",serif;
  --font-body:"Cairo","Tajawal","Segoe UI",system-ui,sans-serif;
  --logo-chip:#F4EDDF; /* the illustration's ivory ground (fixed brand tone) */

  /* Motion */
  --dur-fast:140ms; --dur:220ms; --dur-slow:360ms;
  --ease-out:cubic-bezier(.16,.84,.44,1); --ease-in-out:cubic-bezier(.65,0,.35,1);

  /* Z-index */
  --z-header:100; --z-dropdown:200; --z-drawer:300; --z-dialog:400; --z-toast:500;
}

/* ---------- LAYER 2: SEMANTIC (named by role) — LIGHT THEME ---------- */
:root, [data-theme="light"] {
  --color-bg: var(--paper);
  --color-surface: var(--paper-surface);
  --color-surface-2: var(--paper-surface-2);
  --color-surface-sunken: var(--oud-50);
  --color-border: #E8DFCF;
  --color-border-strong: var(--oud-200);

  --color-text: #2E2420;
  --color-text-muted: #5B4F45;
  --color-text-faint: var(--gray-600);
  --color-on-primary: #FFFFFF;
  --color-on-accent: #FFFFFF;

  --color-action-primary: var(--oud-700);
  --color-action-primary-hover: var(--oud-800);
  --color-action-primary-active: var(--oud-900);

  --color-accent: var(--ember-700);        /* solid fills w/ white text (4.7:1) */
  --color-accent-hover: var(--ember-800);
  --color-accent-graphic: var(--ember-600); /* icons / borders / star fills (>=3:1) */
  --color-accent-soft: var(--ember-100);

  --color-link: var(--oud-700);
  --color-focus: var(--oud-600);

  /* Reading statuses */
  --color-reading: var(--ember-700);    --color-reading-bg: var(--ember-100);   --color-reading-fg: var(--ember-900);
  --color-want: var(--blue-500);        --color-want-bg: var(--blue-50);        --color-want-fg: var(--blue-700);
  --color-finished: var(--green-500);   --color-finished-bg: var(--green-50);   --color-finished-fg: var(--green-700);

  /* Feedback */
  --color-success: var(--green-700); --color-success-bg: var(--green-50);
  --color-warning: var(--amber-700); --color-warning-bg: var(--amber-50);
  --color-error: var(--red-700);     --color-error-bg: var(--red-50);
  --color-info: var(--blue-700);     --color-info-bg: var(--blue-50);

  --shadow-sm: 0 1px 2px rgba(58,39,20,.08), 0 1px 3px rgba(58,39,20,.06);
  --shadow-md: 0 4px 10px rgba(58,39,20,.10), 0 2px 4px rgba(58,39,20,.06);
  --shadow-lg: 0 16px 40px rgba(42,27,14,.18), 0 4px 12px rgba(42,27,14,.10);
  --overlay: rgba(42,27,14,.44);

  color-scheme: light;
}

/* ---------- LAYER 2: SEMANTIC — DARK THEME (warm espresso) ---------- */
[data-theme="dark"] {
  --color-bg:#1A1512;
  --color-surface:#241D18;
  --color-surface-2:#2E251F;
  --color-surface-sunken:#15100D;
  --color-border:#3A2F27;
  --color-border-strong:#4C3D31;

  --color-text:#EFE7DA;
  --color-text-muted:#B8AA99;
  --color-text-faint:#8C8074;
  --color-on-primary:#1A1512;
  --color-on-accent:#1A1512;

  --color-action-primary: var(--oud-300);       /* light button on dark (9.3:1) */
  --color-action-primary-hover: var(--oud-200);
  --color-action-primary-active: var(--oud-100);

  --color-accent: var(--ember-400);              /* dark text on it (7.8:1) */
  --color-accent-hover: var(--ember-300);
  --color-accent-graphic: var(--ember-400);
  --color-accent-soft: rgba(214,161,81,.16);

  --color-link: var(--oud-300);
  --color-focus: var(--ember-400);

  --color-reading: var(--ember-400);   --color-reading-bg: rgba(214,161,81,.16);  --color-reading-fg: var(--ember-300);
  --color-want: #8FB0DA;               --color-want-bg: rgba(143,176,218,.16);    --color-want-fg: #B9D0EC;
  --color-finished: #7FC095;           --color-finished-bg: rgba(127,192,149,.15);--color-finished-fg: #A7D6B6;

  --color-success:#7FC095; --color-success-bg:rgba(127,192,149,.14);
  --color-warning: var(--ember-300); --color-warning-bg:rgba(225,186,127,.14);
  --color-error:#E88B77; --color-error-bg:rgba(232,139,119,.14);
  --color-info:#8FB0DA; --color-info-bg:rgba(143,176,218,.14);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.40);
  --shadow-md: 0 4px 12px rgba(0,0,0,.45);
  --shadow-lg: 0 18px 44px rgba(0,0,0,.55), 0 6px 14px rgba(0,0,0,.4);
  --overlay: rgba(0,0,0,.62);

  color-scheme: dark;
}

/* ---------- LAYER 3: COMPONENT (named by slot, ref semantic only) ---------- */
:root {
  --btn-primary-bg: var(--color-action-primary);
  --btn-primary-bg-hover: var(--color-action-primary-hover);
  --btn-primary-fg: var(--color-on-primary);
  --btn-accent-bg: var(--color-accent);
  --btn-accent-bg-hover: var(--color-accent-hover);
  --btn-accent-fg: var(--color-on-accent);
  --btn-secondary-border: var(--color-border-strong);
  --btn-secondary-fg: var(--color-text);
  --btn-danger-bg: var(--color-error);
  --btn-danger-fg: #FFFFFF;

  --card-bg: var(--color-surface);
  --card-border: var(--color-border);
  --card-shadow: var(--shadow-sm);
  --card-shadow-hover: var(--shadow-md);
  --card-radius: var(--radius-lg);

  --input-bg: var(--color-surface-2);
  --input-border: var(--color-border-strong);
  --input-fg: var(--color-text);
  --input-placeholder: var(--color-text-faint);
  --input-focus-ring: var(--color-focus);

  --badge-radius: var(--radius-pill);
  --rating-star: var(--color-accent-graphic);
  --rating-star-empty: var(--color-border-strong);

  --nav-active-fg: var(--color-action-primary);
  --nav-active-bg: var(--color-accent-soft);

  --header-bg: color-mix(in srgb, var(--color-bg) 86%, transparent);
  --focus-ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-focus);
}
[data-theme="dark"] { --nav-active-fg: var(--oud-200); }