/* ============================================================
   DESIGN TOKENS — I Am The Storm Yoga
   Single source of truth. Every component consumes these.

   Palette v4 — toasted-earth studio. Homepage cocoa, clay and
   cinnamon tones now carry the brand; heather purple is a quiet
   secondary note and green is no longer a structural colour.
   ============================================================ */

:root {
	/* ---------- Core palette (toasted-earth brand) ---------- */
	--color-ink:        #33251F;  /* cacao — primary text             */
	--color-parchment:  #F7F1E7;  /* warm paper — main surface        */
	--color-moss:       #4A382A;  /* cocoa — dark surfaces (legacy name) */
	--color-sage-tint:  #EADBCB;  /* cocoa mist — cards and hovers     */
	--color-clay:       #9C5B45;  /* homepage clay — primary action    */
	--color-brass:      #9A704C;  /* toasted brass — ownership         */
	--color-error:      #985044;  /* brick — errors                    */
	--color-success:    #76513C;  /* cinnamon — positive states        */
	--color-chalk:      #F7F1E7;
	--color-storm-pine: #4A382A;
	--color-sea-glass:  #D8B9A2;  /* warm glass (legacy name)          */
	--color-field-sage: #B88466;  /* cinnamon (legacy name)            */
	--color-heather:    #66506F;  /* restrained purple secondary      */

	/* ---------- Earthy extended family ---------- */
	--color-chocolate:  #2B1D16;  /* deepest cocoa (footer)          */
	--color-walnut:     #5B4030;  /* lifted cocoa                     */
	--color-terracotta: #B9785B;
	--color-cinnamon:   #A8745A;
	--color-copper:     #86614F;
	--color-amber:      #B68D58;
	--color-gold:       #997146;
	--color-lavender:   #CFC2D6;
	--color-dusty-purple:#88738F;
	--color-plum:       #66506F;  /* purple, used sparingly           */
	--color-leaf:       #9B725A;  /* warm leaf-brown (legacy name)     */

	/* ---------- Vintage extensions ---------- */
	--color-sage:       #A98068;  /* warm botanical brown (legacy name) */
	--color-olive:      #91705A;
	--color-mustard:    #B48757;
	--color-peach:      #D9AD95;
	--color-clay-warm:  #B57256;
	--color-gold-light: #C9A77D;
	--color-paper:      #FBF7EF;
	--color-vellum:     #F1E7DA;

	/* ---------- Neutrals (warm) ---------- */
	--color-cream:      #FFFCF7;
	--color-linen:      #EDE1D3;
	--color-beige:      #DCCABB;
	--color-stone:      #CEBCAE;
	--color-taupe:      #A99384;
	--color-warm-grey:  #807268;

	/* ---------- Legacy aliases (so components never break) ------ */
	--color-moss-deep:  var(--color-chocolate);
	--color-moss-soft:  var(--color-walnut);
	--color-ink-soft:   #5D4436;
	--color-ink-mute:   #756254;
	--color-line:       var(--color-stone);
	--color-clay-soft:  var(--color-terracotta);
	--color-clay-tint:  #F1DED4;
	--color-brass-tint: #F0E4D6;
	--color-brass-strong: #6D4B33;
	--color-sage-glow:  #F2E5DB;

	/* Admin-bar compensation (0 for guests; WP sets 32px/46px for logged-in) */
	--adminbar-h: 0px;

	/* ---------- Semantic ---------- */
	--bg:               var(--color-parchment);
	--bg-raised:        var(--color-cream);
	--bg-sunken:        var(--color-linen);
	--bg-dark:          var(--color-moss);
	--bg-darkest:       var(--color-chocolate);
	--text:             var(--color-ink);
	--text-soft:        var(--color-ink-soft);
	--text-mute:        var(--color-ink-mute);
	--text-on-dark:     var(--color-parchment);
	--text-on-dark-mute:#E8D9CA;
	--accent:           var(--color-clay);
	--accent-hover:     #814634;
	--owned:            var(--color-brass);
	--border:           var(--color-line);

	/* ---------- Typography (quirky-vintage editorial) ---------- */
	--font-display: 'Fraunces', 'Georgia', serif;        /* wonky vintage serif, real italics */
	--font-body:    'Karla', system-ui, -apple-system, sans-serif; /* warm humanist sans */
	--font-hand:    'Caveat', cursive;                   /* handwritten accent — sparing */
	--font-mono:    'IBM Plex Mono', 'SFMono-Regular', monospace;

	/* Fluid type scale — clamp(min, vw, max) */
	--text-xs:    clamp(0.72rem, 0.70rem + 0.1vw, 0.78rem);
	--text-sm:    clamp(0.82rem, 0.80rem + 0.12vw, 0.9rem);
	--text-base:  clamp(0.95rem, 0.92rem + 0.18vw, 1.06rem);
	--text-lg:    clamp(1.08rem, 1.02rem + 0.3vw, 1.25rem);
	--text-xl:    clamp(1.3rem, 1.18rem + 0.6vw, 1.6rem);
	--text-2xl:   clamp(1.6rem, 1.35rem + 1.2vw, 2.1rem);
	--text-3xl:   clamp(2rem, 1.6rem + 2vw, 2.9rem);
	--text-4xl:   clamp(2.5rem, 1.9rem + 3vw, 3.9rem);
	--text-5xl:   clamp(3rem, 2.1rem + 4.5vw, 5.2rem);
	--text-hero:  clamp(2.9rem, 1.8rem + 7vw, 6.4rem);

	--leading-none:  1.05;
	--leading-tight: 1.18;
	--leading-snug:  1.4;
	--leading-body:  1.7;

	--tracking-tight: -0.01em;
	--tracking-wide:   0.08em;
	--tracking-caps:   0.18em;

	/* ---------- Spacing (8px system) ---------- */
	--space-3xs: 0.25rem;
	--space-2xs: 0.5rem;
	--space-xs:  0.75rem;
	--space-sm:  1rem;
	--space-md:  1.5rem;
	--space-lg:  2rem;
	--space-xl:  3rem;
	--space-2xl: 4.5rem;
	--space-3xl: 6rem;
	--space-4xl: 8rem;
	--section-y: clamp(4rem, 3rem + 5vw, 8rem);

	/* ---------- Layout ---------- */
	--container:      78rem;
	--container-wide: 90rem;
	--container-narrow: 46rem;
	--gutter: clamp(1.25rem, 4vw, 3rem);
	--header-h: 5rem;
	--header-h-scrolled: 3.75rem;

	/* ---------- Radii ---------- */
	--radius-xs:  0.375rem;
	--radius-sm:  0.625rem;
	--radius-md:  1rem;
	--radius-lg:  1.5rem;
	--radius-xl:  2.25rem;
	--radius-organic: 42% 58% 62% 38% / 45% 42% 58% 55%;
	--radius-card-a: 2rem 3.5rem 2rem 2.5rem;      /* asymmetric handcrafted */
	--radius-card-b: 3.5rem 2rem 2.5rem 2rem;      /* counter-melody         */
	--radius-card-c: 2.5rem 2.5rem 3.5rem 2rem;    /* third voice            */
	--radius-full: 999px;

	/* ---------- Shadows (warm, soft, low) ---------- */
	--shadow-xs:  0 1px 2px rgba(59, 39, 29, 0.05);
	--shadow-sm:  0 2px 10px rgba(59, 39, 29, 0.06);
	--shadow-md:  0 8px 24px rgba(59, 39, 29, 0.09);
	--shadow-lg:  0 18px 48px rgba(43, 29, 22, 0.12);
	--shadow-xl: 0 30px 76px rgba(43, 29, 22, 0.16);
	--shadow-clay: 0 10px 30px rgba(156, 91, 69, 0.25);

	/* ---------- Gradients ---------- */
	--gradient-hero: radial-gradient(130% 100% at 12% 8%, #6B4B37 0%, var(--color-moss) 48%, var(--color-chocolate) 100%);
	--gradient-mesh: radial-gradient(42% 55% at 76% 18%, rgba(216, 185, 162, 0.2) 0%, transparent 70%),
	                 radial-gradient(36% 46% at 18% 82%, rgba(182, 141, 88, 0.13) 0%, transparent 70%),
	                 radial-gradient(52% 62% at 86% 86%, rgba(102, 80, 111, 0.12) 0%, transparent 70%);
	--gradient-clay: linear-gradient(135deg, var(--color-clay) 0%, #AA6D57 100%);
	--gradient-gold: linear-gradient(135deg, var(--color-gold) 0%, var(--color-amber) 100%);
	--gradient-fade-up: linear-gradient(to top, rgba(43, 29, 22, 0.55), transparent 65%);
	--gradient-card: linear-gradient(160deg, var(--color-cream) 0%, var(--color-sage-glow) 100%);

	/* ---------- Motion (slow, relaxing) ---------- */
	--ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
	--ease-soft:   cubic-bezier(0.45, 0, 0.15, 1);
	--ease-spring: cubic-bezier(0.34, 1.25, 0.44, 1);
	--dur-fast:   200ms;
	--dur-base:   340ms;
	--dur-slow:   620ms;
	--dur-reveal: 900ms;

	/* ---------- Focus ---------- */
	--focus-ring: 0 0 0 3px var(--color-parchment), 0 0 0 5px var(--color-clay);
	--focus-ring-dark: 0 0 0 3px var(--color-moss), 0 0 0 5px var(--color-parchment);

	/* ---------- Z layers ---------- */
	--z-nav: 100;
	--z-overlay: 200;
	--z-toast: 300;
}