/* Pre-emit critique: P5 H5 E5 S5 R5 V5 D5 */
/* ==========================================================================
   Qahera UI Kit — Design Tokens & Provençal Cezannian Palette
   Tokens Precede Styling (Invariant 2) & Thematic Topography (Invariant 10)
   ========================================================================== */

:root {
  /* Brand Color Palette: Provence Lavender & Light Blue Green */
  --bg: #F0EEF1;          /* LILAC: General ambient background */
  --surface: #D3DADA;     /* DOVE: Light blue-green / sage grey surfaces */
  --surface-card: #FFFFFF;/* COTTON: Pure white for cards & high legibility */
  --ink: #3E3842;          /* DUSK: Deep violet charcoal for high-contrast text */
  --muted: #7F6D8B;        /* HEATHER: Elegant muted slate violet */
  --line: #BAA7B9;         /* MAUVE: Delicate borders & separators */
  --cobalt: #7F6D8B;       /* HEATHER: Primary interactive accent */
  --cobalt-light: #BAA7B9; /* MAUVE: Soft interactive tint */
  --cobalt-dark: #3E3842;  /* DUSK: Deep button & section backgrounds */
  --ochre: #8D8B48;        /* GRASS: Deepened for text contrast */
  --grass: #C4C484;        /* GRASS: Herbaceous olive gold accent */
  --viri: #6C8279;         /* Sage Viridian: Harmonized with Dove */
  --gold: #C4C484;         /* GRASS: Badges & warm accents */
  --lavender: #F0E0F4;     /* LAVENDER: Micro-badges & hover glow */

  /* Qahera Compatibility Aliases */
  --qhr-bg: var(--bg);
  --qhr-surface: var(--surface);
  --qhr-surface-card: var(--surface-card);
  --qhr-ink: var(--ink);
  --qhr-muted: var(--muted);
  --qhr-line: var(--line);
  --qhr-cobalt: var(--cobalt);
  --qhr-cobalt-light: var(--cobalt-light);
  --qhr-cobalt-dark: var(--cobalt-dark);
  --qhr-ochre: var(--ochre);
  --qhr-ochre-light: var(--grass);
  --qhr-ochre-deep: #5E5B28;
  --qhr-viridian: var(--viri);
  --qhr-viridian-dark: #3E3842;
  --qhr-viridian-light: #D3DADA;
  --qhr-terracotta: #BAA7B9;

  /* Typography Scale (Brand Guideline: Playfair Display + Source Serif 4 for Latin; Aref Ruqaa + Alexandria for Arabic) */
  --qhr-font-ar-display: "Aref Ruqaa", Georgia, serif;
  --qhr-font-ar-body: "Alexandria", system-ui, sans-serif;
  --qhr-font-ar-lit: "Aref Ruqaa", Georgia, serif;
  
  --qhr-font-lat-display: "Playfair Display", "Iowan Old Style", Georgia, serif;
  --qhr-font-lat-body: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --qhr-font-lat-ui: "Alexandria", system-ui, sans-serif;

  /* Active typography defaults (LTR) */
  --f-display: var(--qhr-font-lat-display);
  --f-text: var(--qhr-font-lat-body);
  --qhr-font-display: var(--f-display);
  --qhr-font-body: var(--f-text);
  --qhr-font-ui: var(--f-text);

  --qhr-text-xs: 0.75rem;
  --qhr-text-sm: 0.875rem;
  --qhr-text-base: 1.0625rem;
  --qhr-text-lg: 1.25rem;
  --qhr-text-xl: 1.5rem;
  --qhr-text-2xl: 1.875rem;
  --qhr-text-3xl: 2.25rem;
  --qhr-text-4xl: 3rem;

  --qhr-leading-tight: 1.15;
  --qhr-leading-snug: 1.35;
  --qhr-leading-normal: 1.65;
  --qhr-leading-relaxed: 1.85;

  /* Spacing System */
  --qhr-space-1: 0.25rem;
  --qhr-space-2: 0.5rem;
  --qhr-space-3: 0.75rem;
  --qhr-space-4: 1rem;
  --qhr-space-6: 1.5rem;
  --qhr-space-8: 2rem;
  --qhr-space-12: 3rem;
  --qhr-space-16: 4rem;
  --qhr-space-24: 6rem;

  /* Structural Radii & Shadows */
  --qhr-radius-sm: 3px;
  --qhr-radius-md: 6px;
  --qhr-radius-lg: 12px;
  --qhr-radius-full: 9999px;

  --qhr-shadow-sm: 0 1px 3px rgba(62, 56, 66, 0.05);
  --qhr-shadow-md: 0 4px 12px rgba(62, 56, 66, 0.08);
  --qhr-shadow-lg: 0 12px 28px rgba(62, 56, 66, 0.12);

  --qhr-transition: 200ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Light Theme Mode (Lavender & Light Blue-Green) — Purely Color Tokens, Never Overrides Fonts */
:root[data-theme="light"],
html[data-theme="light"] {
  --bg: #F0EEF1;
  --surface: #D3DADA;
  --surface-card: #FFFFFF;
  --ink: #3E3842;
  --muted: #7F6D8B;
  --line: #BAA7B9;
  --cobalt: #7F6D8B;
  --cobalt-light: #BAA7B9;
  --cobalt-dark: #3E3842;
  --ochre: #8D8B48;
  --grass: #C4C484;
  --viri: #6C8279;
  --gold: #C4C484;
  --lavender: #F0E0F4;

  --qhr-bg: var(--bg);
  --qhr-surface: var(--surface);
  --qhr-surface-card: var(--surface-card);
  --qhr-ink: var(--ink);
  --qhr-muted: var(--muted);
  --qhr-line: var(--line);
  --qhr-cobalt: var(--cobalt);
  --qhr-cobalt-light: var(--cobalt-light);
  --qhr-cobalt-dark: var(--cobalt-dark);
  --qhr-ochre: var(--ochre);
  --qhr-ochre-light: var(--grass);
  --qhr-viridian: var(--viri);
}

/* Arabic RTL Typography Discipline (Invariant 5) — Strictly Immune to Theme Overrides */
:root:lang(ar),
html[lang="ar"],
html[dir="rtl"],
html[lang="ar"][data-theme],
html[dir="rtl"][data-theme],
:root[data-theme]:lang(ar) {
  --f-display: "Aref Ruqaa", Georgia, serif !important;
  --f-text: "Alexandria", system-ui, sans-serif !important;
  --qhr-font-display: "Aref Ruqaa", Georgia, serif !important;
  --qhr-font-body: "Alexandria", system-ui, sans-serif !important;
  --qhr-font-ui: "Alexandria", system-ui, sans-serif !important;
  --qhr-text-base: 1.05rem;
  --qhr-leading-normal: 1.85;
}

/* Dark Mode (Literary Ink) */
:root[data-theme="dark"] {
  --bg: #131A21;
  --surface: #1B2530;
  --surface-card: #222E3C;
  --ink: #E7EDF0;
  --muted: #9BAAB6;
  --line: #2C3945;
  --cobalt: #86AEDB;
  --ochre: #E0A94A;
  --viri: #7DB59F;
  --gold: #F6D68E;

  --qhr-bg: var(--bg);
  --qhr-surface: var(--surface);
  --qhr-surface-card: var(--surface-card);
  --qhr-ink: var(--ink);
  --qhr-muted: var(--muted);
  --qhr-line: var(--line);
  --qhr-ochre: var(--ochre);
  --qhr-ochre-light: var(--gold);
  --qhr-cobalt: var(--cobalt);
  --qhr-cobalt-light: #B4CEEB;
  --qhr-cobalt-dark: #476E9B;
  --qhr-viridian: var(--viri);
  --qhr-viridian-light: #A4D1BF;
  --qhr-terracotta: #D97E66;

  --qhr-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --qhr-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.4);
}

/* Sepia Manuscript Mode */
:root[data-theme="sepia"] {
  --bg: #F4EFE6;
  --surface: #E8E0D2;
  --surface-card: #FAF6EF;
  --ink: #2C2219;
  --muted: #6E5F52;
  --line: #D8CEBD;
  --ochre: #9A6318;
  --cobalt: #2D4C6E;
  --viri: #3D614E;
  --gold: #E5B452;

  --qhr-bg: var(--bg);
  --qhr-surface: var(--surface);
  --qhr-surface-card: var(--surface-card);
  --qhr-ink: var(--ink);
  --qhr-muted: var(--muted);
  --qhr-line: var(--line);
  --qhr-ochre: var(--ochre);
  --qhr-ochre-light: var(--gold);
  --qhr-cobalt: var(--cobalt);
  --qhr-viridian: var(--viri);
}