/* ────────────────────────────────────────────────────────────────────────
   Sarvita Design Tokens — CSS variables fallback
   Use this when not on Tailwind v4, or as a base for native consumers
   (email templates, embedded widgets, simple HTML).
   Source of truth: src/theme.css. Keep in sync.
   ──────────────────────────────────────────────────────────────────────── */

:root {
  /* ── Surfaces & text (cool, quiet) ────────────────────────────────── */
  --sv-color-chalk:    #ECECE6;
  --sv-color-snow:     #F6F6F2;
  --sv-color-pumice:   #DEDFD8;
  --sv-color-slate:    #14181C;
  --sv-color-graphite: #4F5560;
  --sv-color-pebble:   #9AA0A6;
  --sv-color-ash:      #D6D7D1;

  /* ── Brand anchor ─────────────────────────────────────────────────── */
  --sv-color-petrol:   #1F4A56;

  /* ── Highlight (NOT for state) ────────────────────────────────────── */
  --sv-color-citrine:  #D9A24A;

  /* ── Path pillars (mineral hues, flat) ────────────────────────────── */
  --sv-color-pillar-root:      #5B6671;   /* basalt */
  --sv-color-pillar-nutrition: #B86D3F;   /* copper */
  --sv-color-pillar-cardio:    #B83A4A;   /* pomegranate */
  --sv-color-pillar-strength:  #8B3A2A;   /* rust */
  --sv-color-pillar-stability: #7C8B5C;   /* jasper */
  --sv-color-pillar-sleep:     #2A4470;   /* lapis */
  --sv-color-pillar-mind:      #5B4A7A;   /* amethyst */

  /* ── Data viz: macros ─────────────────────────────────────────────── */
  --sv-color-macro-protein: #8B3A2A;
  --sv-color-macro-carbs:   #B89540;
  --sv-color-macro-fat:     #7C8B5C;

  /* ── Data viz: heart rate zones (mineral ramp) ────────────────────── */
  --sv-color-zone-1: #8A9B7E;
  --sv-color-zone-2: #B89540;
  --sv-color-zone-3: #B86D3F;
  --sv-color-zone-4: #8B3A2A;
  --sv-color-zone-5: #5A1E18;

  /* ── Semantic state ───────────────────────────────────────────────── */
  --sv-color-success: #2D6B57;   /* jade */
  --sv-color-warning: #C97A2A;   /* amber — too high */
  --sv-color-error:   #7A2820;   /* garnet */
  --sv-color-info:    #4A6B8C;   /* slate-blue — too low / under, neutral info */

  /* Semantic aliases */
  --sv-text:    var(--sv-color-slate);
  --sv-muted:   var(--sv-color-graphite);
  --sv-line:    var(--sv-color-ash);
  --sv-bg-soft: var(--sv-color-pumice);
  --sv-bg-app:  var(--sv-color-chalk);

  /* ── Typography ────────────────────────────────────────────────────── */
  --sv-font-ui: 'General Sans', ui-sans-serif, system-ui, sans-serif;

  --sv-fw-regular:  400;
  --sv-fw-medium:   500;
  --sv-fw-semibold: 600;
  --sv-fw-bold:     700;

  /* size / line-height pairs */
  --sv-text-meta:      12px / 20px;
  --sv-text-caption:   14px / 20px;
  --sv-text-input:     16px / 22px;
  --sv-text-pill:      13px / 18px;
  --sv-text-paragraph: 16px / 24px;
  --sv-text-list:      16px / 26px;
  --sv-text-card:      16px / 24px;
  --sv-text-body:      16px / 26px;
  --sv-text-cta:       15px / 22px;
  --sv-text-headline:  20px / 28px;
  --sv-text-subtitle:  28px / 36px;
  --sv-text-title:     44px / 52px;

  /* ── Radii ─────────────────────────────────────────────────────────── */
  --sv-radius-btn:  6px;
  --sv-radius-card: 14px;
  --sv-radius-pill: 999px;

  /* ── Spacing (8-pt grid) ──────────────────────────────────────────── */
  --sv-space-1:   8px;
  --sv-space-2:  16px;
  --sv-space-3:  24px;
  --sv-space-4:  32px;
  --sv-space-5:  40px;
  --sv-space-6:  48px;
  --sv-space-7:  56px;
  --sv-space-8:  64px;
  --sv-space-9:  80px;
  --sv-space-10: 96px;
}

/* ── Optional helper classes (use if not on Tailwind) ──────────────────── */

.sv-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 20px;
  font: var(--sv-fw-medium) var(--sv-text-cta) var(--sv-font-ui);
  letter-spacing: -0.01em;
  color: var(--sv-color-snow);
  background: var(--sv-color-petrol);
  border: 0;
  border-radius: var(--sv-radius-btn);
  cursor: pointer;
}

.sv-button[data-variant="secondary"] {
  background: var(--sv-color-snow);
  color: var(--sv-color-slate);
  border: 1px solid var(--sv-color-ash);
}

.sv-card {
  padding: 20px;
  background: var(--sv-color-snow);
  border: 1px solid var(--sv-color-ash);
  border-radius: var(--sv-radius-card);
}

.sv-pill {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 12px;
  font: var(--sv-fw-medium) var(--sv-text-pill) var(--sv-font-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--sv-color-pumice);
  color: var(--sv-color-slate);
  border-radius: var(--sv-radius-pill);
}

.sv-headline {
  font: var(--sv-fw-semibold) var(--sv-text-headline) var(--sv-font-ui);
  color: var(--sv-color-slate);
  letter-spacing: -0.01em;
}

.sv-body {
  font: var(--sv-fw-regular) var(--sv-text-body) var(--sv-font-ui);
  color: var(--sv-color-slate);
}