/* ============================================================
   SMARTANDI DESIGN TOKENS — v1.0
   Single source of truth. Never hardcode values outside this file.
   ============================================================ */

:root {

  /* ── BRAND CORE (extracted from s_ logomark) ──────── */
  --espresso:       #2C190E;   /* Logo · Primary text */
  --tan:            #C4A882;   /* s_ circle fill · Decorative accent */
  --tan-light:      #F0E8DC;   /* Tan tint backgrounds */
  --cream-ring:     #F2EBE0;   /* Logo ring on light variant */

  /* ── FOREST GREEN (Interactive / CTA) ──────────────── */
  --forest:         #3A6B52;
  --forest-hover:   #2E5742;
  --forest-deep:    #244332;
  --forest-tint:    #EBF1EC;

  /* ── BACKGROUNDS ────────────────────────────────────── */
  --bg-base:        #F5F0E8;   /* Main page background */
  --bg-surface:     #FFFFFF;   /* Cards, inputs, panels */
  --bg-raised:      #FAF7F2;   /* Subtle section alt */
  --bg-inv:         #2C190E;   /* Espresso dark sections */
  --bg-inv-2:       #3E2515;   /* Slightly lighter (footer) */

  /* ── TEXT ───────────────────────────────────────────── */
  --ink:            #2C190E;   /* Primary — same as espresso */
  --ink-2:          #7A6858;   /* Secondary */
  --ink-3:          #B0A090;   /* Tertiary / placeholder */
  --ink-inv:        #F5F0E8;   /* On dark backgrounds */
  --ink-inv-2:      rgba(245,240,232,0.55);

  /* ── BORDERS ────────────────────────────────────────── */
  --border:         #E8E0D4;
  --border-s:       #F0EAE0;   /* Subtle */
  --border-inv:     rgba(245,240,232,0.12);

  /* ── SEMANTIC ───────────────────────────────────────── */
  --success:        #2D7A5B;
  --error:          #C0392B;
  --error-bg:       #FEF2F2;
  --warning:        #C4A882;

  /* ── SHADOWS ────────────────────────────────────────── */
  --shadow-xs:      0 1px 2px rgba(44,25,14,0.06);
  --shadow-sm:      0 2px 8px rgba(44,25,14,0.08);
  --shadow-md:      0 8px 24px rgba(44,25,14,0.10);
  --shadow-lg:      0 20px 60px rgba(44,25,14,0.16);
  --shadow-hover:   0 12px 32px rgba(44,25,14,0.12);

  /* ── TYPOGRAPHY ─────────────────────────────────────── */
  --font-display:   'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:      'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:      'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;

  /* Type Scale */
  --text-xs:    0.75rem;    /* 12px */
  --text-sm:    0.875rem;   /* 14px */
  --text-base:  1rem;       /* 16px */
  --text-lg:    1.125rem;   /* 18px */
  --text-xl:    1.25rem;    /* 20px */
  --text-2xl:   1.5rem;     /* 24px */
  --text-3xl:   1.875rem;   /* 30px */
  --text-4xl:   2.25rem;    /* 36px */
  --text-5xl:   2.75rem;    /* 44px */
  --text-6xl:   3.5rem;     /* 56px */
  --text-7xl:   4.5rem;     /* 72px */

  /* ── SPACING (4px base unit) ────────────────────────── */
  --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-16:  64px;
  --sp-20:  80px;
  --sp-24:  96px;
  --sp-32:  128px;

  /* ── BORDER RADIUS ──────────────────────────────────── */
  --radius-xs:    4px;
  --radius-sm:    8px;
  --radius-md:    12px;
  --radius-lg:    20px;
  --radius-xl:    28px;
  --radius-2xl:   40px;
  --radius-pill:  999px;

  /* ── LAYOUT ─────────────────────────────────────────── */
  --max-content:      1240px;
  --page-margin:      var(--sp-5);        /* 20px mobile */
  --section-y:        var(--sp-16);       /* 64px mobile */
  --section-y-sm:     var(--sp-10);       /* 40px smaller gap */

  /* ── NAV & TAB BAR ──────────────────────────────────── */
  --nav-h:            52px;               /* Mobile header */
  --tab-h:            56px;               /* Tab bar icon area */
  --tab-safe:         env(safe-area-inset-bottom, 0px);
  --tab-total:        calc(var(--tab-h) + var(--tab-safe));
  --desktop-nav-h:    64px;

  /* ── MOTION ─────────────────────────────────────────── */
  --ease:         cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);

  --dur-fast:   150ms;
  --dur-base:   200ms;
  --dur-slow:   300ms;
  --dur-enter:  400ms;
}

/* ── DESKTOP OVERRIDES ──────────────────────────────── */
@media (min-width: 1024px) {
  :root {
    --page-margin:   clamp(24px, 5vw, 96px);
    --section-y:     var(--sp-24);    /* 96px */
    --section-y-sm:  var(--sp-16);   /* 64px */
    --nav-h:         0px;            /* Desktop nav replaces mobile header */
    --tab-total:     0px;            /* Tab bar hidden on desktop */
  }
}