/* =============================================================
   tokens.css — Design System Tokens
   gestaltme.com | v1.0 | 2026-03
   =============================================================
   USAGE: Always load first. Never add selectors here —
          only CSS custom properties (variables).
   ============================================================= */

:root {

  /* -----------------------------------------------------------
     COLORS
  ----------------------------------------------------------- */

  /* Backgrounds */
  --c-cream:     #F7F3EE;   /* page background */
  --c-linen:     #EDE8E0;   /* cards, dividers */
  --c-white:     #FFFFFF;   /* cards, header */

  /* Brand - sage green */
  --c-sage:      #7A9E8E;   /* primary accent, CTA buttons */
  --c-sage-dk:   #5B7F70;   /* hover state, headings accent */
  --c-sage-lt:   #C8DDD6;   /* badges, quote marks, highlights */
  --c-sage-bg:   rgba(122,158,142,.08); /* subtle tinted areas */

  /* Text */
  --c-charcoal:  #252320;   /* headings, dark sections bg */
  --c-brown:     #6B5B4E;   /* body text, paragraphs */
  --c-muted:     #8C8379;   /* labels, captions, placeholders */

  /* Dark section */
  --c-dark-bg:       #252320;
  --c-dark-surface:  rgba(255,255,255,.04);
  --c-dark-border:   rgba(255,255,255,.08);
  --c-dark-text:     rgba(255,255,255,.82);
  --c-dark-muted:    rgba(255,255,255,.45);

  /* Utility */
  --c-focus:  rgba(122,158,142,.45);   /* focus ring */
  --c-error:  #C0392B;

  /* -----------------------------------------------------------
     TYPOGRAPHY
  ----------------------------------------------------------- */

  --font-display: 'Cormorant Garant', Georgia, 'Times New Roman', serif;
  --font-body:    'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Scale — fluid where appropriate */
  --text-xs:   0.75rem;    /*  12px */
  --text-sm:   0.875rem;   /*  14px */
  --text-base: 1rem;       /*  16px */
  --text-md:   1.0625rem;  /*  17px */
  --text-lg:   1.125rem;   /*  18px */
  --text-xl:   1.25rem;    /*  20px */
  --text-2xl:  1.5rem;     /*  24px */
  --text-3xl:  2rem;       /*  32px */
  --text-4xl:  2.5rem;     /*  40px */
  --text-5xl:  3.25rem;    /*  52px */
  --text-6xl:  4rem;       /*  64px */

  /* Line heights */
  --leading-tight:  1.1;
  --leading-snug:   1.25;
  --leading-normal: 1.5;
  --leading-relaxed:1.7;
  --leading-loose:  1.85;

  /* Letter spacing */
  --tracking-tight:  -0.03em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.08em;
  --tracking-widest:  0.12em;

  /* Font weights */
  --fw-normal:  400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  /* -----------------------------------------------------------
     SPACING  (8px base grid)
  ----------------------------------------------------------- */

  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-8:   32px;
  --sp-10:  40px;
  --sp-12:  48px;
  --sp-14:  56px;
  --sp-16:  64px;
  --sp-20:  80px;
  --sp-24:  96px;
  --sp-32:  128px;

  /* Section vertical padding */
  --section-py:     var(--sp-20);  /* 80px desktop */
  --section-py-sm:  var(--sp-14);  /* 56px mobile  */

  /* -----------------------------------------------------------
     LAYOUT
  ----------------------------------------------------------- */

  --container-max: 1100px;
  --container-px:  28px;
  --container-px-sm: 18px;

  /* -----------------------------------------------------------
     BORDER RADIUS
  ----------------------------------------------------------- */

  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   16px;
  --radius-lg:   28px;
  --radius-xl:   40px;
  --radius-pill: 999px;

  /* -----------------------------------------------------------
     SHADOWS
  ----------------------------------------------------------- */

  --shadow-xs:  0 1px 4px rgba(37,35,32,.06);
  --shadow-sm:  0 2px 8px rgba(37,35,32,.07);
  --shadow-md:  0 8px 28px rgba(37,35,32,.10);
  --shadow-lg:  0 20px 60px rgba(37,35,32,.13);
  --shadow-xl:  0 32px 80px rgba(37,35,32,.16);

  /* Sage-tinted shadow for CTA blocks */
  --shadow-sage: 0 12px 40px rgba(91,127,112,.30);

  /* -----------------------------------------------------------
     TRANSITIONS
  ----------------------------------------------------------- */

  --ease:        0.2s ease;
  --ease-slow:   0.35s ease;
  --ease-bounce: 0.3s cubic-bezier(.4,0,.2,1);
  --ease-spring: 0.4s cubic-bezier(.34,1.56,.64,1);

  /* -----------------------------------------------------------
     Z-INDEX
  ----------------------------------------------------------- */

  --z-base:    1;
  --z-card:    10;
  --z-header:  100;
  --z-drawer:  200;
  --z-overlay: 300;
  --z-toast:   400;
}

/* -----------------------------------------------------------
   MOBILE OVERRIDES
   Reduce section padding and container gutter on small screens
----------------------------------------------------------- */
@media (max-width: 767px) {
  :root {
    --container-px: var(--container-px-sm);
    --section-py:   var(--section-py-sm);
  }
}