/* ============================================================
   Ingryd — Foundational tokens
   Personalized food scanner for GLP-1 therapy users.
   ============================================================ */

/* Plus Jakarta Sans — local brand font files */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("fonts/PlusJakartaSans-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("fonts/PlusJakartaSans-SemiBold.ttf") format("truetype");
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("fonts/PlusJakartaSans-Bold.ttf") format("truetype");
}

:root {
  /* -------- Brand palette (exact) -------- */
  --teal-900: #1F4544;        /* pressed / shadow tint */
  --teal-700: #2D5F5D;        /* PRIMARY — headings, body, primary buttons */
  --teal-500: #4A807E;        /* secondary text on cream */
  --teal-300: #9DBAB8;        /* dividers, muted accents */
  --teal-100: #DDE7E6;        /* surfaces, hairlines */
  --teal-050: #EEF3F2;        /* subtle fills */

  --coral-700: #C9614A;       /* coral pressed */
  --coral-500: #E8826B;       /* ACCENT — small CTAs, barcode dot, highlights */
  --coral-200: #F6CFC4;       /* coral tint surface */
  --coral-050: #FBEDE7;       /* coral wash */

  --cream:     #FAF7F2;       /* default BACKGROUND */
  --cream-100: #F3EEE5;       /* alt surface */
  --cream-200: #E9E2D4;       /* hairline on cream */

  --charcoal:  #1A1A1A;       /* deep contrast text */
  --ink-700:   #2C2C2C;       /* near-charcoal */
  --ink-500:   #5C5C5C;       /* muted body */
  --ink-300:   #9A9A9A;       /* placeholder */

  --white:     #FFFFFF;

  /* Food-score semantic colors (Ingryd's core utility) */
  --score-great: #3F8F6E;     /* green — aligned with phase */
  --score-good:  #7BAE7E;
  --score-ok:    #E6B547;     /* amber */
  --score-poor:  #E8826B;     /* coral re-used */
  --score-avoid: #B8463A;     /* deeper red-coral */

  /* -------- Semantic surface roles -------- */
  --bg:           var(--cream);
  --bg-elevated:  var(--white);
  --bg-sunken:    var(--cream-100);
  --bg-inverse:   var(--teal-700);

  --fg:           var(--teal-700);   /* default text */
  --fg-strong:    var(--charcoal);   /* deep contrast */
  --fg-muted:     var(--teal-500);
  --fg-subtle:    var(--ink-300);
  --fg-on-dark:   var(--cream);

  --accent:       var(--coral-500);
  --accent-press: var(--coral-700);
  --accent-wash:  var(--coral-050);

  --border:       var(--cream-200);
  --border-strong:var(--teal-300);
  --divider:      var(--teal-100);

  --focus-ring:   var(--coral-500);

  /* -------- Typography -------- */
  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-black:   800;

  /* Type scale — modular, slightly tighter than 1.25 */
  --fs-12: 12px;   /* caption / micro */
  --fs-14: 14px;   /* small UI */
  --fs-16: 16px;   /* body */
  --fs-18: 18px;   /* lead */
  --fs-20: 20px;   /* subhead */
  --fs-24: 24px;   /* h4 */
  --fs-32: 32px;   /* h3 */
  --fs-44: 44px;   /* h2 */
  --fs-60: 60px;   /* h1 */
  --fs-84: 84px;   /* display */

  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-base:  1.5;
  --lh-loose: 1.65;

  --tracking-tight: -0.02em;     /* display headings */
  --tracking-snug:  -0.01em;     /* h3/h4 */
  --tracking-normal: 0;
  --tracking-wide:  0.06em;      /* eyebrow / labels */
  --tracking-mega:  0.16em;      /* tiny all-caps */

  /* -------- Spacing scale (4px base) -------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;
  --s-32: 128px;

  /* -------- Radii -------- */
  --r-xs:  6px;
  --r-sm:  10px;
  --r-md:  14px;   /* default cards */
  --r-lg:  20px;
  --r-xl:  28px;   /* large surfaces, sheets */
  --r-2xl: 36px;
  --r-pill: 999px;

  /* -------- Shadows (warm, low-contrast — never harsh) -------- */
  --shadow-xs: 0 1px 0 rgba(31, 69, 68, 0.04);
  --shadow-sm: 0 1px 2px rgba(31, 69, 68, 0.06), 0 1px 1px rgba(31, 69, 68, 0.04);
  --shadow-md: 0 6px 16px -8px rgba(31, 69, 68, 0.18), 0 2px 4px rgba(31, 69, 68, 0.05);
  --shadow-lg: 0 22px 40px -22px rgba(31, 69, 68, 0.28), 0 6px 12px -8px rgba(31, 69, 68, 0.08);
  --shadow-inset: inset 0 0 0 1px rgba(45, 95, 93, 0.08);

  /* -------- Motion -------- */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);   /* default */
  --ease-soft:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1);   /* gentle overshoot */
  --d-fast:   140ms;
  --d-base:   220ms;
  --d-slow:   420ms;
}

/* ============================================================
   Semantic element styles
   Apply by class or wrap with .ingryd-prose for default p/h
   ============================================================ */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.display, h1.display {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: clamp(48px, 6vw, var(--fs-84));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--teal-700);
  text-wrap: balance;
}

h1, .h1 {
  font-weight: var(--fw-bold);
  font-size: clamp(40px, 4.5vw, var(--fs-60));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--teal-700);
  text-wrap: balance;
}

h2, .h2 {
  font-weight: var(--fw-bold);
  font-size: clamp(32px, 3vw, var(--fs-44));
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--teal-700);
  text-wrap: balance;
}

h3, .h3 {
  font-weight: var(--fw-bold);
  font-size: var(--fs-32);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--teal-700);
}

h4, .h4 {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--teal-700);
}

.eyebrow {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-mega);
  text-transform: uppercase;
  color: var(--coral-500);
}

.lead {
  font-size: var(--fs-20);
  line-height: var(--lh-loose);
  color: var(--teal-700);
  font-weight: var(--fw-regular);
}

p, .body {
  font-size: var(--fs-16);
  line-height: var(--lh-loose);
  color: var(--teal-700);
  font-weight: var(--fw-regular);
}

.small {
  font-size: var(--fs-14);
  line-height: var(--lh-base);
  color: var(--teal-500);
}

.caption {
  font-size: var(--fs-12);
  line-height: var(--lh-base);
  color: var(--teal-500);
  letter-spacing: var(--tracking-wide);
}

strong, .emph {
  font-weight: var(--fw-semibold);
  color: var(--teal-700);
}

a {
  color: var(--coral-500);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color var(--d-fast) var(--ease-out);
}
a:hover { color: var(--coral-700); }

/* Numeric / tabular displays (food scores) */
.numeric {
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-variant-numeric: tabular-nums;
}

::selection {
  background: var(--coral-200);
  color: var(--teal-900);
}