/* =========================================================
   AURAMAXXING ACADEMY — design tokens
   single source of truth: colors, type, space, motion, radii
   ========================================================= */

:root {
  /* ---- color: matte, monastic, lineage ---- */
  --ink:       #0A0A0A;   /* primary surface — matte black */
  --ink-2:     #141414;   /* raised surface — cards, panels */
  --ink-3:     #1C1C1C;   /* inner core for the double-bezel */
  --saffron:   #E87722;   /* primary CTA — robe orange */
  --saffron-2: #FF8A30;   /* hover lift on the saffron pill */
  --mahakali:  #8B0000;   /* final CTA full-bleed — mother red */
  --mahakali-2:#A41010;   /* hover for mother red */
  --gold:      #C9A24B;   /* hairlines, lineage serifs, accents */
  --gold-soft: rgba(201, 162, 75, 0.22);
  --bone:      #EFE7D6;   /* body text on dark — bone, candlelight */
  --bone-soft: rgba(239, 231, 214, 0.72);
  --ash:       #8C8278;   /* muted captions, eyebrows */
  --ash-soft:  rgba(140, 130, 120, 0.35);

  /* ---- typography ---- */
  --font-display: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-body:    "Plus Jakarta Sans", "Geist", system-ui, -apple-system, Segoe UI, sans-serif;

  /* fluid type scale — hero through caption */
  --fs-hero:     clamp(2.75rem, 6vw, 5.5rem);
  --fs-h2:       clamp(2rem, 4.2vw, 3.5rem);
  --fs-h3:       clamp(1.375rem, 2.4vw, 1.875rem);
  --fs-lead:     clamp(1.0625rem, 1.4vw, 1.25rem);
  --fs-body:     1.0625rem;
  --fs-small:    0.875rem;
  --fs-eyebrow:  0.75rem;

  /* line height */
  --lh-display:  1.04;
  --lh-heading:  1.15;
  --lh-body:     1.6;
  --lh-tight:    1.3;

  /* tracking — wide for eyebrows, tight for display */
  --tr-display:  -0.015em;
  --tr-body:     0;
  --tr-eyebrow:  0.22em;

  /* ---- space: macro whitespace by design ---- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;
  --s-11: 160px;
  --s-12: 200px;

  --section-y:   clamp(96px, 14vw, 200px);     /* py-24 → py-50 equivalent */
  --container-x: clamp(20px, 5vw, 56px);

  /* prose measure — 60ch lock for editorial passages */
  --measure: 60ch;
  --container-max: 1240px;

  /* ---- radii: concentric (double-bezel) ---- */
  --r-outer: 28px;
  --r-inner: 22px;
  --r-pill:  999px;
  --r-tight: 8px;

  /* ---- elevation — soft, not generic ---- */
  --shadow-card:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 30px 60px -30px rgba(0, 0, 0, 0.7),
    0 12px 28px -16px rgba(0, 0, 0, 0.5);
  --shadow-hover:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 40px 80px -32px rgba(0, 0, 0, 0.8),
    0 18px 40px -18px rgba(0, 0, 0, 0.55);
  --shadow-cta:
    0 14px 30px -10px rgba(232, 119, 34, 0.45),
    0 4px 12px -4px rgba(232, 119, 34, 0.3);

  /* ---- motion — custom curves only, no linear, no ease-in-out ---- */
  --ease-out-soft:   cubic-bezier(0.22, 1, 0.36, 1);     /* outgoing, decelerating */
  --ease-out-snap:   cubic-bezier(0.16, 1, 0.3, 1);      /* hero reveals */
  --ease-in-quiet:   cubic-bezier(0.7, 0, 0.84, 0);      /* hover-in */
  --dur-fast:        180ms;
  --dur-base:        320ms;
  --dur-slow:        680ms;
  --dur-reveal:      900ms;

  /* ---- hairlines ---- */
  --hair-gold: 1px solid var(--gold-soft);
  --hair-bone: 1px solid rgba(239, 231, 214, 0.08);
}

/* respect users who want reduced motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
    --dur-reveal: 0ms;
  }
}