/* ============================================================
   Colors & Type
   Palette + typographic tokens.
   Import this file to get palette vars + typographic tokens.
   ============================================================ */

/* --- Fonts (Google Fonts fallbacks for Figma's Afacad/ABeeZee/Albert Sans) --- */
@import url("https://fonts.googleapis.com/css2?family=Afacad:wght@400;500;600;700&family=ABeeZee:ital@0;1&family=Albert+Sans:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700&display=swap");

/* ============================================================
   COLORS — Spring / Air (default, loads on :root)
   ============================================================ */
:root,
.palette-spring {
  /* Canvas */
  --page-bg: #FBFAF8;
  --ink: #1A1A1A;
  --ink-dark: #2A2A28;

  /* Five Pathways */
  --pathway-resale: #C3D3BE;       /* Spring Mist */
  --pathway-repair: #77854A;       /* Moss */
  --pathway-redistribute: #405D38; /* Evergreen */
  --pathway-remake: #0A615C;       /* Deep Ocean */
  --pathway-recycle: #1B3C12;      /* Leaves */

  /* Foregrounds on each tile (computed from luminance) */
  --pathway-resale-fg: #1A1A1A;
  --pathway-repair-fg: #F7F5ED;
  --pathway-redistribute-fg: #F7F5ED;
  --pathway-remake-fg: #F7F5ED;
  --pathway-recycle-fg: #F7F5ED;

  /* Semantic (driven by palette) */
  --bg:        var(--page-bg);
  --fg:        var(--ink);
  --fg-muted:  #6b6b6b;
  --card:      #ffffff;
  --border:    #d4d2ca;
  --border-strong: var(--ink);
  --input:     #d4d2ca;
  --ring:      #a0a098;
  --secondary: #efeee6;
  --accent:    #efeee6;
  --cream-dim: rgba(247, 245, 237, 0.45);
  --cream-soft:rgba(247, 245, 237, 0.90);

  /* Radii — sharp-cornered on purpose */
  --radius: 0;
  --radius-sm: 0;
  --radius-lg: 2px; /* rare — e.g. filter pill */

  /* Figma neutrals used in Style Guide */
  --stone-d5d9d2: #D5D9D2;
  --stone-cfe3e2: #CFE3E2;
  --sage-98ada1: #98ADA1;
  --moss-cbcd7a: #CBCD7A;
  --skin-fad7bb: #FAD7BB;
  --sun-ffe4a4:  #FFE4A4;
  --olive-93a18c:#93A18C;
  --tennis-adba5e:#ADBA5E;
  --court-65aac2:#65AAC2;
  --sea-33576e:  #33576E;
}

/* ============================================================
   EVERGREEN (alt v1 palette — original Figma working file)
   ============================================================ */
.palette-evergreen {
  --page-bg: #FAF8EA;
  --pathway-resale:       #CBCD7A;
  --pathway-repair:       #ADBA5E;
  --pathway-redistribute: #93A18C;
  --pathway-remake:       #EFF36D;
  --pathway-recycle:      #33576E;
  --pathway-resale-fg:       #1A1A1A;
  --pathway-repair-fg:       #1A1A1A;
  --pathway-redistribute-fg: #1A1A1A;
  --pathway-remake-fg:       #1A1A1A;
  --pathway-recycle-fg:      #FAF8EA;
  --bg: #FAF8EA; --fg: #1A1A1A;
}

/* ============================================================
   SUMMER / FIRE
   ============================================================ */
.palette-summer {
  --page-bg: #F8F8F8;
  --pathway-resale:       #3A8F5D;
  --pathway-repair:       #7285C1;
  --pathway-redistribute: #B7D1F2;
  --pathway-remake:       #F1F046;
  --pathway-recycle:      #EFB4D8;
  --pathway-resale-fg:       #F8F8F8;
  --pathway-repair-fg:       #F8F8F8;
  --pathway-redistribute-fg: #1A1A1A;
  --pathway-remake-fg:       #1A1A1A;
  --pathway-recycle-fg:      #1A1A1A;
  --bg: #F8F8F8; --fg: #1A1A1A;
}

/* ============================================================
   FALL / EARTH
   ============================================================ */
.palette-fall {
  --page-bg: #F2E8DC;
  --pathway-resale:       #93823A;
  --pathway-repair:       #5E3B35;
  --pathway-redistribute: #CCCFC8;
  --pathway-remake:       #EBBD9C;
  --pathway-recycle:      #DBC6B6;
  --pathway-resale-fg:       #F2E8DC;
  --pathway-repair-fg:       #F2E8DC;
  --pathway-redistribute-fg: #1A1A1A;
  --pathway-remake-fg:       #1A1A1A;
  --pathway-recycle-fg:      #1A1A1A;
  --bg: #F2E8DC; --fg: #1A1A1A;
}

/* ============================================================
   WINTER / WATER
   ============================================================ */
.palette-winter {
  --page-bg: #E6E6E6;
  --pathway-resale:       #E4E3BC;
  --pathway-repair:       #D5E3E8;
  --pathway-redistribute: #E8F5FA;
  --pathway-remake:       #E0DCD1;
  --pathway-recycle:      #344945;
  --pathway-resale-fg:       #1A1A1A;
  --pathway-repair-fg:       #1A1A1A;
  --pathway-redistribute-fg: #1A1A1A;
  --pathway-remake-fg:       #1A1A1A;
  --pathway-recycle-fg:      #E6E6E6;
  --bg: #E6E6E6; --fg: #1A1A1A;
}

html { transition: background-color 200ms ease, color 200ms ease; }

/* ============================================================
   TYPE SYSTEM
   Primary: Inter (used in production code) for UI.
   Display option: Albert Sans 800 — wordmark and marketing heroes.
   Editorial body: Afacad (Figma). Pantone chip type: ABeeZee (Figma).
   All are on Google Fonts.
   ============================================================ */
:root {
  --font-sans:       "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-display:    "Albert Sans", "Inter", system-ui, sans-serif;
  --font-editorial:  "Afacad", "Inter", system-ui, sans-serif;
  --font-chip:       "ABeeZee", "Inter", system-ui, sans-serif;
  --font-mono:       ui-monospace, "SF Mono", Menlo, monospace;

  /* Overline (the small-caps label above every section) */
  --overline-size: 10px;
  --overline-weight: 600;
  --overline-track: 0.15em;

  /* Semantic scale — built for desktop (~1522px) */
  --h-display: 800 80px/0.92 var(--font-display);   /* Wordmark, landing hero */
  --h-1:       700 54px/1.08 var(--font-sans);      /* Section hero (dark panels) */
  --h-2:       700 46px/1.10 var(--font-sans);      /* Section title */
  --h-3:       700 38px/1.20 var(--font-sans);      /* Swatch mega-figure */
  --h-4:       700 22px/1.10 var(--font-sans);      /* Card hero */
  --h-5:       600 16px/1.30 var(--font-sans);      /* Card title */
  --body-lg:   400 16px/1.55 var(--font-sans);
  --body:      400 13px/1.65 var(--font-sans);
  --body-sm:   400 12px/1.55 var(--font-sans);
  --label:     500 13px/1.20 var(--font-sans);      /* Nav item, pill */
  --caption:   400 11px/1.40 var(--font-sans);      /* Metadata, footnote */
  --pantone-code: 600 9px/1.20 var(--font-sans);    /* Letterspacing: 0.06em uppercase */
  --tick:      500 9px/1.20 var(--font-sans);       /* Tiniest axis ticks */

  /* Letterspacing tokens */
  --track-tight: -0.025em;
  --track-label: 0.05em;
  --track-wide:  0.08em;
}