/* ============================================================
   MY.ORGANICS ACADEMY — DESIGN TOKENS
   Luxury-natural / editorial. Single source of truth for the
   visual system. Do not hardcode colours or type outside here.
   ============================================================ */

:root {
  /* ---- Palette: base (ivory / cream) ---- */
  --c-page:        #F6F1E9;   /* page background — warm ivory */
  --c-raised:      #FCF9F3;   /* raised surfaces, cards        */
  --c-raised-2:    #FBF7EF;   /* alternate band                */
  --c-sand:        #ECE3D3;   /* sand / beige panels           */
  --c-sand-deep:   #E0D4BF;   /* deeper sand, hairlines        */

  /* ---- Palette: ink (charcoal / black) ---- */
  --c-ink:         #201C17;   /* primary text — warm charcoal  */
  --c-ink-soft:    #3B352D;   /* secondary text                */
  --c-ink-mute:    #6A6154;   /* muted, captions, meta         */
  --c-ink-invert:  #F6F1E9;   /* text on dark                  */

  /* ---- Palette: naturals ---- */
  --c-taupe:       #9A8A78;   /* warm taupe                    */
  --c-taupe-deep:  #7C6C58;   /* botanical brown-taupe         */
  --c-olive:       #6B6A48;   /* desaturated olive — accent    */
  --c-olive-deep:  #53522F;   /* olive pressed / hover         */
  --c-terra:       #A5623C;   /* earthy terracotta — rare cue  */

  /* ---- Semantic ---- */
  --c-accent:      var(--c-olive);
  --c-accent-ink:  var(--c-olive-deep);
  --c-line:        #DED2BE;   /* default hairline              */
  --c-line-soft:   #E9E0D0;
  --c-dark:        #201C17;   /* dark sections                 */
  --c-dark-2:      #2A251E;

  --c-ok:          #5E6B3E;
  --c-warn:        #A5623C;

  /* ---- Typography families ---- */
  --font-serif:  "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --font-sans:   "Jost", "Century Gothic", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ---- Type scale (fluid where useful) ---- */
  --fs-eyebrow:  0.72rem;
  --fs-meta:     0.82rem;
  --fs-body:     1.05rem;
  --fs-body-lg:  1.18rem;
  --fs-h6:       0.95rem;
  --fs-h5:       1.3rem;
  --fs-h4:       clamp(1.4rem, 1.1rem + 1.1vw, 1.9rem);
  --fs-h3:       clamp(1.8rem, 1.3rem + 1.9vw, 2.6rem);
  --fs-h2:       clamp(2.2rem, 1.5rem + 3vw, 3.6rem);
  --fs-h1:       clamp(2.9rem, 1.8rem + 5.2vw, 5.6rem);

  --lh-tight:    1.06;
  --lh-snug:     1.28;
  --lh-body:     1.72;

  --ls-eyebrow:  0.26em;
  --ls-label:    0.14em;
  --ls-head:     0.005em;

  /* ---- Spacing scale ---- */
  --sp-1: 0.35rem;
  --sp-2: 0.6rem;
  --sp-3: 0.9rem;
  --sp-4: 1.3rem;
  --sp-5: 2rem;
  --sp-6: 3rem;
  --sp-7: 4.5rem;
  --sp-8: 6.5rem;
  --sp-9: 9rem;

  /* ---- Layout ---- */
  --maxw:        1200px;
  --maxw-read:   68ch;   /* comfortable reading measure */
  --maxw-narrow: 900px;
  --radius:      3px;    /* almost square — editorial, not SaaS-rounded */
  --radius-lg:   5px;

  /* ---- Motion & effect ---- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 0.5s;
  --shadow-soft: 0 1px 2px rgba(32,28,23,0.04), 0 12px 34px -22px rgba(32,28,23,0.28);
  --shadow-card: 0 1px 2px rgba(32,28,23,0.05), 0 22px 48px -30px rgba(32,28,23,0.34);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0.001s; }
  * { scroll-behavior: auto !important; }
}