/* Capbon Immo — design tokens v1 (CSS custom properties)
   Load fonts first: <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600&family=IBM+Plex+Sans+Arabic:wght@400;500;600&family=Jost:wght@300;400;500&family=Noto+Kufi+Arabic:wght@400;500&display=swap">
   Light (ivory) is the default; put data-theme="dark" on <html> (night mode, set by js/boot.js) or on any section to switch it to noir.
   Arabic: set <html lang="ar" dir="rtl"> — :lang(ar) resets tracking/case and loosens leading. */

:root {
  /* raw palette */
  --noir-950: #080807;
  --noir-900: #0F0E0C;
  --noir-800: #1A1916;
  --noir-700: #2A2824;
  --noir-600: #423F39;
  --noir-500: #6A655D;
  --noir-400: #8E8679;
  --ivory-50: #FDFBF7;
  --ivory-100: #F7F3EC;
  --ivory-200: #EEE7DB;
  --ivory-300: #DED4C3;
  --ivory-400: #A8A092;
  --white: #FFFFFF;
  --gold-100: #F2EADB;
  --gold-300: #D3BC8E;
  --gold-500: #B8995F;
  --gold-700: #7A6235;
  --gold-900: #2A2418;
  --sea-100: #E2EEEC;
  --sea-300: #8CC5C0;
  --sea-700: #2C6461;
  --sea-900: #12262A;
  --clay-100: #F5E2DC;
  --clay-300: #E8927E;
  --clay-700: #A3392A;
  --clay-900: #2C1612;
  /* semantic — light (ivory) */
  --surface: var(--ivory-100);
  --surface-raised: var(--ivory-50);
  --surface-sunken: var(--ivory-200);
  --surface-inverse: var(--noir-900);
  --ink: var(--noir-900);
  --ink-soft: var(--noir-600);
  --ink-muted: var(--noir-500);
  --ink-inverse: var(--ivory-100);
  --line: var(--ivory-300);
  --line-strong: var(--noir-400);
  --accent: var(--gold-500);
  --accent-text: var(--gold-700);
  --accent-soft: var(--gold-100);
  --on-accent: var(--noir-900);
  --action: var(--noir-900);
  --action-hover: var(--noir-700);
  --on-action: var(--ivory-100);
  --success: var(--sea-700);
  --success-soft: var(--sea-100);
  --error: var(--clay-700);
  --error-soft: var(--clay-100);
  --focus: var(--gold-700);
  /* fonts */
  --font-heading: "Jost", "Noto Kufi Arabic", "Segoe UI", system-ui, sans-serif;
  --font-body: "Figtree", "IBM Plex Sans Arabic", "Segoe UI", system-ui, sans-serif;
  --font-arabic-heading: "Noto Kufi Arabic", "Jost", "Segoe UI", system-ui, sans-serif;
  --font-arabic-body: "IBM Plex Sans Arabic", "Figtree", "Segoe UI", system-ui, sans-serif;
  /* type scale — mobile first */
  --text-display: 2.5rem; --leading-display: 2.75rem; --tracking-display: 0.06em; --weight-display: 400; --case-display: uppercase;
  --text-h1: 2rem; --leading-h1: 2.375rem; --tracking-h1: 0.05em; --weight-h1: 400; --case-h1: uppercase;
  --text-h2: 1.625rem; --leading-h2: 2rem; --tracking-h2: 0.01em; --weight-h2: 400; --case-h2: none;
  --text-h3: 1.1875rem; --leading-h3: 1.625rem; --tracking-h3: 0.01em; --weight-h3: 500; --case-h3: none;
  --text-eyebrow: 0.75rem; --leading-eyebrow: 1rem; --tracking-eyebrow: 0.22em; --weight-eyebrow: 500; --case-eyebrow: uppercase;
  --text-price: 1.75rem; --leading-price: 2rem; --tracking-price: 0.02em; --weight-price: 400; --case-price: none;
  --text-button: 0.8125rem; --leading-button: 1rem; --tracking-button: 0.16em; --weight-button: 500; --case-button: uppercase;
  --text-lead: 1.125rem; --leading-lead: 1.75rem; --tracking-lead: 0; --weight-lead: 400; --case-lead: none;
  --text-body: 1rem; --leading-body: 1.625rem; --tracking-body: 0; --weight-body: 400; --case-body: none;
  --text-small: 0.875rem; --leading-small: 1.375rem; --tracking-small: 0; --weight-small: 400; --case-small: none;
  --text-caption: 0.75rem; --leading-caption: 1.125rem; --tracking-caption: 0.02em; --weight-caption: 500; --case-caption: none;
  /* spacing, radius, shadow */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --space-gutter: var(--space-4); --space-section: var(--space-16);
  --radius-none: 0;
  --radius-control: 2px;
  --radius-card: 4px;
  --radius-panel: 8px;
  --radius-arch: 9999px;
  --shadow-soft: 0 1px 2px #0f0e0c14, 0 2px 8px -2px #0f0e0c14;
  --shadow-float: 0 12px 32px -8px #0f0e0c33;
  --focus-ring: 0 0 0 2px #F7F3EC, 0 0 0 4px #7A6235;
  color-scheme: light;
}

[data-theme="dark"] {
  --surface: var(--noir-900);
  --surface-raised: var(--noir-800);
  --surface-sunken: var(--noir-950);
  --surface-inverse: var(--ivory-100);
  --ink: var(--ivory-100);
  --ink-soft: var(--ivory-300);
  --ink-muted: var(--ivory-400);
  --ink-inverse: var(--noir-900);
  --line: var(--noir-700);
  --line-strong: var(--noir-400);
  --accent: var(--gold-500);
  --accent-text: var(--gold-300);
  --accent-soft: var(--gold-900);
  --on-accent: var(--noir-900);
  --action: var(--gold-500);
  --action-hover: var(--gold-300);
  --on-action: var(--noir-900);
  --success: var(--sea-300);
  --success-soft: var(--sea-900);
  --error: var(--clay-300);
  --error-soft: var(--clay-900);
  --focus: var(--gold-300);
  --shadow-soft: 0 1px 2px #00000066, 0 2px 8px -2px #00000066;
  --shadow-float: 0 12px 32px -8px #000000b3;
  --focus-ring: 0 0 0 2px #0F0E0C, 0 0 0 4px #D3BC8E;
  color-scheme: dark;
}

@media (min-width: 1024px) {
  :root {
    --text-display: 4rem; --leading-display: 4.25rem;
    --text-h1: 3rem; --leading-h1: 3.5rem;
    --text-h2: 2.125rem; --leading-h2: 2.625rem;
    --text-h3: 1.375rem; --leading-h3: 1.875rem;
    --text-eyebrow: 0.8125rem; --leading-eyebrow: 1.125rem;
    --text-price: 2.25rem; --leading-price: 2.5rem;
    --text-button: 0.875rem; --leading-button: 1rem;
    --text-lead: 1.25rem; --leading-lead: 2rem;
    --text-body: 1.0625rem; --leading-body: 1.75rem;
    --text-small: 0.9375rem; --leading-small: 1.5rem;
    --text-caption: 0.8125rem; --leading-caption: 1.25rem;
    --space-gutter: var(--space-6); --space-section: var(--space-24);
  }
}

/* Arabic (RTL): no tracking, no case, taller leading, Arabic faces first */
:lang(ar) {
  --font-heading: var(--font-arabic-heading); --font-body: var(--font-arabic-body);
  --text-display: 2.375rem; --leading-display: 3.5rem; --tracking-display: 0; --weight-display: 500; --case-display: none;
  --text-h1: 1.875rem; --leading-h1: 2.875rem; --tracking-h1: 0; --weight-h1: 500; --case-h1: none;
  --text-h2: 1.5625rem; --leading-h2: 2.5rem; --tracking-h2: 0; --weight-h2: 500; --case-h2: none;
  --text-h3: 1.1875rem; --leading-h3: 1.875rem; --tracking-h3: 0; --weight-h3: 500; --case-h3: none;
  --text-eyebrow: 0.8125rem; --leading-eyebrow: 1.25rem; --tracking-eyebrow: 0; --weight-eyebrow: 500; --case-eyebrow: none;
  --text-price: 1.75rem; --leading-price: 2.25rem; --tracking-price: 0; --weight-price: 400; --case-price: none;
  --text-button: 0.9375rem; --leading-button: 1.25rem; --tracking-button: 0; --weight-button: 500; --case-button: none;
  --text-lead: 1.1875rem; --leading-lead: 2rem; --tracking-lead: 0; --weight-lead: 400; --case-lead: none;
  --text-body: 1.0625rem; --leading-body: 1.875rem; --tracking-body: 0; --weight-body: 400; --case-body: none;
  --text-small: 0.9375rem; --leading-small: 1.625rem; --tracking-small: 0; --weight-small: 400; --case-small: none;
  --text-caption: 0.8125rem; --leading-caption: 1.375rem; --tracking-caption: 0; --weight-caption: 500; --case-caption: none;
}
@media (min-width: 1024px) {
  :lang(ar) {
    --text-display: 3.625rem; --leading-display: 5rem;
    --text-h1: 2.75rem; --leading-h1: 4rem;
    --text-h2: 2rem; --leading-h2: 3.125rem;
    --text-h3: 1.375rem; --leading-h3: 2.125rem;
    --text-eyebrow: 0.875rem; --leading-eyebrow: 1.375rem;
    --text-price: 2.25rem; --leading-price: 2.875rem;
    --text-button: 0.9375rem; --leading-button: 1.25rem;
    --text-lead: 1.3125rem; --leading-lead: 2.25rem;
    --text-body: 1.125rem; --leading-body: 2rem;
    --text-small: 1rem; --leading-small: 1.625rem;
    --text-caption: 0.875rem; --leading-caption: 1.375rem;
  }
}