/* ==========================================================================
   altScope design tokens
   Calm, premium, understated. Teal is scarce: it means "act here" or "live".
   ========================================================================== */

/* ---- Tokens ----
   `html:root` beats Astra's inline `:root { --ast-global-color-* }` so the
   brand palette wins without touching Customizer settings. */
html:root {
  /* Primitive: slate (cool neutrals) */
  --slate-950: #020617;
  --slate-900: #0F172A;
  --slate-800: #1E293B;
  --slate-700: #334155;
  --slate-600: #475569;
  --slate-500: #64748B;
  --slate-400: #94A3B8;
  --slate-300: #CBD5E1;
  --slate-200: #E2E8F0;
  --slate-100: #F1F5F9;
  --slate-50:  #F8FAFC;
  --white:     #FFFFFF;

  /* Primitive: teal */
  --teal-700: #076A53;
  --teal-600: #087F63;
  --teal-500: #0BA37F;
  --teal-100: #CDEDE3;
  --teal-50:  #E8F6F1;

  /* Status */
  --red-600:   #DC2626;
  --red-50:    #FEF2F2;
  --amber-600: #D97706;
  --amber-50:  #FFFBEB;

  /* Semantic */
  --accent:          var(--teal-500);
  --accent-strong:   var(--teal-600);
  --accent-subtle:   var(--teal-50);
  --on-accent:       var(--white);

  --text-primary:    var(--slate-900);
  --text-secondary:  var(--slate-600);
  --text-muted:      var(--slate-500);
  --text-inverse:    var(--white);
  --text-link:       var(--teal-600);

  --surface-page:    var(--white);
  --surface-subtle:  var(--slate-50);
  --surface-card:    var(--white);
  --surface-inverse: var(--slate-900);

  --border-subtle:   var(--slate-200);
  --border-strong:   var(--slate-300);
  --focus-ring:      var(--teal-500);

  /* Type */
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* px, not rem: Astra sets the root font size to 15px */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  clamp(22px, 19px + 0.6vw, 26px);
  --text-3xl:  clamp(28px, 23px + 1.1vw, 36px);
  --text-4xl:  clamp(34px, 26px + 2vw, 48px);
  --text-5xl:  clamp(40px, 29px + 2.8vw, 60px);

  --leading-tight: 1.15;
  --leading-snug:  1.3;
  --leading-body:  1.65;
  --tracking-display: -0.02em;
  --tracking-eyebrow: 0.08em;

  /* Shape & depth */
  --radius:      4px;
  --radius-sm:   2px;
  --shadow-sm:   0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md:   0 4px 12px rgba(15, 23, 42, 0.08);
  --shadow-lg:   0 12px 32px rgba(15, 23, 42, 0.10);

  /* Motion: quick and quiet, no bounce */
  --ease:     cubic-bezier(0.2, 0, 0, 1);
  --duration: 160ms;

  /* Layout */
  --container: 1200px;

  /* ---- Astra global palette → brand ----
     0 accent · 1 accent tint · 2 headings · 3 body text / dark surfaces
     4 light section bg · 5 white · 6 secondary tint · 7 dark · 8 white */
  --ast-global-color-0: #0BA37F;
  --ast-global-color-1: #E8F6F1;
  --ast-global-color-2: #0F172A;
  --ast-global-color-3: #334155;
  --ast-global-color-4: #F8FAFC;
  --ast-global-color-5: #FFFFFF;
  --ast-global-color-6: #E2E8F0;
  --ast-global-color-7: #0F172A;
  --ast-global-color-8: #FFFFFF;
}