/* ==========================================================================
   The O1 Space — Design Tokens
   Single source of truth for the visual language. Never hardcode these
   values in components; always reference the custom properties.
   ========================================================================== */

:root {
  /* ---- Brand color (from brand/logos SVGs) ---- */
  --green: #053225;        /* primary — deep brand green */
  --cream: #FAF7F2;        /* primary — warm off-white */

  /* Derived shades (green scale) */
  --green-900: #021c15;    /* darkest — hero backgrounds, footer */
  --green-800: #053225;    /* = brand green */
  --green-700: #0a4a37;
  --green-600: #11624a;
  --green-100: #dce8e2;    /* soft tint on cream */

  /* Derived shades (cream scale) */
  --cream-dim: #f1ece3;    /* section alternation on cream */
  --cream-line: #e2dccf;   /* hairlines / borders on cream */

  /* Functional aliases — components consume THESE, not raw colors */
  --bg: var(--cream);
  --fg: var(--green);
  --bg-invert: var(--green);
  --fg-invert: var(--cream);
  --line: var(--cream-line);
  --accent: var(--green-600);

  /* ---- Typography ---- */
  /* Latin display+body: Trueno. Arabic: IBM Plex Sans Arabic. */
  --font-latin: "Trueno", "Helvetica Neue", Arial, sans-serif;
  --font-arabic: "IBM Plex Sans Arabic", "Trueno", Tahoma, sans-serif;
  --font: var(--font-latin);

  /* Fluid type scale (min @ 360px viewport → max @ 1440px) */
  --text-xs:   clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --text-sm:   clamp(0.875rem, 0.84rem + 0.18vw, 0.9375rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  --text-xl:   clamp(1.375rem, 1.2rem + 0.9vw, 1.875rem);
  --text-2xl:  clamp(1.75rem, 1.4rem + 1.7vw, 2.75rem);
  --text-3xl:  clamp(2.25rem, 1.7rem + 2.8vw, 4rem);
  --text-display: clamp(2.75rem, 1.6rem + 6vw, 6.5rem);   /* hero statements */

  --leading-tight: 1.04;
  --leading-snug: 1.2;
  --leading-normal: 1.6;
  --tracking-tight: -0.02em;
  --tracking-caps: 0.14em;   /* for small uppercase labels */

  /* ---- Spacing scale ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
  --space-7: 6.5rem;
  --space-8: clamp(5rem, 4rem + 8vw, 10rem);  /* section rhythm */

  /* ---- Layout ---- */
  --container: 84rem;        /* max content width */
  --gutter: clamp(1.25rem, 4vw, 3.5rem);

  /* ---- Shape ---- */
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-pill: 999px;

  /* ---- Motion (reference-site feel: long, eased, deliberate) ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);      /* decel — reveals */
  --ease-inout: cubic-bezier(0.83, 0, 0.17, 1);    /* page transitions */
  --dur-fast: 200ms;
  --dur-med: 500ms;
  --dur-slow: 900ms;

  /* ---- Z layers ---- */
  --z-nav: 100;
  --z-overlay: 200;
  --z-toast: 300;
}

/* Arabic pages: swap primary font, keep everything else identical */
:root[lang="ar"], [lang="ar"] {
  --font: var(--font-arabic);
  --tracking-tight: 0;       /* letter-spacing harms Arabic script */
  --tracking-caps: 0;
  --leading-tight: 1.25;     /* Arabic needs taller lines */
}

/* Inverted (green) sections: swap aliases AND paint them */
.theme-invert {
  --bg: var(--green);
  --fg: var(--cream);
  --line: var(--green-700);
  --accent: var(--green-100);
  background: var(--bg);
  color: var(--fg);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-med: 1ms;
    --dur-slow: 1ms;
  }
}