/* ==========================================================================
   Uren Design System — colors_and_type.css
   Single source of truth for color tokens, type, spacing, radii, shadows.
   Import this once at the top of any HTML using the system.
   ========================================================================== */

/* ---------- Webfonts (via Google Fonts CDN; substitutes — see README) ---- */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap");

:root {
  /* ---------- Brand color wheel (sampled from logomark) ---------- */
  --uren-green:        #28AD67;
  --uren-green-light:  #9CCD6A;
  --uren-teal:         #1C8BA5;
  --uren-magenta:      #E5165C;
  --uren-orange:       #F47D2B;
  --uren-yellow:       #FFCA26;

  /* Hover/press shifts (8% / 12% darker — apply via color-mix where needed) */
  --uren-green-hover:        #218e55;
  --uren-teal-hover:          #14728a;
  --uren-magenta-hover:       #c4124e;
  --uren-orange-hover:        #d6691e;
  --uren-yellow-hover:        #e6b41a;
  --uren-green-light-hover:   #82b955;

  /* ---------- Neutrals (warm) ---------- */
  --ink:           #2A2A2A;
  --ink-soft:      #3F3F3F;
  --ink-muted:     #6B6B6B;
  --ink-faint:     #A8A39B;
  --line:          rgba(42, 42, 42, 0.08);
  --line-strong:   rgba(42, 42, 42, 0.16);
  --paper:         #F5F1EA;
  --paper-deep:    #EAE3D6;
  --paper-soft:    #FAF7F1;
  --white:         #FFFFFF;

  /* ---------- Semantic mapping ---------- */
  --bg:            var(--paper);
  --bg-elevated:   var(--white);
  --fg:            var(--ink);
  --fg-soft:       var(--ink-soft);
  --fg-muted:      var(--ink-muted);
  --accent:        var(--uren-green);   /* default lead hue — override per surface */
  --accent-on:     var(--white);
  --link:          var(--uren-teal);
  --focus-ring:    var(--uren-teal);
  --danger:        var(--uren-magenta);
  --warning:       var(--uren-orange);
  --success:       var(--uren-green);
  --info:          var(--uren-teal);

  /* ---------- Type families ---------- */
  --font-display: "Poppins", "Avenir Next", system-ui, sans-serif;
  --font-body:    "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif:   "Poppins", "Avenir Next", system-ui, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, monospace;

  /* ---------- Type scale (modular, 1.250) ---------- */
  --fs-12: 0.75rem;     /* 12px — micro, eyebrow */
  --fs-14: 0.875rem;    /* 14px — caption, label */
  --fs-16: 1rem;        /* 16px — body */
  --fs-18: 1.125rem;    /* 18px — large body, lead */
  --fs-20: 1.25rem;     /* 20px — h5 */
  --fs-24: 1.5rem;      /* 24px — h4 */
  --fs-30: 1.875rem;    /* 30px — h3 */
  --fs-36: 2.25rem;     /* 36px — h2 */
  --fs-48: 3rem;        /* 48px — h1 */
  --fs-60: 3.75rem;     /* 60px — hero display */
  --fs-72: 4.5rem;      /* 72px — XL hero display */

  /* ---------- Line heights ---------- */
  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-base:   1.55;
  --lh-loose:  1.75;

  /* ---------- Letter spacing ---------- */
  --ls-display: -0.02em;
  --ls-tight:   -0.01em;
  --ls-base:    0;
  --ls-wide:    0.04em;
  --ls-cap:     0.12em;   /* the "FOOD INGREDIENTS" tag treatment */

  /* ---------- Spacing (4px base) ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* ---------- Radii ---------- */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-pill: 999px;

  /* ---------- Shadows (warm, not blue) ---------- */
  --shadow-sm: 0 1px 2px rgba(42, 42, 42, 0.06);
  --shadow-md: 0 4px 12px rgba(42, 42, 42, 0.08);
  --shadow-lg: 0 12px 32px rgba(42, 42, 42, 0.10);
  --shadow-xl: 0 24px 48px rgba(42, 42, 42, 0.12);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --t-fast: 150ms;
  --t-base: 250ms;
  --t-slow: 400ms;

  /* ---------- Layout ---------- */
  --container: 1200px;
  --container-wide: 1440px;
}

/* ---------- Base resets & semantic element defaults ----------------------- */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ---------- Headings (semantic; can be re-used as utility classes) -------- */
.h-display, .display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(var(--fs-48), 5vw, var(--fs-72));
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--fg);
  margin: 0 0 var(--sp-6);
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(var(--fs-36), 4vw, var(--fs-48));
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--fg);
  margin: 0 0 var(--sp-6);
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-36);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--fg);
  margin: 0 0 var(--sp-4);
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-30);
  line-height: var(--lh-snug);
  color: var(--fg);
  margin: 0 0 var(--sp-3);
}

h4, .h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  color: var(--fg);
  margin: 0 0 var(--sp-3);
}

h5, .h5 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  color: var(--fg);
  margin: 0 0 var(--sp-2);
}

h6, .h6 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-16);
  line-height: var(--lh-snug);
  text-transform: uppercase;
  letter-spacing: var(--ls-cap);
  color: var(--fg-soft);
  margin: 0 0 var(--sp-2);
}

p {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-base);
  color: var(--fg-soft);
  margin: 0 0 var(--sp-4);
  text-wrap: pretty;
}

.lead, p.lead {
  font-size: var(--fs-18);
  line-height: var(--lh-loose);
  color: var(--fg);
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-12);
  font-weight: 600;
  letter-spacing: var(--ls-cap);
  text-transform: uppercase;
  color: var(--fg-muted);
  margin: 0 0 var(--sp-2);
}

.tagmark {
  /* "FOOD INGREDIENTS" tracked-out caps under the wordmark */
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: var(--ls-cap);
  text-transform: uppercase;
  font-size: var(--fs-12);
  color: var(--fg-soft);
}

a, .link {
  color: var(--link);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease-out);
}
a:hover, .link:hover {
  color: var(--uren-teal-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

code, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.95em;
}

small, .caption {
  font-size: var(--fs-14);
  color: var(--fg-muted);
}

/* ---------- Focus ring (consistent across components) -------------------- */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ---------- Selection ---------------------------------------------------- */
::selection {
  background: color-mix(in oklab, var(--uren-yellow) 60%, transparent);
  color: var(--ink);
}