/* ============================================================
   JUNE — COLORS & TYPE
   Foundational design tokens for the June private-chef brand.
   Editorial neo-brutalist: warm paper, ink-black structure,
   ripe-produce accents, hard offset shadows, sharp corners.
   ============================================================ */

:root {
  /* --- OAT / GRAIN NEUTRALS (backgrounds & surfaces) --- */
  --paper-100: #FAF6EB;   /* raised cards, input fields, lightest */
  --paper-200: #F0E8D6;   /* base page background (grain/oat) */
  --paper-300: #E4D7BE;   /* recessed panels, hover wells */
  --paper-400: #D6C5A4;   /* soft warm dividers / inactive fills */

  /* Subtle film-grain overlay — gives surfaces a milled-grain tooth.
     Apply on a ::after at low opacity with mix-blend-mode: multiply. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* --- INK (text, borders, structure) --- */
  --ink-900: #080806;     /* primary text + all hard borders */
  --ink-700: #2B2720;     /* strong secondary text */
  --ink-500: #6B6456;     /* muted text, captions, labels */
  --ink-400: #8C8475;     /* placeholder, disabled text */
  --ink-line: rgba(8, 8, 6, 0.18);   /* hairline rules on paper */

  /* --- BRAND: SAUCE RED (primary action / identity) ---
     Appetite-stimulating warm tomato/chili red. */
  --sauce: #C92A1E;       /* primary brand + primary buttons */
  --sauce-700: #A4231A;   /* hover / pressed */
  --sauce-300: #F4CFC6;   /* soft red wells & tints */

  /* --- LEAF GREEN (retained: success + herb accents) --- */
  --leaf: #168047;        /* success / identity green */
  --leaf-700: #0B5830;    /* hover / pressed / success text */
  --leaf-300: #BCDDC8;    /* soft green wells & tints */

  /* --- PRODUCE ACCENTS (categorical, used sparingly) --- */
  --tomato: #E94624;      /* alert / error / step 1 / energy */
  --citrus: #F5B335;      /* highlight, focus, eyebrow, step 2 */
  --berry:  #9D1848;      /* deep accent / step 3 / premium */
  --olive:  #6E7B2E;      /* tertiary herb green (rare) */

  /* --- SEMANTIC ALIASES --- */
  --bg: var(--paper-200);
  --bg-deep: var(--paper-300);
  --surface: var(--paper-100);
  --brand: var(--sauce);
  --brand-strong: var(--sauce-700);
  --text: var(--ink-900);
  --text-muted: var(--ink-500);
  --border: var(--ink-900);
  --focus: var(--citrus);
  --success: var(--leaf-700);
  --danger: var(--tomato);
  --on-brand: #FFFAF0;    /* text/ink ON saturated brand fills */

  /* --- BORDERS & RADII (sharp is the signature) --- */
  --bw: 2px;                       /* standard structural border */
  --bw-thick: 3px;                 /* logo / heavy emphasis */
  --radius: 0px;                   /* June is square-cornered */
  --radius-pill: 999px;            /* only for status dots/chips */

  /* --- HARD OFFSET SHADOWS (the June stamp) --- */
  --shadow-sm: 3px 3px 0 var(--ink-900);
  --shadow-md: 6px 6px 0 var(--ink-900);
  --shadow-lg: 10px 10px 0 var(--ink-900);
  --shadow-citrus: 5px 5px 0 var(--citrus);   /* focus glow */
  --shadow-float: 0 28px 80px rgba(44, 32, 18, 0.14); /* hero imagery */

  /* --- SPACING SCALE (4px base) --- */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;

  /* --- MOTION --- */
  --ease: cubic-bezier(0.2, 0, 0.1, 1);
  --dur: 160ms;

  /* ============================================================
     TYPOGRAPHY
     One family, dramatic weight + size contrast.
     Helvetica Neue is the brand face; Arial is the safe fallback.
     A mono stack is reserved for the technical / robotics product.
     ============================================================ */
  --font-sans: "Helvetica Neue", "Helvetica", Arial, system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;

  --fw-medium: 500;   /* body copy */
  --fw-bold: 700;     /* UI emphasis */
  --fw-heavy: 850;    /* lede, sub-heads */
  --fw-black: 950;    /* display + headings */

  /* Type ramp (semantic sizes) */
  --t-display: clamp(56px, 9vw, 128px);
  --t-h1: clamp(40px, 5.5vw, 76px);
  --t-h2: clamp(30px, 3.6vw, 48px);
  --t-h3: clamp(22px, 2.4vw, 30px);
  --t-lede: clamp(20px, 2.1vw, 28px);
  --t-body-lg: 18px;
  --t-body: 16px;
  --t-small: 14px;
  --t-label: 12px;
}

/* ============================================================
   SEMANTIC ELEMENT DEFAULTS
   Apply .june-type to a root to opt into the type system,
   or lift these rules into product CSS.
   ============================================================ */
.june-type {
  font-family: var(--font-sans);
  color: var(--text);
  font-weight: var(--fw-medium);
  font-size: var(--t-body);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.june-type h1, .t-display {
  font-size: var(--t-display);
  font-weight: var(--fw-black);
  line-height: 0.84;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0;
}
.t-h1 {
  font-size: var(--t-h1);
  font-weight: var(--fw-black);
  line-height: 0.92;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0;
}
.t-h2 {
  font-size: var(--t-h2);
  font-weight: var(--fw-black);
  line-height: 0.96;
  letter-spacing: -0.005em;
  margin: 0;
}
.t-h3 {
  font-size: var(--t-h3);
  font-weight: var(--fw-heavy);
  line-height: 1.05;
  margin: 0;
}
.t-lede {
  font-size: var(--t-lede);
  font-weight: var(--fw-heavy);
  line-height: 1.12;
  margin: 0;
}
.t-body-lg { font-size: var(--t-body-lg); line-height: 1.5; }
.t-body    { font-size: var(--t-body);    line-height: 1.5; }
.t-small   { font-size: var(--t-small);   line-height: 1.45; color: var(--text-muted); }

/* Eyebrow / over-line / uppercase micro-label — a June signature */
.t-label, .june-type label {
  font-size: var(--t-label);
  font-weight: var(--fw-black);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1;
}

.t-mono {
  font-family: var(--font-mono);
  font-size: var(--t-small);
  letter-spacing: -0.01em;
}

/* ============================================================
   GRAIN OVERLAY
   Add class "june-grain" to a positioned container (or body)
   for a subtle milled-grain tooth over the paper.
   ============================================================ */
.june-grain { position: relative; }
.june-grain::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background-image: var(--grain);
  background-size: 180px 180px;
  opacity: 0.05;
  mix-blend-mode: multiply;
}