/* ==========================================================================
   WebGrow — design tokens
   --------------------------------------------------------------------------
   1. EXISTING tokens: same names as the live site's :root (site.css) so the
      port is 1:1. Values for colour + --ease come from the brief.
      ⚠ --line, --line-strong and --r-sm/--r/--r-lg/--r-xl were not
      available at build time: the values below are stand-ins. When porting,
      keep the live site.css values for these six and delete this note.
   2. NEW tokens (prefixed in the comments with NEW): display font, eases,
      durations, glows, layout and type scale. Safe to add to site.css.
   ========================================================================== */

@font-face {
  font-family: "Inter";
  src: url("../assets/uploads/inter-v20-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Registered so the comparator + small wipes can glide with CSS transitions */
@property --p {
  syntax: "<number>";
  inherits: true;
  initial-value: 0.5;
}
@property --x {
  syntax: "<number>";
  inherits: true;
  initial-value: 50;
}
@property --wipe {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

:root {
  /* — 1. EXISTING (site.css) ————————————————————————————— */
  --ink: #0e0f13;
  --ink-2: #15161b;
  --ink-3: #1c1d24;
  --line: rgba(245, 243, 238, 0.08);        /* stand-in, see note */
  --line-strong: rgba(245, 243, 238, 0.16); /* stand-in, see note */
  --text: #f5f3ee;
  --muted: #a3a3ad;
  --faint: #85858f;
  --accent: #d5f59a;
  --accent-hi: #e4ffb4;
  --accent-ink: #16200d;
  --violet: #b9a1fa;
  --paper: #f4f2ed;
  --paper-ink: #16171b;
  --paper-muted: #5d5d66;
  --r-sm: 10px;  /* stand-in */
  --r: 16px;     /* stand-in */
  --r-lg: 24px;  /* stand-in */
  --r-xl: 32px;  /* stand-in */
  --ease: cubic-bezier(.22, .61, .36, 1);

  /* — 2. NEW ————————————————————————————————————————————— */
  /* type families */
  --font-display: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-ui: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* motion */
  --ease-emph: cubic-bezier(.16, 1, .3, 1);   /* long, soft landings */
  --ease-inout: cubic-bezier(.65, 0, .35, 1); /* wipes and sweeps */
  --dur-fast: 180ms;
  --dur: 360ms;
  --dur-slow: 800ms;

  /* light + material */
  --glow-olive: rgba(213, 245, 154, 0.085);
  --glow-violet: rgba(185, 161, 250, 0.065);
  --accent-soft: rgba(213, 245, 154, 0.14);
  --accent-glow: 0 0 18px rgba(213, 245, 154, 0.55);
  --device-bar: #191a20;
  --device-bezel: #0a0b0e;
  --shadow-device: 0 60px 120px -50px rgba(0, 0, 0, 0.9), 0 30px 50px -30px rgba(0, 0, 0, 0.65);
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");

  /* layout */
  --container: 1320px;
  --gutter: clamp(20px, 4.4vw, 64px);
  --col-gap: clamp(16px, 1.8vw, 24px);
  --header-h: 72px;
  --section-y: clamp(96px, 11vw, 160px);

  /* type scale (display sizes are serif, the rest Inter) */
  --fs-hero: clamp(3.4rem, 1.1rem + 6.2vw, 7rem);
  --fs-display: clamp(3.6rem, 0.6rem + 10.4vw, 11.5rem);
  --fs-h2: clamp(2.6rem, 1.1rem + 4.2vw, 5.25rem);
  --fs-h3: clamp(1.75rem, 1.3rem + 1.1vw, 2.25rem);
  --fs-lead: clamp(1.125rem, 1rem + 0.45vw, 1.375rem);
  --fs-body: 1.0625rem;  /* 17px */
  --fs-small: 0.9375rem; /* 15px — UI only, never body copy */
  --fs-label: 0.75rem;   /* 12px */
}

@media (max-width: 899px) {
  :root { --header-h: 64px; }
}