/* =====================================================================
   EcoField AI — Design Tokens
   Source of truth: frontend/src/constants/colors.ts in the EcoField repo.
   The app ships TWO themes: Light (default, organic & earthy) and
   Eco (OLED-black + neon green, used for low-power / battery-saver mode).
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ---------- Light theme (default — matches the app's LightTheme) ----- */
:root,
[data-theme="light"] {
  /* Backgrounds */
  --bg-primary:   #F6F7F5;            /* page — warm bone */
  --bg-secondary: #FFFFFF;            /* card / surface */
  --bg-overlay:   rgba(45, 55, 43, 0.4); /* modal scrim — forest tinted */

  /* Brand */
  --brand-primary:       #7A8B76;     /* sage — main CTAs, active tabs */
  --brand-primary-light: #D0D5CE;     /* muted sage — disabled, inactive */
  --brand-secondary:     #B5A397;     /* warm taupe — secondary accents */
  --brand-accent:        #98C9A3;     /* mint — highlights, leaf icons, XP */

  /* Foreground / text */
  --fg-primary:   #2D372B;            /* forest near-black */
  --fg-secondary: #5C6A58;            /* moss */
  --fg-inverse:   #FFFFFF;
  --fg-muted:     #7A8B76;            /* same as brand sage */

  /* Semantic state */
  --state-success: #7A8B76;           /* sage */
  --state-warning: #E8B273;           /* warm honey */
  --state-error:   #D96C6C;           /* dusty rose */

  /* Card */
  --card-border: #F0F2EF;             /* hairline */

  /* Convenience aliases used throughout cards */
  --fg-1: var(--fg-primary);
  --fg-2: var(--fg-secondary);
  --fg-3: var(--fg-muted);
  --bg-0: var(--bg-primary);
  --bg-1: var(--bg-secondary);
  --eco:  var(--brand-primary);
  --eco-light: var(--brand-accent);
}

/* ---------- Eco / dark theme (matches the app's EcoTheme) ----------- */
[data-theme="eco"] {
  --bg-primary:   #000000;            /* OLED black */
  --bg-secondary: #1C2519;            /* near-black green */
  --bg-overlay:   rgba(0, 0, 0, 0.7);

  --brand-primary:       #66FF66;     /* neon eco green */
  --brand-primary-light: #2A4A2A;     /* dark muted green (for inactive) */
  --brand-secondary:     #98C9A3;
  --brand-accent:        #00FF00;

  --fg-primary:   #FFFFFF;
  --fg-secondary: #D0D5CE;
  --fg-inverse:   #000000;
  --fg-muted:     #7A8B76;

  --state-success: #66FF66;
  --state-warning: #FFCC00;
  --state-error:   #FF4444;

  --card-border: #2A4A2A;

  --fg-1: var(--fg-primary);
  --fg-2: var(--fg-secondary);
  --fg-3: var(--fg-muted);
  --bg-0: var(--bg-primary);
  --bg-1: var(--bg-secondary);
  --eco:  var(--brand-primary);
  --eco-light: var(--brand-accent);
}

/* ===================== Typography ===================================== */
:root {
  --font-sans: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale — from app's StyleSheets (auth, home, onboarding screens) */
  --type-display:    36px;            /* hero / onboarding title */
  --type-h1:         28px;            /* screen titles, modal titles */
  --type-h2:         24px;            /* section heads */
  --type-h3:         20px;            /* card titles */
  --type-body-lg:    16px;            /* primary body, button text */
  --type-body:       15px;            /* default text */
  --type-body-sm:    14px;            /* secondary body */
  --type-caption:    13px;            /* card captions */
  --type-meta:       12px;            /* meta, footer */
  --type-eyebrow:    11px;            /* uppercase labels */

  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-black:     800;            /* used on titles, level numbers, CTAs */

  --tracking-tight:   -0.04em;        /* display */
  --tracking-snug:    -0.01em;        /* headings */
  --tracking-normal:   0;
  --tracking-wide:     0.05em;        /* labels in input groups */
  --tracking-eyebrow:  0.16em;        /* eyebrows */

  --line-tight:  1.1;
  --line-snug:   1.25;
  --line-normal: 1.5;
}

/* ===================== Spacing ======================================== */
:root {
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
}

/* ===================== Radii ========================================== */
:root {
  --radius-xs:   8px;
  --radius-sm:  12px;                  /* inputs, small tags */
  --radius-md:  16px;                  /* default cards (feature cards, error box) */
  --radius-lg:  20px;                  /* level card, hero card */
  --radius-xl:  24px;                  /* daily reward modal */
  --radius-2xl: 28px;                  /* setup-camp modal */
  --radius-pill: 50px;                 /* CTAs (primary buttons) */
  --radius-full: 999px;                /* avatar circles, badges */
}

/* ===================== Shadows ======================================== */
:root {
  /* Elevation system — app uses subtle drops, never aggressive */
  --shadow-sm:    0 2px 8px rgba(45, 55, 43, 0.08);                            /* iconWrap on auth */
  --shadow-md:    0 4px 12px rgba(45, 55, 43, 0.10);                           /* feature cards */
  --shadow-lg:    0 4px 12px rgba(45, 55, 43, 0.10), 0 2px 4px rgba(45,55,43,0.04);
  --shadow-cta:   0 4px 8px rgba(122, 139, 118, 0.30);                         /* primary CTA — sage tinted */
  --shadow-cta-eco: 0 0 15px rgba(102, 255, 102, 0.20);                        /* primary CTA in eco mode */
}

/* ===================== Motion ========================================= */
:root {
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;
}

/* ===================== Semantic helpers =============================== */
.eyebrow {
  font: var(--weight-bold) var(--type-eyebrow)/1 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--brand-primary);
}

h1, .h1 {
  font: var(--weight-black) var(--type-display)/var(--line-tight) var(--font-sans);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
}

h2, .h2 {
  font: var(--weight-black) var(--type-h1)/var(--line-snug) var(--font-sans);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-primary);
}

h3, .h3 {
  font: var(--weight-bold) var(--type-h3)/var(--line-snug) var(--font-sans);
  color: var(--fg-primary);
}

p, .body {
  font: var(--weight-regular) var(--type-body)/var(--line-normal) var(--font-sans);
  color: var(--fg-secondary);
}

.caption {
  font: var(--weight-regular) var(--type-caption)/var(--line-normal) var(--font-sans);
  color: var(--fg-muted);
}

code, .mono {
  font: var(--weight-regular) var(--type-body-sm)/var(--line-normal) var(--font-mono);
}