/* =============================================================
   Valico — Colours & Type
   Single source of truth for design tokens. Loaded by every
   preview card, UI kit, and slide. Mirrors output/design-tokens.css
   from the source codebase, with the addition of:
     - semantic role aliases (fg-1, bg-1, ...)
     - element-level resets (h1, h2, p, code, ...)
     - WCAG-AA-safe pairings only (lime/grass never carry text on white)
   ============================================================= */


/* ---------- Poppins (local woff2, full family) ---------- */
/* Google Fonts Poppins, latin subset only. 9 weights × 2 styles.
   Use 400 (body), 500 (UI), 600 (headlines), 700 (display).
   100/200/300/800/900 available for editorial extremes. */
@font-face { font-family: "Poppins"; src: url("./fonts/Poppins-100.woff2") format("woff2"); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("./fonts/Poppins-200.woff2") format("woff2"); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("./fonts/Poppins-300.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("./fonts/Poppins-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("./fonts/Poppins-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("./fonts/Poppins-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("./fonts/Poppins-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("./fonts/Poppins-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("./fonts/Poppins-900.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("./fonts/Poppins-100-italic.woff2") format("woff2"); font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("./fonts/Poppins-200-italic.woff2") format("woff2"); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("./fonts/Poppins-300-italic.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("./fonts/Poppins-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("./fonts/Poppins-500-italic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("./fonts/Poppins-600-italic.woff2") format("woff2"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("./fonts/Poppins-700-italic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("./fonts/Poppins-800-italic.woff2") format("woff2"); font-weight: 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("./fonts/Poppins-900-italic.woff2") format("woff2"); font-weight: 900; font-style: italic; font-display: swap; }


:root {
  /* ====== Brand hues ====== */
  --valico-grass:     #7dc404; /* logo identity only — never text on white */
  --valico-forest:    #16723d; /* primary text on light surfaces */
  --valico-lime:      #b2f432; /* CTA fill — pair with FOREST text only */
  --valico-sage:      #81a362; /* muted accent / illustration */
  --valico-mint:      #e9f3da; /* surface tint — frosted card, soft sections */
  --valico-sand:      #ddd4bc; /* warm neutral surface */
  --valico-ivory:     #f4efe6; /* cream warm — alt soft surface (climactic CTA band) */

  /* ====== Canvas + ink ====== */
  --valico-canvas:         #FAFAF8; /* page background, top strip */
  --valico-surface-lifted: #FFFFFF; /* lifted cards, modals, dropdowns */
  --valico-ink:            #181818; /* default body / nav */
  --valico-body:           #2B2B2B; /* longform body (slightly softer) */

  /* ====== Forest variants (states) ====== */
  --valico-forest-soft: #1f8a4d; /* hover lift */
  --valico-forest-deep: #0e5a2f; /* pressed depth */

  /* ====== Neutrals ====== */
  --valico-ink-80: #3A3A3A; /* secondary text */
  --valico-ink-60: #6B7280; /* tertiary text, captions */
  --valico-ink-40: #9CA3AF; /* placeholder text */
  --valico-ink-20: #C7CBD1; /* dividers */
  --valico-ink-10: #E6E8EB; /* hairlines, very light surfaces */
  --valico-ink-05: #F2F3F4; /* skeleton, hover row */

  /* ====== Semantic status (AA-checked on canvas) ====== */
  --status-success-fg: #166534; /* darker than forest for icon clarity */
  --status-success-bg: #DCFCE7;
  --status-warning-fg: #854D0E;
  --status-warning-bg: #FEF3C7;
  --status-danger-fg:  #991B1B;
  --status-danger-bg:  #FEE2E2;
  --status-info-fg:    #1E40AF;
  --status-info-bg:    #DBEAFE;


  /* =============================================================
     Semantic role aliases — prefer these in product code.
     ============================================================= */

  /* Backgrounds */
  --bg-page:           var(--valico-canvas);          /* the off-white the page rests on */
  --bg-lifted:         var(--valico-surface-lifted);  /* pure white — only for elevated cards/modals */
  --bg-mint:           var(--valico-mint);            /* soft brand-warmth section / frosted card */
  --bg-sand:           var(--valico-sand);            /* warm paper-feel alt section */
  --bg-row-hover:      var(--valico-ink-05);

  /* Foregrounds — by hierarchy */
  --fg-1: var(--valico-ink);     /* primary body / nav text on light surfaces */
  --fg-2: var(--valico-ink-80);  /* secondary text */
  --fg-3: var(--valico-ink-60);  /* tertiary, captions, helper text */
  --fg-4: var(--valico-ink-40);  /* placeholder, disabled */

  /* Accent foregrounds */
  --fg-headline: var(--valico-forest);       /* H1–H3 — the brand's editorial green */
  --fg-link:     var(--valico-forest);
  --fg-link-hover: var(--valico-forest-soft);
  --fg-link-pressed: var(--valico-forest-deep);

  /* CTA */
  --cta-fill:     var(--valico-lime);
  --cta-fill-hover: #c4ff48;
  --cta-fill-pressed: #a3e521;
  --cta-text:     var(--valico-forest);

  /* Borders */
  --border-hair:    var(--valico-ink-10);
  --border-default: var(--valico-ink-20);
  --border-focus:   var(--valico-forest);


  /* =============================================================
     Typography
     ============================================================= */
  --font-sans: "Poppins", -apple-system, BlinkMacSystemFont,
               "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --weight-body:     400;
  --weight-medium:   600; /* SemiBold — UI default for emphasis */
  --weight-headline: 700; /* Bold — large display only */

  /* Type scale (px, with rem fallback baked into element rules below) */
  --text-display:  56px; /* hero */
  --text-h1:       48px;
  --text-h2:       36px;
  --text-h3:       24px;
  --text-h4:       20px; /* added — useful for app UI section headers */
  --text-body-lg:  20px;
  --text-body:     17px;
  --text-body-sm:  15px;
  --text-caption:  14px; /* uppercase tracked label */
  --text-micro:    12px;

  --leading-display: 1.08;
  --leading-heading: 1.20;
  --leading-body:    1.55;

  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.06em;


  /* =============================================================
     Spacing
     ============================================================= */
  --space-0:  0;
  --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;


  /* =============================================================
     Radii
     ============================================================= */
  --radius-sm:   6px;   /* chips, inline tags */
  --radius-md:   12px;  /* cards, frosted hero card */
  --radius-lg:   20px;  /* hero shell, large surfaces */
  --radius-xl:   28px;  /* feature panels */
  --radius-pill: 999px; /* CTA, status pills */


  /* =============================================================
     Elevation
     ============================================================= */
  --shadow-sm: 0 1px 2px rgba(24, 24, 24, 0.04);
  --shadow-md: 0 4px 16px rgba(24, 24, 24, 0.06);
  --shadow-lg: 0 12px 32px rgba(24, 24, 24, 0.10);
  --shadow-cta-hover: 0 6px 16px rgba(178, 244, 50, 0.35);

  /* Focus ring — used on inputs, links, buttons */
  --focus-ring: 0 0 0 3px rgba(31, 138, 77, 0.28);


  /* =============================================================
     Motion
     ============================================================= */
  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);   /* default */
  --ease-in:       cubic-bezier(0.4, 0.0, 1.0, 1.0);
  --ease-out:      cubic-bezier(0.0, 0.0, 0.2, 1.0);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
}


:root { color-scheme: light; }


/* =============================================================
   Element resets — opinionated. Pull these in for plain HTML
   prototypes; UI kits with React component primitives override
   per-component as needed.
   ============================================================= */

html, body {
  background: var(--bg-page);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1, "liga" 1;
}

h1, h2, h3, h4 {
  color: var(--fg-headline);
  font-weight: var(--weight-medium);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--text-h1); line-height: var(--leading-heading); letter-spacing: var(--tracking-tight); }
h2 { font-size: var(--text-h2); line-height: var(--leading-heading); letter-spacing: var(--tracking-tight); }
h3 { font-size: var(--text-h3); line-height: 1.25; letter-spacing: var(--tracking-snug); }
h4 { font-size: var(--text-h4); line-height: 1.3; letter-spacing: var(--tracking-snug); }

.display {
  font-size: var(--text-display);
  font-weight: var(--weight-medium);
  line-height: var(--leading-display);
  letter-spacing: -0.015em;
  color: var(--fg-headline);
  margin: 0;
  text-wrap: balance;
}

p {
  margin: 0;
  color: var(--fg-1);
  text-wrap: pretty;
}

a {
  color: var(--fg-link);
  text-decoration: none;
  font-weight: var(--weight-medium);
  transition: color var(--duration-fast) var(--ease-standard);
}
a:hover  { color: var(--fg-link-hover); }
a:active { color: var(--fg-link-pressed); }

small, .caption {
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-3);
}

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}
code {
  background: var(--valico-mint);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  color: var(--valico-forest-deep);
}

hr {
  border: 0;
  border-top: 1px solid var(--border-hair);
  margin: var(--space-8) 0;
}

::selection {
  background: var(--valico-lime);
  color: var(--valico-forest);
}

:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 3px;
  border-radius: 4px;
}