/* ==================================================================
   CRESCENT — DESIGN TOKENS
   Central source for colour, type, radius, shadow, motion.
   Inner pages should import this file and build on these variables.
   LIGHT THEME ONLY.
   ================================================================== */

:root {
  color-scheme: light;

  /* ---------- Surfaces ---------- */
  --canvas:        #FAF8F3;   /* warm ivory */
  --canvas-2:      #F4F1EA;   /* alt surface */
  --card:          rgba(255, 255, 255, 0.76);
  --card-strong:   rgba(255, 255, 255, 0.88);
  --card-solid:    #FFFFFF;
  --hair:          rgba(15, 27, 61, 0.06);
  --hair-2:        rgba(15, 27, 61, 0.11);
  --hair-3:        rgba(15, 27, 61, 0.18);

  /* ---------- Ink ---------- */
  --ink:           #0E1A3A;   /* deep navy — text + primary buttons (darkest surface allowed) */
  --ink-2:         #22305A;
  --slate:         #5B6478;   /* secondary text (5.6:1 on canvas) */
  --slate-soft:    #6B7386;   /* minimum for small text (4.6:1) */

  /* ---------- Brand light (glows, orbs, tiles) ---------- */
  --amber:         #F7C948;
  --sky:           #5BC0F8;
  --lavender:      #B9A3F5;
  --mint:          #8EE3D0;
  --blush:         #F6B8D6;

  /* Deeper tones of the same hues — used where text must meet contrast */
  --amber-deep:    #A9740A;
  --sage-deep:     #5C8628;
  --sky-deep:      #1784C4;
  --indigo-deep:   #4E5BD6;
  --violet-deep:   #8352E4;
  --error:         #B42318;
  --success:       #17795E;

  /* ---------- Gradients ---------- */
  /* Signature text gradient: amber → sage → sky → lavender (loops seamlessly for shimmer) */
  --grad-text: linear-gradient(90deg,
      var(--amber-deep) 0%, var(--sage-deep) 16%, var(--sky-deep) 33%,
      var(--indigo-deep) 50%, var(--violet-deep) 66%, var(--sky-deep) 83%, var(--amber-deep) 100%);
  /* Light version for text sitting on the CTA gradient */
  --grad-text-light: linear-gradient(90deg, #FFFFFF 0%, #FFEBB0 25%, #FFFFFF 50%, #D9F1FF 75%, #FFFFFF 100%);
  --grad-tile:   linear-gradient(135deg, #3B82F6 0%, #06B6D4 100%);
  --grad-tile-h: linear-gradient(135deg, #2563EB 0%, #7C5CF6 55%, #06B6D4 100%);
  --grad-cta:    linear-gradient(120deg, #2C8BE0 0%, #4C5FD8 48%, #8457E6 100%);
  --grad-sheen:  linear-gradient(110deg, #1D4ED8 0%, #4F46E5 45%, #7C3AED 75%, #0891B2 100%);
  --grad-glow:   conic-gradient(from var(--ang, 0deg), transparent 0 55%, var(--sky) 65%, var(--lavender) 75%, var(--amber) 85%, transparent 95%);

  /* ---------- Type ---------- */
  --font-display: "Instrument Serif", "Fraunces", Georgia, serif;
  --font-serif:   "Instrument Serif", Georgia, serif;
  --font-body:    "Geist", "Satoshi", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fs-h1:   clamp(2.1rem, 6.2vw, 6.75rem);
  --fs-h2:   clamp(1.85rem, 4.5vw, 4.5rem);
  --fs-h3:   clamp(1.4rem, 2.4vw, 2.25rem);
  --fs-h4:   clamp(1.2rem, 1.6vw, 1.6rem);
  --fs-lead: clamp(1rem, 1.25vw, 1.2rem);
  --fs-body: 1rem;
  --fs-mono: 0.72rem;
  --tracking-display: -0.022em;
  --tracking-mono: 0.18em;
  --display-axes: "opsz" 144, "SOFT" 50;
  --display-axes-soft: "opsz" 144, "SOFT" 100;

  /* ---------- Shape & space ---------- */
  --r-sm:   14px;
  --r-md:   20px;
  --r-lg:   28px;
  --r-xl:   36px;
  --r-pill: 999px;
  --maxw:   1320px;
  --gutter: clamp(14px, 4vw, 40px);
  --section-y: clamp(64px, 10vw, 184px);

  /* ---------- Depth ---------- */
  --blur: saturate(160%) blur(18px);
  --shadow-1: 0 1px 2px rgba(14, 26, 58, 0.04), 0 8px 24px -12px rgba(14, 26, 58, 0.10);
  --shadow-2: 0 1px 2px rgba(14, 26, 58, 0.04), 0 24px 60px -28px rgba(30, 50, 120, 0.28);
  --shadow-glow: 0 0 0 1px rgba(91, 192, 248, 0.25), 0 24px 60px -24px rgba(79, 70, 229, 0.38);
  --ring: 0 0 0 3px var(--canvas), 0 0 0 5px var(--sky-deep);

  /* ---------- Motion ---------- */
  --ease:        cubic-bezier(0.16, 1, 0.3, 1);     /* expo-out glide */
  --ease-quart:  cubic-bezier(0.25, 1, 0.5, 1);
  --ease-spring: cubic-bezier(0.22, 1.18, 0.36, 1);  /* very soft overshoot, accordion */
  --dur-1: 0.35s;
  --dur-2: 0.7s;
  --dur-3: 1.1s;
}

/* Registered so the glow-border angle can animate */
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }