/* LCG Foods Design System, version 2. Foundations.
   Every value any output may use lives here. A template that needs a value not in this file
   is asking for a new foundation: raise it with the designer, do not hardcode it.
   Set data-surface on the root (slide, print, spread, social, web, app, email) and every role
   token below switches to that surface's ruler. Read DECISIONS.md before changing a number. */

@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:ital,wght@0,500;0,600;0,700;0,800;0,900;1,800;1,900&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  /* ─────────────────────────────── COLOUR ─────────────────────────────── */

  /* Brand. Unchanged from version 1. */
  --lime: #B2D235;          /* the logo lime. Fills, signals, text on ink. Never text on light */
  --green: #52731A;         /* text and emphasis on light. 5.0:1 on paper */
  --green-dark: #3E5713;    /* pressed, and green text on mint */
  --arrow-green: #91BE49;   /* The Next Big Thing mark only */
  --gold: #E0A400;          /* the one warm accent, a fill */
  --gold-text: #8A6800;     /* gold as text on light. 4.7:1 on paper (was #B58900, 2.9:1) */
  --canada-red: #D80621;    /* the Canadian Brand badge only */

  /* Tints. Derived from the brand colours, for grounds behind a block, never for text. */
  --lime-tint: #EEF5D2;
  --mint: #F2F6EA;
  --gold-tint: #FBF1D6;

  /* Neutrals. One warm ramp from paper to ink, so every grey belongs to the same family. */
  --white: #FFFFFF;
  --paper: #F4F4F2;         /* the default ground */
  --stone-50: #EDEDEA;      /* a quiet panel on paper */
  --stone-100: #E3E3DF;     /* hairline rules on paper */
  --stone-200: #CFCFCA;     /* stronger rules, disabled outlines */
  --stone-400: #9A9B95;     /* tertiary text on paper: item codes, footers. Large text only */
  --stone-600: #62645E;     /* secondary text. 5.6:1 on paper */
  --stone-800: #2E2F2B;     /* the dark panel that is not ink */
  --ink: #0A0A0A;           /* primary text, and the dark ground */

  /* On ink. */
  --on-ink: #FFFFFF;
  --on-ink-muted: rgba(255,255,255,0.64);
  --on-ink-rule: rgba(255,255,255,0.16);

  /* Status. Internal surfaces only (the wiki, the app, the readiness report). Never on a buyer piece. */
  --status-good: #356B1A;
  --status-good-tint: #E6F1DC;
  --status-wait: #7F5700;
  --status-wait-tint: #FAEFD2;
  --status-stop: #B3261E;
  --status-stop-tint: #F8E1DF;
  --status-info: #2F5D8A;
  --status-info-tint: #E1EAF3;

  /* Charts. In this order. Distinct in print, on screen and for the common colour blindnesses. */
  --chart-1: #52731A;
  --chart-2: #E0A400;
  --chart-3: #2E2F2B;
  --chart-4: #9DB86A;
  --chart-5: #7A8FA6;
  --chart-6: #C7C7C1;

  /* A brand partner's own colour, taken from its pack, may own the ground of a page about that
     brand. Set it per page. LCG Foods' grid, type and labels never change with it. */
  --partner: var(--stone-50);
  --on-partner: var(--ink);

  /* Programme colours, carried from version 1: Heard, Tried, Listed, Reordered. */
  --programme-heard: var(--green);
  --programme-tried: var(--gold);
  --programme-listed: var(--ink);
  --programme-reordered: var(--lime);

  /* ──────────────────────────────── TYPE ──────────────────────────────── */

  --font-display: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-text: 'Manrope', 'Helvetica Neue', Arial, sans-serif;
  /* Two modes from one family. Expressive surfaces (slide, social, web, print) set headings in
     Schibsted. Productive surfaces (app, email) set headings in Manrope and keep Schibsted for
     the title and the display line only. */
  --font-heading: var(--font-display);
  --hairline: 1px;

  /* Weights. Display is 900. Headings below the display size step down to 800, then 700,
     so the hierarchy is carried by size first and weight second. */
  --weight-display: 900;
  --weight-title: 800;
  --weight-heading: 700;
  --weight-text: 500;
  --weight-strong: 700;
  --weight-label: 700;

  /* Line heights. Tight for display, open for reading. */
  --leading-display: 0.92;
  --leading-title: 1.0;
  --leading-heading: 1.12;
  --leading-text: 1.5;
  --leading-label: 1.2;

  /* Tracking, as a share of the size, so it holds at every ruler. */
  --tracking-display: -0.035em;
  --tracking-title: -0.025em;
  --tracking-heading: -0.012em;
  --tracking-text: 0;
  --tracking-label: 0.08em;

  --measure: 64ch;          /* the longest a line of body copy may run */
  --measure-short: 44ch;    /* a lead or a pull quote */

  /* ─────────────────────────────── SPACE ──────────────────────────────── */

  /* One scale, base 4. Every margin, gap and padding is one of these, on every surface. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ──────────────────────────── MISBEHAVING ───────────────────────────── */

  /* The system's personality (decision 99). Everything sits on a strict grid, and then, here and
     there, one thing does not: a pack tilts and breaks out of its band, the tape sits crooked on the
     pack. The grid is what makes the misbehaving read as a choice. The rule, held by the parts
     lcg-misbehave and lcg-break and by build/check_design_system.py:
       on things that could be placed, stuck or held: packs, the tape, a sticker, a photo, a card;
       never on text read in lines, a table, a form, a button or navigation;
       one or two per view; never past 4 degrees; turns alternate; nothing is ever cropped. */
  --tilt-left: -3deg;
  --tilt-right: 2.5deg;
  --tilt-slight: -1.5deg;
  --break: var(--space-7);  /* how far a thing breaks out past its band's edge */

  /* ─────────────────────────── EDGES AND DEPTH ────────────────────────── */

  /* Square is the default. A corner rounds only where a person touches it, or on a tag. */
  --corner-none: 0;
  --corner-small: 2px;      /* inputs, table cells that highlight */
  --corner: 4px;            /* cards, panels, image frames */
  --corner-large: 8px;      /* app dialogs, social frames' inner panels */
  --corner-round: 999px;    /* tags and pills only; a button takes --corner-large (decision 98) */

  --rule: var(--hairline) solid var(--stone-100);
  --rule-strong: var(--hairline) solid var(--ink);
  --rule-heavy: 3px solid var(--ink);
  --rule-on-ink: var(--hairline) solid var(--on-ink-rule);

  /* One shadow for things that float in the app. Packs carry their own. Nothing else is shadowed. */
  --lift: 0 1px 2px rgba(10,10,10,0.06), 0 8px 24px -8px rgba(10,10,10,0.14);
  --pack-shadow: drop-shadow(0 18px 22px rgba(0,0,0,0.26)) drop-shadow(0 5px 7px rgba(0,0,0,0.14));
  --pack-shadow-small: drop-shadow(0 9px 11px rgba(0,0,0,0.22)) drop-shadow(0 3px 4px rgba(0,0,0,0.12));

  /* ─────────────────────────────── MOTION ─────────────────────────────── */
  /* Web, app and animated social only. One curve, three lengths. Nothing bounces. */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --duration-quick: 120ms;
  --duration: 240ms;
  --duration-slow: 480ms;
}

/* ───────────────────────────── RULERS ─────────────────────────────
   Role tokens. Every component uses these, so it moves between surfaces untouched.
   The type scale on each surface is a ratio from one body size, with one deliberate
   jump to display so a page has a single loud moment and everything else is quiet.

   size-display  the one loud line on a page or slide
   size-title    a page or slide title
   size-heading  a section or card heading
   size-lead     an opening paragraph, a large statement
   size-text     body copy
   size-small    captions, table text, footnotes
   size-label    kickers, tags, column heads (set in capitals, tracked)
   size-number   a stat
   grid-columns / grid-gutter / grid-margin  the column grid
*/

:root, [data-surface="web"] {
  --size-display: clamp(48px, 7.2vw, 112px);
  --size-title: clamp(34px, 4.2vw, 60px);
  --size-heading: clamp(22px, 2.1vw, 30px);
  --size-lead: clamp(19px, 1.5vw, 23px);
  --size-text: 17px;
  --size-small: 14px;
  --size-label: 12px;
  --size-number: clamp(44px, 5vw, 76px);
  --grid-columns: 12;
  --grid-gutter: clamp(16px, 2vw, 24px);
  --grid-margin: clamp(20px, 5vw, 80px);
  --section-gap: clamp(64px, 9vw, 128px);
  --block-gap: var(--space-6);
  --stack-gap: var(--space-3);
}
/* On a sharp screen a rule is half a pixel: one device pixel, the finest line the screen can draw
   (decision 98). Screens only; print keeps its half point. */
@media (min-resolution: 2dppx) {
  :root, [data-surface="web"], [data-surface="app"] { --hairline: 0.5px; }
}

[data-surface="slide"] {           /* 1920 × 1080 */
  --size-display: 176px;
  --size-title: 80px;
  --size-heading: 44px;
  --size-lead: 36px;
  --size-text: 28px;
  --size-small: 22px;
  --size-label: 18px;
  --size-number: 184px;
  --grid-columns: 12;
  --grid-gutter: 32px;
  --grid-margin: 96px;
  --section-gap: 96px;
  --block-gap: 48px;
  --stack-gap: 16px;
}

[data-surface="print"] {           /* US Letter, 8.5 × 11 in: 816 × 1056 at the browser's 96 per inch; bleed 12 (1/8 in), safe 36 (3/8 in). Decision 122 */
  --size-display: 72px;
  --size-title: 40px;
  --size-heading: 18px;
  --size-lead: 15px;
  --size-text: 11px;
  --size-small: 9px;
  --size-label: 8px;
  --size-number: 44px;
  --grid-columns: 12;
  --grid-gutter: 16px;
  --grid-margin: 48px;
  --section-gap: 40px;
  --block-gap: 24px;
  --stack-gap: 8px;
  --bleed: 12px;            /* 1/8 in */
  --hairline: 0.7px;        /* 0.5 pt */
  --page-width: 816px;      /* US Letter, portrait, 8.5 in: the page box a template is measured against and the */
  --page-height: 1056px;    /* paper it prints on, 11 in. Never scaled to print (decision 122, replaces 112's 0.96) */
  --page-foot: 28px;        /* the folio's distance from the bottom edge */
  --foot-room: 36px;        /* the air kept between a page's last group and its foot: a block gap and a half (decision 116) */
}

[data-surface="spread"] {          /* catalogue spread, two letter pages, 1700 × 1100 */
  --size-display: 96px;
  --size-title: 44px;
  --size-heading: 18px;
  --size-lead: 14px;
  --size-text: 10.5px;
  --size-small: 8.5px;
  --size-label: 7.5px;
  --size-number: 40px;
  --grid-columns: 24;
  --grid-gutter: 14px;
  --grid-margin: 48px;
  --section-gap: 32px;
  --block-gap: 20px;
  --stack-gap: 6px;
  --bleed: 12.5px;
  --hairline: 0.7px;
}

[data-surface="social"] {          /* 1080 × 1350, also 1080 square and 1080 × 1920 */
  --size-display: 148px;
  --size-title: 84px;
  --size-heading: 44px;
  --size-lead: 38px;
  --size-text: 30px;
  --size-small: 24px;
  --size-label: 22px;
  --size-number: 200px;
  --grid-columns: 4;
  --grid-gutter: 24px;
  --grid-margin: 72px;
  --section-gap: 64px;
  --block-gap: 40px;
  --stack-gap: 16px;
}

[data-surface="app"] {
  --font-heading: var(--font-text);             /* the wiki, the readiness report, the future Gibson app */
  --size-display: 40px;
  --size-title: 28px;
  --size-heading: 17px;
  --size-lead: 16px;
  --size-text: 14px;
  --size-small: 12.5px;
  --size-label: 11px;
  --size-number: 32px;
  --grid-columns: 12;
  --grid-gutter: 16px;
  --grid-margin: 32px;
  --section-gap: 40px;
  --block-gap: 24px;
  --stack-gap: 8px;
}

[data-surface="email"] {
  --font-heading: var(--font-text);           /* 600 wide. GoHighLevel's builder: no web fonts guaranteed */
  --size-display: 44px;
  --size-title: 32px;
  --size-heading: 20px;
  --size-lead: 18px;
  --size-text: 16px;
  --size-small: 13px;
  --size-label: 11px;
  --size-number: 40px;
  --grid-columns: 6;
  --grid-gutter: 16px;
  --grid-margin: 32px;
  --section-gap: 40px;
  --block-gap: 24px;
  --stack-gap: 8px;
}

/* ───────────────────────────── 2026-10-10 ─────────────────────────────
   The fusion: Design System 1's bold spots return beside version 2's restraint. One rounded band
   radius for the ink and lime bands, and the pill radius for the header bar. Print only uses
   these on the bands; everything else stays square. */
:root { --corner-band: 8px; }   /* 16 until decision 103: corners are small everywhere, 8 at most */