/*
  AKA — Design Tokens
  Palette: Black + Cream (#f7f5ee) + Warm Grey (#6a6d6d)
  Dark mode is the default brand presentation; light mode is a secondary,
  user-selectable mode. Values below are consumed by base/layout/components.
*/

:root {
  /* ---- Brand neutrals (raw) ---- */
  --raw-black: #0a0a0a;
  --raw-black-soft: #141414;
  --raw-black-elevated: #1b1b1a;
  --raw-cream: #f7f5ee;
  --raw-cream-soft: #eeebe0;
  --raw-cream-elevated: #e5e1d3;
  --raw-grey: #6a6d6d;
  --raw-grey-light: #9a9c9a;
  --raw-grey-dark: #4a4c4c;

  /* ---- Typography ---- */
  --font-ar: "Thmanyah Sans", "Segoe UI", Tahoma, Arial, sans-serif;
  --font-en: Arial, Helvetica, "Segoe UI", sans-serif;

  --fs-display: clamp(2.75rem, 3vw + 2rem, 6.25rem);
  --fs-h1: clamp(2.25rem, 2.2vw + 1.5rem, 4rem);
  --fs-h2: clamp(1.75rem, 1.4vw + 1.25rem, 2.75rem);
  --fs-h3: clamp(1.375rem, 0.8vw + 1.1rem, 1.75rem);
  --fs-h4: clamp(1.125rem, 0.4vw + 1rem, 1.375rem);
  --fs-lead: clamp(1.125rem, 0.4vw + 1rem, 1.375rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-micro: 0.75rem;

  --lh-tight: 1.08;
  --lh-heading: 1.2;
  --lh-body: 1.7;

  --ls-eyebrow: 0.18em;
  --ls-wide: 0.06em;

  /* ---- Spacing scale ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;
  --sp-section: clamp(4rem, 6vw, 8rem);

  /* ---- Layout ---- */
  --container-max: 1440px;
  --container-pad: clamp(1.25rem, 4vw, 4rem);
  --header-h: 84px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --border-w: 1px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 180ms;
  --dur-med: 420ms;
  --dur-slow: 720ms;

  /* ---- Z-index ---- */
  --z-header: 100;
  --z-overlay: 200;
  --z-modal: 300;
}

/* =========================================================
   DARK THEME — default brand presentation
   ========================================================= */
:root,
:root[data-theme="dark"] {
  --bg: var(--raw-black);
  --bg-soft: var(--raw-black-soft);
  --bg-elevated: var(--raw-black-elevated);
  --surface: var(--raw-black-soft);
  --surface-border: rgba(247, 245, 238, 0.12);
  --surface-border-strong: rgba(247, 245, 238, 0.22);

  --text-primary: var(--raw-cream);
  --text-secondary: var(--raw-grey-light);
  --text-muted: rgba(247, 245, 238, 0.55);
  --text-inverse: var(--raw-black);

  --accent: var(--raw-cream);
  --accent-contrast: var(--raw-black);
  --link: var(--raw-cream);

  --overlay-scrim: rgba(10, 10, 10, 0.72);
  --card-media-bg: #1e1e1c;
  --divider: rgba(247, 245, 238, 0.14);
  --shadow-soft: 0 20px 60px rgba(0, 0, 0, 0.45);
  --focus-ring: #f7f5ee;
}

/* =========================================================
   LIGHT THEME — secondary, user-selectable
   ========================================================= */
:root[data-theme="light"] {
  --bg: var(--raw-cream);
  --bg-soft: var(--raw-cream-soft);
  --bg-elevated: var(--raw-cream-elevated);
  --surface: #ffffff;
  --surface-border: rgba(10, 10, 10, 0.1);
  --surface-border-strong: rgba(10, 10, 10, 0.18);

  --text-primary: var(--raw-black);
  --text-secondary: var(--raw-grey-dark);
  --text-muted: rgba(10, 10, 10, 0.58);
  --text-inverse: var(--raw-cream);

  --accent: var(--raw-black);
  --accent-contrast: var(--raw-cream);
  --link: var(--raw-black);

  --overlay-scrim: rgba(247, 245, 238, 0.82);
  --card-media-bg: #e9e6d9;
  --divider: rgba(10, 10, 10, 0.12);
  --shadow-soft: 0 20px 60px rgba(10, 10, 10, 0.12);
  --focus-ring: #0a0a0a;
}