/* GENERATED by scripts/theme-json.mjs. Do not edit.
 *
 * Every design token, copied from src/styles/tokens/ so that this theme speaks the same
 * vocabulary as the front end rather than a renamed one. Run `npm run theme` after any
 * change under src/styles/tokens/ or src/styles/theme.css;
 * `npm run theme -- --check` is what the gate runs.
 */

/* Finferno webfonts — extracted from the production site bundle (Google Fonts builds). */
/* Display: Bricolage Grotesque (variable, wght 400–600 in use, opsz/wdth default) */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:400 600;font-stretch:100%;font-display:swap;src:url("../assets/fonts/bricolage-grotesque-latin.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:400 600;font-stretch:100%;font-display:swap;src:url("../assets/fonts/bricolage-grotesque-latin-ext.woff2") format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* Text: Inter (variable, wght 400–700 in use) */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url("../assets/fonts/inter-latin.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url("../assets/fonts/inter-latin-ext.woff2") format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* colors.css */
/* Finferno colors. Warm bone paper, near-black ink, one ember red accent, earthy produce tints. */
:root{
  /* --- Base: ink --- */
  --ink:#1E1A15;              /* brand near-black: type, dark surfaces, primary buttons */
  --ink-deep:#120F0C;         /* film-gradient / overlay black */
  --ink-raised:#26211B;       /* raised surface on dark */
  --ink-hover:#3A322A;        /* primary button hover */
  --ink-word:#38312B;         /* giant footer wordmark on ink */

  /* --- Base: bone (warm off-white paper) --- */
  --bone:#EBEAE4;             /* page background */
  --bone-2:#F5F3ED;           /* recessed chip / ghost button fill */
  --bone-3:#F6F4EE;           /* type on ink, light button on ink */
  --bone-4:#F3F1EA;           /* product media plate */
  --white:#FFFFFF;            /* card surface */

  /* --- Base: warm greys --- */
  --grey-1:#4A4238;           /* secondary body text on bone */
  --grey-2:#77716A;           /* tertiary / mono meta */
  --grey-3:#8A8378;           /* eyebrow labels, muted */
  --grey-4:#9A948B;           /* legal links on ink */
  --grey-5:#C1BCB2;           /* body text on ink */

  /* --- Base: lines --- */
  --line:#D6D2C8;             /* default hairline / control border */
  --line-soft:#E4E0D6;        /* inner hairline on white */
  --line-strong:#C7C2B7;      /* underline decoration, empty heat pip */
  --line-on-ink:rgba(235,234,228,0.14);
  --line-on-ink-soft:rgba(235,234,228,0.09);

  /* --- Accent: ember --- */
  --ember:#C0392B;            /* the single accent: heat, cart count, map pin, % fill */

  /* --- Chili accents (per product family) --- */
  --chili-red:#B23A26;        /* cayenne, fermented red sauce */
  --chili-ghost:#8E2B1E;      /* naga / bhut jolokia */
  --chili-gochu:#B4552D;      /* gochugaru */
  --chili-ancho:#7A4A38;      /* ancho / poblano */
  --chili-jalapeno:#6D7C4F;   /* green jalapeño */

  /* --- Produce tints (card media plates behind cutouts) --- */
  --tint-red:#E7D1C7;
  --tint-crimson:#EBD6CD;
  --tint-amber:#E9DACB;
  --tint-clay:#E4D5CC;
  --tint-green:#E2E4D3;

  /* --- Nordic slate (decorative orbit rings, dashed guides) --- */
  --slate:#3A3A40;

  /* --- Semantic aliases --- */
  --text-strong:var(--ink);
  --text-body:var(--grey-1);
  --text-muted:var(--grey-2);
  --text-label:var(--grey-3);
  --text-on-ink:var(--bone);
  --text-body-on-ink:var(--grey-5);
  --text-muted-on-ink:var(--grey-2);

  --surface-page:var(--bone);
  --surface-card:var(--white);
  --surface-recessed:var(--bone-2);
  --surface-plate:var(--bone-4);
  --surface-ink:var(--ink);
  --surface-ink-raised:var(--ink-raised);

  --border-default:var(--line);
  --border-subtle:var(--line-soft);
  --border-decor:var(--line-strong);

  --action-fill:var(--ink);
  --action-fill-hover:var(--ink-hover);
  --action-label:var(--bone);
  --action-ghost-fill:var(--bone-2);
  --action-ghost-border:var(--line);
  --action-on-ink-fill:var(--bone-3);
  --action-on-ink-label:var(--ink);

  --accent:var(--ember);
  --heat-on:var(--ember);
  --heat-off:var(--line-strong);
}

/* radii.css */
/* Finferno radii. Cards are generously rounded (20px); every button and input is a full pill (32px). */
:root{
  --radius-film:3px;      /* pinned scrub photo frame — deliberately almost square */
  --radius-xs:7px;        /* heat tooltip */
  --radius-sm:8px;        /* video thumbnail */
  --radius-2:9px;         /* caption capsule */
  --radius-md:12px;       /* marquee token */
  --radius-lg:14px;       /* video teaser card */
  --radius-card:20px;     /* THE card radius — product, category, tile, advantage, newsletter */
  --radius-card-lg:24px;  /* large B2B image panel */
  --radius-pill:32px;     /* all buttons, all inputs */
  --radius-round:50%;     /* icon buttons, stamps, pips */
}

/* elevation.css */
/* Finferno elevation. Shadows are warm-brown-tinted (rgba(40,33,24,…)), never neutral black, and always
   large-blur / low-opacity — the paper lifts, it does not float. No inner shadows anywhere. */
:root{
  --shadow-control:0 4px 16px rgba(40,33,24,0.06);    /* circular icon buttons */
  --shadow-control-strong:0 4px 16px rgba(40,33,24,0.10);
  --shadow-soft:0 12px 30px rgba(40,33,24,0.06);      /* video teaser card */
  --shadow-thumb:0 10px 26px rgba(40,33,24,0.18);     /* small dark thumbnail */
  --shadow-card:0 18px 44px rgba(40,33,24,0.07);      /* THE card shadow */
  --shadow-card-hover:0 26px 54px rgba(40,33,24,0.11);
  --shadow-portrait:0 30px 60px rgba(40,33,24,0.14);  /* founder photo */
  --shadow-panel:0 30px 70px rgba(40,33,24,0.22);     /* newsletter panel */
  --shadow-film:0 30px 70px rgba(40,33,24,0.28);      /* pinned scrub frame */
  --shadow-on-ink:0 34px 70px rgba(0,0,0,0.42);       /* image panel inside a dark section */
  --focus-ring:0 0 0 2px var(--ink); /* @kind shadow */

  /* Protection gradients — used instead of scrims wherever type sits on photography */
  --grad-tile:linear-gradient(175deg,rgba(20,15,11,0.1) 0%,rgba(20,15,11,0.5) 55%,rgba(20,15,11,0.85) 100%); /* @kind other */
  --grad-film:linear-gradient(to top,rgba(18,15,12,0.94) 0%,rgba(18,15,12,0.55) 26%,rgba(18,15,12,0) 60%); /* @kind other */
  --grad-panel:linear-gradient(197deg,rgba(18,15,12,0.05) 32%,rgba(18,15,12,0.72) 100%); /* @kind other */
  --grad-newsletter:linear-gradient(105deg,rgba(18,15,12,0.92) 0%,rgba(18,15,12,0.72) 42%,rgba(18,15,12,0.28) 100%); /* @kind other */

  /* Sticky header, once scrolled */
  --header-scrolled-bg:rgba(235,234,228,0.92); /* @kind color */
  --header-scrolled-blur:blur(10px); /* @kind other */
}

/* typography.css */
/* Finferno typography. Two families: Bricolage Grotesque display, Inter text. Mono is system ui-monospace. */
:root{
  --font-display:'Bricolage Grotesque',sans-serif;
  --font-text:'Inter',sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,monospace;

  /* Display scale — always Bricolage, weight 400 (500 for pinned scrub titles) */
  --type-hero:clamp(58px,6.8vw,112px);      /* h1, line-height .9, tracking -.02em */
  --type-section:clamp(40px,4.6vw,72px);    /* h2, line-height .78–.92, tracking .005em */
  --type-display-md:clamp(24px,1.9vw,30px); /* advantage-card heading, lh 1.05 */
  --type-display-sm:clamp(21px,1.9vw,28px); /* media-tile title, lh 1 */
  --type-card-title:22px;                   /* category card, lh 1.05 */
  --type-card-title-sm:21px;                /* product card, lh 1.1 */
  --type-stat:clamp(28px,2.3vw,40px);       /* stat value, lh .95 */
  --type-pull:clamp(20px,2vw,29px);         /* italic founder pull-quote, lh 1.32 */

  /* Text scale — Inter */
  --type-lede:clamp(15px,1.3vw,18px);       /* section lede, lh 1.55 */
  --type-body-lg:16.5px;                    /* long-form paragraph, lh 1.65 */
  --type-body:clamp(15px,1.2vw,17px);       /* default paragraph, lh 1.62–1.65 */
  --type-body-sm:14px;                      /* card copy, lh 1.5–1.55 */
  --type-body-xs:13.5px;                    /* composition line, lh 1.5 */
  --type-nav:14px;                          /* nav + button label, weight 600 */
  --type-meta:12.5px;                       /* video sub-line */
  --type-eyebrow:11px;                      /* uppercase label, tracking 2px */
  --type-chip:10px;                         /* pill/badge label, tracking 1.4px */
  --type-mono:10.5px;                       /* mono caption */

  --lh-tight:0.9; /* @kind spacing */
  --lh-display:1.05; /* @kind spacing */
  --lh-snug:1.32; /* @kind spacing */
  --lh-normal:1.5; /* @kind spacing */
  --lh-body:1.65; /* @kind spacing */

  --track-hero:-0.02em; /* @kind spacing */
  --track-display:0.005em; /* @kind spacing */
  --track-eyebrow:2px; /* @kind spacing */
  --track-chip:1.4px; /* @kind spacing */
  --track-label:1.6px; /* @kind spacing */
  --track-caps:1px; /* @kind spacing */

  --weight-regular:400; /* @kind font */
  --weight-medium:500; /* @kind font */
  --weight-semibold:600; /* @kind font */
  --weight-bold:700; /* @kind font */
}

/* spacing.css */
/* Finferno spacing. Fluid page gutter, generous vertical section rhythm, a single 22px grid gap. */
:root{
  --space-1:4px;
  --space-2:6px;
  --space-3:9px;
  --space-4:10px;
  --space-5:12px;
  --space-6:14px;
  --space-7:18px;
  --space-8:22px;   /* the grid gap, everywhere */
  --space-9:26px;
  --space-10:34px;
  --space-11:44px;
  --space-12:64px;

  /* Page frame */
  --gutter:clamp(28px,5vw,82px); /* @kind spacing */
  --grid-gap:22px; /* @kind spacing */

  /* Vertical rhythm */
  --section-y:clamp(72px,10vh,120px); /* @kind spacing */       /* standard section top padding */
  --section-y-lg:clamp(88px,13vh,150px); /* @kind spacing */    /* editorial / story sections */
  --heading-gap:clamp(32px,4vh,48px); /* @kind spacing */       /* heading block → content grid */
  --stack-gap:clamp(20px,3vh,32px); /* @kind spacing */         /* hero copy stack */

  /* Component padding */
  --card-pad:20px 22px; /* @kind spacing */                     /* product / category card body */
  --card-pad-lg:36px 34px; /* @kind spacing */                  /* advantage card */
  --tile-pad:clamp(24px,2.2vw,38px); /* @kind spacing */        /* media tile inner */
  --btn-pad:17px 34px; /* @kind spacing */                      /* primary pill */
  --btn-pad-sm:13px 20px; /* @kind spacing */                   /* ghost pill */
  --chip-pad:6px 11px; /* @kind spacing */
  --header-pad:14px var(--gutter); /* @kind spacing */

  /* Control sizes */
  --control-sm:36px;   /* inline arrow circle */
  --control-md:40px;   /* header icon button */
  --control-lg:50px;   /* carousel arrow */
  --control-xl:56px;   /* rail arrow */
  --control-2xl:84px;  /* footer back-to-top */

  /* Card widths */
  --card-w-cat:clamp(260px,24vw,330px); /* @kind spacing */
  --card-min-product:250px;
  --card-min-content:280px;
  --card-min-tile:290px;
  --card-min-advantage:300px;
}

/* motion.css */
/* Finferno motion. Long, weighted easing — nothing bounces except one deliberate map-pin drop.
   Every animated block honours prefers-reduced-motion. */
:root{
  /* Easings */
  --ease-out-soft:cubic-bezier(.22,.7,.24,1); /* @kind other */   /* default: hovers, lifts, scroll-ins */
  --ease-expo:cubic-bezier(.16,1,.3,1); /* @kind other */         /* carousel slide + pepper scatter */
  --ease-reveal:cubic-bezier(0.76,0,0.24,1); /* @kind other */    /* clip-path image reveals */
  --ease-draw:cubic-bezier(.65,0,.35,1); /* @kind other */        /* SVG line-draw on hover */
  --ease-pin:cubic-bezier(.34,1.5,.5,1); /* @kind other */        /* the one overshoot: pin drop */

  /* Durations */
  --dur-fast:0.2s; /* @kind other */      /* tooltips */
  --dur-hover:0.25s; /* @kind other */    /* button fills */
  --dur-base:0.35s; /* @kind other */     /* colour + header transitions */
  --dur-lift:0.5s; /* @kind other */      /* card lift */
  --dur-media:0.8s; /* @kind other */     /* image zoom inside a card */
  --dur-slide:0.95s; /* @kind other */    /* carousel */
  --dur-draw:1.15s; /* @kind other */     /* SVG stroke draw */
  --dur-reveal:1.6s; /* @kind other */    /* clip-path curtain */
  --dur-reveal-img:2.4s; /* @kind other *//* the scale-down behind the curtain */

  /* Recurring transition shorthands */
  --t-hover:background var(--dur-hover) ease,color var(--dur-hover) ease,border-color var(--dur-hover) ease; /* @kind other */
  --t-lift:transform var(--dur-lift) var(--ease-out-soft),box-shadow var(--dur-lift) ease; /* @kind other */
  --t-media:transform var(--dur-media) var(--ease-out-soft); /* @kind other */

  /* Signature moves, verbatim */
  --hover-lift:translateY(-4px); /* @kind other */      /* advantage card */
  --hover-lift-card:translateY(-6px); /* @kind other */ /* category card */
  --hover-zoom:scale(1.05); /* @kind other */           /* product image */
  --hover-zoom-cat:scale(1.06); /* @kind other */       /* category image */
  --marquee-dur:30s; /* @kind other */
  --stamp-dur:26s; /* @kind other */
}
@keyframes fn-marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes fn-stamp-spin{to{transform:rotate(360deg)}}
@keyframes fn-pulse-dot{0%{transform:scale(0.6);opacity:0.9}70%{transform:scale(2.6);opacity:0}100%{transform:scale(2.6);opacity:0}}
@keyframes fn-bubble-up{0%{transform:translateY(0);opacity:0}12%{opacity:0.9}100%{transform:translateY(-46px);opacity:0}}
@keyframes fn-float-a{0%{transform:translateY(0) rotate(0)}50%{transform:translateY(-15px) rotate(1.6deg)}100%{transform:translateY(0) rotate(0)}}
@keyframes fn-float-b{0%{transform:translateY(0) rotate(0)}50%{transform:translateY(-11px) rotate(-1.8deg)}100%{transform:translateY(0) rotate(0)}}
@media (prefers-reduced-motion:reduce){:root{--marquee-dur:0s; /* @kind other */ --stamp-dur:0s /* @kind other */}}

/* surfaces.css */
/* Finferno surfaces + resets. The page is bone paper with a faint 24px dot grid; the site body sits on ink
   so the fixed footer reads as a dark layer underneath. */
:root{
  --dot-grid:radial-gradient(rgba(30,26,21,0.045) 1px,transparent 1.1px); /* @kind other */
  --dot-grid-size:24px 24px; /* @kind other */
  --orbit-stroke:rgba(58,58,64,0.14); /* @kind color */        /* dashed hero orbit rings */
  --orbit-dash:2 7; /* @kind other */
  --halo:radial-gradient(circle,rgba(58,58,64,0.07),transparent 64%); /* @kind other */
  --caption-capsule-bg:rgba(245,243,237,0.92); /* @kind color */
  --mono-capsule-bg:rgba(30,26,21,0.72); /* @kind color */
  --chip-glass:rgba(255,255,255,0.88); /* @kind color */
}
.fn-page{background-color:var(--surface-page);background-image:var(--dot-grid);background-size:var(--dot-grid-size);color:var(--text-strong);font-family:var(--font-text)}
.fn-ink{background:var(--surface-ink);color:var(--text-on-ink)}
.fn-display{font-family:var(--font-display);font-weight:var(--weight-regular)}
.fn-mono{font-family:var(--font-mono);font-size:var(--type-mono);color:var(--text-muted)}
/* Hide scrollbars on horizontal card rails (they are driven by arrow buttons). */
.fn-scroller{scrollbar-width:none;-ms-overflow-style:none}
.fn-scroller::-webkit-scrollbar{display:none}
::selection{background:var(--ink);color:var(--bone)}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--ink-hover)}

/* theme.css, the project's own additions */
:root {
  --fn-font-display: var(--font-display);
  --fn-font-text: var(--font-text);
  --fn-font-mono: var(--font-mono);
  --fn-radius-film: var(--radius-film);
  --fn-radius-xs: var(--radius-xs);
  --fn-radius-sm: var(--radius-sm);
  --fn-radius-2: var(--radius-2);
  --fn-radius-md: var(--radius-md);
  --fn-radius-lg: var(--radius-lg);
  --fn-radius-card: var(--radius-card);
  --fn-radius-card-lg: var(--radius-card-lg);
  --fn-radius-pill: var(--radius-pill);
  --fn-radius-round: var(--radius-round);
  --fn-shadow-control: var(--shadow-control);
  --fn-shadow-control-strong: var(--shadow-control-strong);
  --fn-shadow-soft: var(--shadow-soft);
  --fn-shadow-thumb: var(--shadow-thumb);
  --fn-shadow-card: var(--shadow-card);
  --fn-shadow-card-hover: var(--shadow-card-hover);
  --fn-shadow-portrait: var(--shadow-portrait);
  --fn-shadow-panel: var(--shadow-panel);
  --fn-shadow-film: var(--shadow-film);
  --fn-shadow-on-ink: var(--shadow-on-ink);
  --fn-ease-out-soft: var(--ease-out-soft);
  --fn-ease-expo: var(--ease-expo);
  --fn-ease-reveal: var(--ease-reveal);
  --fn-ease-draw: var(--ease-draw);
  --fn-ease-pin: var(--ease-pin);
  --lh-hero: 0.78;
  --lh-display-tight: 0.82;
  --type-page-title: clamp(42px, 5.4vw, 88px);
  --type-page-title-lg: clamp(45px, 6.4vw, 106px);
  --type-meta-sm: 12px;
  --type-body-static: 15px;
  --line-on-ink-hover: rgba(235, 234, 228, 0.32);
  --btn-pad-md: 16px 32px;
  --chip-pad-lg: 9px 16px;
  --input-pad: 11px 18px;
  --input-pad-lg: 16px 24px;
  --focus-ring-offset: 0 0 0 2px var(--bone), 0 0 0 4px var(--ink);
  --focus-ring-offset-on-ink: 0 0 0 2px var(--ink), 0 0 0 4px var(--bone);
  --focus-ring-radius: 2px;
}