// ============================================================
//  Let's Vibe — Design Tokens (SCSS)
//  Design system: "Living Sanctuary"
//  @use "tokens/tokens" as lv;  →  color: lv.$ink;
// ============================================================

// ---- Surfaces ----------------------------------------------
$mist:        #EDF0E8;
$paper:       #F6F7F2;
$sand:        #D9D3C4;
$line:        #D7DBCF;

// ---- Ink ---------------------------------------------------
$ink:         #1B271E;
$ink-soft:    #46584A;

// ---- Brand greens ------------------------------------------
$sage:        #9BA88D;
$sage-deep:   #7D8C6E;
$pine:        #2E4034;
$pine-2:      #223028;

// ---- Warm accent -------------------------------------------
$citrine:     #C7A24A;
$citrine-soft:#E4C97E;

// CTA: RESERVED for actionable links and buttons only (never content, labels, numbers, decoration)
$cta:       #2E4034;
$cta-hi:    #4A6354;
$cta-lo:    #223028;
$on-cta:    #EFF2E9;
$cta-text:  #2E4034;
$cta-on-dark:      #E4C97E;
$cta-hi-on-dark:   #F1DC9C;
$cta-lo-on-dark:   #C7A24A;
$on-cta-on-dark:   #1B271E;
$cta-text-on-dark: #E4C97E;
$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);

// ---- On-dark text ------------------------------------------
$on-dark:     #EFF2E9;
$on-dark-soft:#C9D4BE;

// ---- Category accents --------------------------------------
$cat-mind:    #5F7E80;
$cat-body:    #7D8C6E;
$cat-energy:  #C7A24A;
$cat-spirit:  #A07C9A;
$cat-heart:   #C98B9E;

$categories: (
  "mind":   $cat-mind,
  "body":   $cat-body,
  "energy": $cat-energy,
  "spirit": $cat-spirit,
  "heart":  $cat-heart,
);

// ---- Typography --------------------------------------------
$font-display: ("Fraunces", Georgia, serif);
$font-body:    ("Hanken Grotesk", ui-sans-serif, system-ui, sans-serif);

$fs: (
  "eyebrow": 0.6875rem,
  "caption": 0.8125rem,
  "small":   0.875rem,
  "body":    1rem,
  "lead":    1.125rem,
  "h4":      1.3125rem,
  "h3":      1.5rem,
  "h2":      2.125rem,
  "h1":      2.875rem,
);

$tracking-eyebrow: 0.28em;

// ---- Radius ------------------------------------------------
$r: ("xs": 9px, "sm": 12px, "md": 16px, "lg": 22px, "xl": 26px, "pill": 999px);

// ---- Spacing -----------------------------------------------
$space: (1:4px, 2:8px, 3:12px, 4:16px, 5:20px, 6:24px, 8:32px, 10:40px, 12:48px, 16:64px);

// ---- Elevation ---------------------------------------------
$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;
$breathe:  7s;
$ease:     cubic-bezier(.2,.7,.3,1);
$ease-inout: cubic-bezier(.4,0,.2,1);

// ---- Gradients ---------------------------------------------
$grad-sage: linear-gradient(135deg, #9BA88D, #7D8C6E);
$grad-pine: linear-gradient(135deg, #2E4034, #223028);
$grad-dawn: linear-gradient(135deg, #E4C97E, #C7A24A);
$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%);
$grad-orb:  radial-gradient(circle at 34% 30%, #E4C97E 0%, #C7A24A 22%, #9BA88D 52%, #2E4034 100%);