/* =========================================================================
   Alchemical Health — design tokens
   Single source of truth for brand color, typography, motion, surface styles.
   Pair with Cinzel for headers and Cormorant Garamond for editorial body.
   ========================================================================= */

:root {
  /* Midnight palette — primary brand */
  --alch-midnight-900: #0a0f1f;
  --alch-midnight-800: #10172b;
  --alch-midnight-700: #162039;
  --alch-midnight-600: #1e2b4d;
  --alch-midnight-500: #2a3a66;

  /* Gold palette — women's + accents */
  --alch-gold-900: #7a5d12;
  --alch-gold-700: #ad8726;
  --alch-gold-500: #d4af37;  /* primary gold */
  --alch-gold-400: #e2c25b;
  --alch-gold-200: #f3e2a3;

  /* Neutrals */
  --alch-ivory:    #f8f4ec;
  --alch-paper:    #fbf9f4;
  --alch-bone:     #efe9dc;
  --alch-ink:      #1c1a15;
  --alch-slate:    #4a5062;

  /* Semantic */
  --alch-bg:            var(--alch-paper);
  --alch-bg-dark:       var(--alch-midnight-800);
  --alch-text:          var(--alch-ink);
  --alch-text-dim:      var(--alch-slate);
  --alch-text-invert:   var(--alch-ivory);
  --alch-border:        rgba(10, 15, 31, 0.12);
  --alch-border-dark:   rgba(212, 175, 55, 0.22);

  /* Gradients — use sparingly for hero / cards */
  --alch-grad-midnight:
    linear-gradient(135deg, #0a0f1f 0%, #16223f 50%, #2a3a66 100%);
  --alch-grad-gold:
    linear-gradient(135deg, #8a6a15 0%, #d4af37 55%, #f3e2a3 100%);
  --alch-grad-midnight-radial:
    radial-gradient(1200px 600px at 10% 0%, #1e2b4d 0%, #0a0f1f 55%, #05080f 100%);

  /* Type */
  --alch-font-head: "Cinzel", "Cormorant Garamond", Georgia, serif;
  --alch-font-body: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --alch-font-ui:   ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --alch-h1: clamp(2.6rem, 5vw, 4.2rem);
  --alch-h2: clamp(2.0rem, 3.6vw, 3.0rem);
  --alch-h3: clamp(1.4rem, 2.2vw, 1.8rem);

  /* Motion */
  --alch-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --alch-dur:  420ms;

  /* Shape + elevation */
  --alch-radius-sm: 6px;
  --alch-radius:    14px;
  --alch-radius-lg: 22px;

  /* Shadow system — the "small shadow effect" the client asked for.
     Scoped by class so nav/header don't get shadows by accident. */
  --alch-shadow-soft:
    0 1px 1px rgba(10,15,31,0.04),
    0 6px 14px rgba(10,15,31,0.08);
  --alch-shadow-lift:
    0 2px 3px rgba(10,15,31,0.06),
    0 14px 34px rgba(10,15,31,0.16);
  --alch-shadow-gold:
    0 2px 3px rgba(122, 93, 18, 0.18),
    0 12px 32px rgba(122, 93, 18, 0.22);

  /* Layout */
  --alch-container: min(1200px, 92vw);
}