/* ============================================================
   Let's Vibe — Design Tokens (CSS Custom Properties)
   Design system: "Living Sanctuary"
   Single source of truth. Import this first, before any
   component or page CSS, so every value cascades from :root.

       <link rel="stylesheet" href="tokens/tokens.css" />

   These variable names match the production app, so the same
   vocabulary spans web, native web-views, and new builds.
   ============================================================ */

:root {
  /* ---- Surfaces ------------------------------------------- */
  --mist:        #EDF0E8;  /* app background — the "air" */
  --paper:       #F6F7F2;  /* cards, panels, raised surfaces */
  --sand:        #D9D3C4;  /* warm secondary surface */
  --line:        #D7DBCF;  /* hairline borders & dividers */

  /* ---- Ink (text) ----------------------------------------- */
  --ink:         #1B271E;  /* primary text & headlines */
  --ink-soft:    #46584A;  /* secondary / supporting text */

  /* ---- Brand greens --------------------------------------- */
  --sage:        #9BA88D;  /* brand core (logo, fills) */
  --sage-deep:   #7D8C6E;  /* eyebrows, icons, links */
  --pine:        #2E4034;  /* primary action */
  --pine-2:      #223028;  /* deep / pressed */

  /* ---- Warm accent (use sparingly: one per screen) -------- */
  --citrine:     #C7A24A;  /* spotlight accent */
  --citrine-soft:#E4C97E;  /* gradient partner / highlight */

  /* ---- On-dark text (over pine / photos) ------------------ */
  --on-dark:     #EFF2E9;
  --on-dark-soft:#C9D4BE;

  /* ---- CTA (links & buttons) — RESERVED -------------------------
     The ONE color family for every actionable link and button.
     Never use it for content, labels, numbers, icons, dividers or
     decoration. See BRAND_GUIDELINES.md "The CTA rule".          */
  --cta:         #2E4034;  /* CTA base (= pine)                    */
  --cta-hi:      #4A6354;  /* top-left highlight of the gradient   */
  --cta-lo:      #223028;  /* bottom-right depth (= pine-2)        */
  --on-cta:      #EFF2E9;  /* text on a CTA                        */
  --cta-text:    #2E4034;  /* inline links on light surfaces       */
  /* Dark surfaces use the warm pair instead (contrast on ink/pine) */
  --cta-on-dark:      #E4C97E;
  --cta-hi-on-dark:   #F1DC9C;
  --cta-lo-on-dark:   #C7A24A;
  --on-cta-on-dark:   #1B271E;
  --cta-text-on-dark: #E4C97E;
  /* Two soft text-shadow layers keep CTA labels crisp on the gradient */
  --cta-shadow:         0 1px 2px rgba(34,48,40,.5), 0 2px 8px rgba(34,48,40,.35);
  --cta-shadow-on-dark: 0 1px 1px rgba(255,248,225,.6), 0 1px 5px rgba(255,248,225,.4);

  /* ---- Category accents (modality families & data) -------- */
  --cat-mind:    #5F7E80;
  --cat-body:    #7D8C6E;
  --cat-energy:  #C7A24A;
  --cat-spirit:  #A07C9A;
  --cat-heart:   #C98B9E;

  /* ---- Typography ----------------------------------------- */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;

  --fs-eyebrow:   0.6875rem; /* 11px */
  --fs-caption:   0.8125rem; /* 13px */
  --fs-small:     0.875rem;  /* 14px */
  --fs-body:      1rem;      /* 16px */
  --fs-lead:      1.125rem;  /* 18px */
  --fs-h4:        1.3125rem; /* 21px */
  --fs-h3:        1.5rem;    /* 24px */
  --fs-h2:        2.125rem;  /* 34px (fluid: see --h2) */
  --fs-h1:        2.875rem;  /* 46px (fluid: see --h1) */

  /* Fluid display sizes (clamp) */
  --h1: clamp(2rem, 1.2rem + 3.6vw, 2.875rem);
  --h2: clamp(1.625rem, 1.2rem + 1.9vw, 2.375rem);

  --tracking-eyebrow: 0.28em;
  --leading-tight: 1.08;
  --leading-snug:  1.3;
  --leading-body:  1.6;

  /* ---- Radius --------------------------------------------- */
  --r-xs:  9px;
  --r-sm:  12px;
  --r-md:  16px;
  --r-lg:  22px;
  --r-xl:  26px;
  --r-pill:999px;

  /* ---- Spacing (4px base) --------------------------------- */
  --s-1: 0.25rem; --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.25rem; --s-6: 1.5rem;  --s-8: 2rem;    --s-10: 2.5rem;
  --s-12: 3rem;   --s-16: 4rem;

  /* ---- Elevation (soft, low-contrast) --------------------- */
  --shadow-sm: 0 16px 36px -28px rgba(46,64,52,.5);
  --shadow-md: 0 24px 50px -24px rgba(46,64,52,.5);
  --shadow-lg: 0 40px 80px -30px rgba(27,39,30,.5);

  /* ---- Motion --------------------------------------------- */
  --dur-fast: 150ms;
  --dur-base: 200ms;
  --dur-slow: 400ms;
  --ease: cubic-bezier(.2,.7,.3,1);          /* settle: entrances, fades, hovers */
  --ease-inout: cubic-bezier(.4,0,.2,1);     /* geometry: size, height, position, layout changes */
  --breathe: 7s;          /* signature orb cycle */

  /* ---- Brand gradients ------------------------------------ */
  --grad-sage: linear-gradient(135deg, #9BA88D, #7D8C6E);
  --grad-pine: linear-gradient(135deg, #2E4034, #223028);
  --grad-dawn: linear-gradient(135deg, #E4C97E, #C7A24A);
  --grad-mist: linear-gradient(135deg, #EDF0E8, #D9D3C4);
  /* CTA gradient: radial, lit from the top-left */
  --grad-cta:         radial-gradient(circle at 18% 12%, #4A6354 0%, #2E4034 48%, #223028 100%);
  --grad-cta-on-dark: radial-gradient(circle at 18% 12%, #F1DC9C 0%, #E4C97E 45%, #C7A24A 100%);
  /* The signature orb */
  --grad-orb:  radial-gradient(circle at 34% 30%, #E4C97E 0%, #C7A24A 22%, #9BA88D 52%, #2E4034 100%);

  /* ---- Focus ring (accessibility) ------------------------- */
  --focus: 0 0 0 2px var(--paper), 0 0 0 4px var(--sage-deep);
}