/* ============================================================
   Canopy — Colors & Type Foundation
   ----------------------------------------------------------------
   The "Sand & Stone" palette: warm muted earth tones, restrained
   botanical pops. Two typefaces: Fraunces (variable serif) for
   display + numbers, DM Sans (humanist sans) for body + UI.
   Source of truth: reference/brand.md (mirrored from the
   live plants codebase, REL-57 / REL-61).
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400..700&family=DM+Sans:wght@300;400;500;600&display=swap");

:root {
  /* ----- Backgrounds — warm sand tones ----- */
  --bg-primary: #f6f2ec;        /* Page background — warm sand */
  --bg-secondary: #ece7df;      /* Section / grouped backgrounds */
  --bg-card: #fffefa;           /* Card surface — near-white with warmth */
  --bg-card-hover: #faf6f0;
  --bg-panel: #f1ece4;          /* Panels, drawers */

  /* ----- Text — deep stone greys ----- */
  --text-primary: #2c2926;      /* Headings, primary content */
  --text-secondary: #5e5854;    /* Supporting text, labels */
  --text-tertiary: #767169;     /* Captions, placeholders (AA) */

  /* ----- Accents — forest & oak (parent-brand cohesive) ----- */
  --accent-botanical: oklch(33% 0.09 162);       /* Hunter green — parent brand primary */
  --accent-botanical-mid: oklch(52% 0.08 162);   /* Sage mid — secondary */
  --accent-botanical-light: oklch(93% 0.025 162);
  --accent-terracotta: #8e6a50;      /* Warm oak — active tabs, focus rings */
  --accent-terracotta-light: #f2ebe3;
  --accent-charcoal: #2c2926;        /* Parent dark text/UI */
  --accent-glass-blue: #6b8290;      /* Muted glass blue accent */
  --accent-limestone: #d8cfbf;       /* Architectural neutral */

  /* ----- Pops of color (one semantic role each) ----- */
  --pop-coral:  #a45b48;        /* Blocking attention only */
  --pop-sage:   oklch(33% 0.09 162);        /* Data positive (= --accent-botanical) */
  --pop-ochre:  #9C6B1C;        /* Warning — Honey Amber */
  --pop-slate:  #5e7180;        /* Info — non-warning, non-blocking */
  --heat-warmth:#B95A2C;        /* Bottom-heat events — Ember */

  /* ----- Text extras ----- */
  --text-muted:    #8d8175;        /* Disabled / placeholder — lighter than tertiary */
  --text-on-dark:  #fffefa;        /* Text on dark accent backgrounds (botanical, coral buttons) */

  /* ----- Borders & shadows ----- */
  --edge:        #e0d8ce;
  --border-soft: #e8e0d5;
  --shadow-warm: rgba(44,41,38,.08);
  --shadow-warm-lg: rgba(60,50,40,.16);

  /* ----- Elevation scale (3 tiers — everything floats, strongly) ----- */
  --elev-1: 0 3px 10px rgba(44,41,38,.14);
  --elev-2: 0 6px 18px rgba(44,41,38,.18);
  --elev-3: 0 12px 36px rgba(44,41,38,.24);

  /* ----- Frosted glass surface (tab bar, overlays) ----- */
  --bg-primary-frosted: rgba(246, 242, 236, 0.95);

  /* ----- Pill variants — muted earth tones ----- */
  --pill-shade-bg:#dfe8e9; --pill-shade-text:#3d6068;
  --pill-sun-bg:  #f5edda; --pill-sun-text:  #6b5a2e;
  --pill-heat-bg: #f4e2da; --pill-heat-text: #7a3e22;
  --pill-cool-bg: #dce4f0; --pill-cool-text: #3a4e6a;
  --pill-zone-bg: #e8e2ee; --pill-zone-text: #4a3868;
  --pill-bee-bg:  #f5f0dd; --pill-bee-text:  #6a5a28;
  --pill-perennial-bg:#ddeae0; --pill-perennial-text:#2d5e3a;
  --pill-annual-bg:   #f4e4da; --pill-annual-text:  #7a3e22;

  /* ----- Tabs ----- */
  --tab-active:   var(--accent-terracotta);
  --tab-inactive: #9e9790;

  /* ----- Spacing scale ----- */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  /* ----- Radii ----- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 20px;
  --radius-full: 9999px;

  /* ----- Motion ----- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --transition-fast: 150ms var(--ease-out);
  --transition-base: 250ms var(--ease-out);
  --transition-slow: 400ms var(--ease-out);

  /* ----- Type families ----- */
  --font-display: "Fraunces", "Georgia", serif;
  --font-body:    "DM Sans", system-ui, -apple-system, sans-serif;

  /* ----- Semantic type tokens (mobile defaults) ----- */
  --type-display:      700 2rem/1.15  var(--font-display);   /* 32 */
  --type-h1:           700 1.5rem/1.2 var(--font-display);   /* 24 */
  --type-h2:           600 1.25rem/1.25 var(--font-display); /* 20 */
  --type-h3:           600 1.05rem/1.3 var(--font-display);  /* 17 */
  --type-body:         400 1rem/1.6   var(--font-body);      /* 16 */
  --type-body-sm:      400 .875rem/1.55 var(--font-body);    /* 14 */
  --type-caption:      500 .78rem/1.45 var(--font-body);     /* 12.5 */
  --type-label:        700 .72rem/1   var(--font-body);      /* 11.5 — UPPER */
  --type-numeric:      600 1rem/1.1   var(--font-display);   /* tabular feel */
  --type-latin:        400 italic .8rem/1.4 var(--font-display);
}

/* ============================================================
   Dark mode overrides — activated by class="dark" on <html>
   Every semantic token is re-bound to its dark equivalent.
   Raw hex (primitives) and --text-on-dark are intentionally
   NOT overridden here — they are always-constant values.
   Mirror shape: canopy-v2.css .dark blocks (§1-§8).
   ============================================================ */

html.dark {
  /* ----- Backgrounds ----- */
  --bg-primary:    oklch(18% 0.02 150);   /* deep dark canvas — v2-raw-ink-950 */
  --bg-secondary:  oklch(22% 0.02 150);   /* slightly lifted — v2-raw-ink-900 */
  --bg-card:       oklch(30% 0.02 150);   /* card surface — v2-raw-ink-800 */
  --bg-card-hover: oklch(33% 0.02 150);
  --bg-panel:      oklch(30% 0.02 150);

  /* ----- Text ----- */
  --text-primary:   oklch(98% 0.006 85);  /* warm near-white — v2-raw-linen-25 */
  --text-secondary: oklch(66% 0.02 150);  /* v2-raw-ink-400 */
  --text-tertiary:  oklch(58% 0.02 150);  /* v2-raw-ink-500 */
  --text-muted:     oklch(40% 0.02 150);  /* v2-raw-ink-700 */
  /* --text-on-dark: intentionally absent — always light regardless of theme */

  /* ----- Accents (brighter for legibility on dark) ----- */
  --accent-botanical:        oklch(60% 0.09 162);   /* v2-accent-botanical dark */
  --accent-botanical-mid:    oklch(52% 0.08 162);
  --accent-botanical-light:  oklch(24% 0.05 162);   /* tinted dark surface */
  --accent-terracotta:       oklch(62% 0.10 60);    /* v2-accent-terracotta dark */
  --accent-terracotta-light: oklch(30% 0.05 60);    /* tinted dark surface */
  --accent-charcoal:         oklch(98% 0.006 85);   /* near-white in dark */
  --accent-glass-blue:       oklch(62% 0.04 230);
  --accent-limestone:        oklch(30% 0.02 150);   /* dark neutral */

  /* ----- Pops (semantic roles preserved, brighter on dark) ----- */
  --pop-coral:   oklch(60% 0.10 25);   /* v2-pop-coral dark */
  --pop-sage:    oklch(60% 0.09 162);  /* v2-pop-sage dark */
  --pop-ochre:   oklch(62% 0.10 60);   /* v2-pop-ochre dark */
  --pop-slate:   oklch(62% 0.04 230);  /* v2-pop-slate dark */
  --heat-warmth: oklch(65% 0.12 40);   /* v2-heat-warmth dark */

  /* ----- Borders ----- */
  --edge:        oklch(40% 0.02 150);  /* v2-raw-ink-700 */
  --border-soft: oklch(30% 0.02 150);  /* v2-raw-ink-800 */

  /* ----- Shadows — pure black, two-layer per v2 dark spec ----- */
  --shadow-warm:    oklch(0% 0 0 / 0.30);
  --shadow-warm-lg: oklch(0% 0 0 / 0.35);
  --elev-1: 0 1px 3px oklch(0% 0 0 / 0.30), 0 1px 2px oklch(0% 0 0 / 0.20);
  --elev-2: 0 4px 12px oklch(0% 0 0 / 0.35), 0 2px 4px oklch(0% 0 0 / 0.25);
  --elev-3: 0 8px 24px oklch(0% 0 0 / 0.45), 0 4px 8px oklch(0% 0 0 / 0.30);

  /* ----- Frosted glass surface ----- */
  --bg-primary-frosted: oklch(18% 0.02 150 / 0.95);

  /* ----- Pills (dark tinted backgrounds, lighter text, same hue family) ----- */
  --pill-shade-bg:      oklch(30% 0.02 150);  --pill-shade-text:     oklch(66% 0.02 150);
  --pill-sun-bg:        oklch(28% 0.06 60);   --pill-sun-text:       oklch(62% 0.10 60);
  --pill-heat-bg:       oklch(28% 0.07 40);   --pill-heat-text:      oklch(65% 0.12 40);
  --pill-cool-bg:       oklch(26% 0.03 230);  --pill-cool-text:      oklch(62% 0.04 230);
  --pill-zone-bg:       oklch(30% 0.02 150);  --pill-zone-text:      oklch(66% 0.02 150);
  --pill-bee-bg:        oklch(28% 0.04 80);   --pill-bee-text:       oklch(65% 0.08 80);
  --pill-perennial-bg:  oklch(24% 0.05 162);  --pill-perennial-text: oklch(60% 0.09 162);
  --pill-annual-bg:     oklch(24% 0.025 180); --pill-annual-text:    oklch(62% 0.06 180);

  /* ----- Tabs ----- */
  --tab-active:   oklch(60% 0.09 162);  /* v2-pop-sage dark */
  --tab-inactive: oklch(58% 0.02 150);  /* v2-text-tertiary dark */
}

/* ----- Base type rules ----- */
body {
  font: var(--type-body);
  color: var(--text-primary);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1 { font: var(--type-h1); color: var(--text-primary); }
h2 { font: var(--type-h2); color: var(--text-primary); }
h3 { font: var(--type-h3); color: var(--text-primary); }

.eyebrow,
.label {
  font: var(--type-label);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.caption    { font: var(--type-caption); color: var(--text-tertiary); }
.latin      { font: var(--type-latin);   color: var(--text-secondary); }
.numeric    { font: var(--type-numeric); font-variant-numeric: tabular-nums; }