/* ============================================================
   BATCH - bundled stylesheet (tokens + base) for deployment
   Generated from the design system. Single file, no @imports
   except the Google Fonts line at top.
   ============================================================ */


/* ===== tokens/fonts.css ===== */
/* ============================================================
   BATCH - WEBFONTS
   Loaded from Google Fonts. If shipping fully offline, replace
   these @import lines with self-hosted @font-face + woff2.

   Bricolage Grotesque - display
   Hanken Grotesk      - text/UI
   Space Mono          - mono eyebrows & technical labels
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Hanken+Grotesk:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap");


/* ===== tokens/colors.css ===== */
/* ============================================================
   BATCH - COLOR TOKENS
   Cinematic warm-dark palette. A baked cookie glowing in the
   dark: near-black warm ink base, toasted golden amber accents,
   vanilla cream for light text & surfaces.
   ============================================================ */

:root {
  /* --- Warm ink (base / backgrounds) --------------------- */
  --ink-950: #070504;
  --ink-900: #0B0807; /* page background */
  --ink-800: #14100C;
  --ink-700: #1E1812;
  --ink-600: #2A2018;
  --ink-500: #382B20;

  /* --- Cocoa / toasted browns ---------------------------- */
  --cocoa-700: #3D2A1C;
  --cocoa-600: #533926;
  --cocoa-500: #6B4A30;
  --cocoa-400: #8A6242;

  /* --- Amber (primary accent - the cookie glow) ---------- */
  --amber-600: #C77B30;
  --amber-500: #E8A24C; /* primary */
  --amber-400: #F2B968;
  --amber-300: #F8CE92;
  --amber-200: #FBE0BB;

  /* --- Toffee / caramel secondary ------------------------ */
  --toffee-600: #B86B33;
  --toffee-500: #D98A45;

  /* --- Vanilla cream (light text & surfaces) ------------- */
  --cream-50:  #FBF6EC;
  --cream-100: #F6EEE1;
  --cream-200: #EADAC4;
  --cream-300: #D8C3A4;

  /* --- Chocolate accent ---------------------------------- */
  --choc-800: #1C0F08;
  --choc-700: #2A1810;

  /* --- Semantic raw -------------------------------------- */
  --berry-500: #C7506B;   /* error / sold-out */
  --matcha-500: #7FA05A;  /* success / in-stock */
  --honey-500: #E8C24C;   /* warning / limited */

  /* ============================================================
     SEMANTIC ALIASES
     ============================================================ */

  /* Surfaces */
  --bg-page: var(--ink-900);
  --bg-surface: var(--ink-800);
  --bg-elevated: var(--ink-700);
  --bg-sunken: var(--ink-950);

  /* Glass (frosted warm panels - use with backdrop-filter) */
  --surface-glass: rgba(246, 238, 225, 0.055);
  --surface-glass-strong: rgba(246, 238, 225, 0.10);
  --surface-glass-amber: rgba(232, 162, 76, 0.10);

  /* Borders / hairlines */
  --border-subtle: rgba(246, 238, 225, 0.09);
  --border-default: rgba(246, 238, 225, 0.14);
  --border-strong: rgba(246, 238, 225, 0.24);
  --border-amber: rgba(232, 162, 76, 0.45);

  /* Text */
  --text-primary: var(--cream-100);
  --text-secondary: rgba(246, 238, 225, 0.66);
  --text-muted: rgba(246, 238, 225, 0.42);
  --text-faint: rgba(246, 238, 225, 0.26);
  --text-accent: var(--amber-400);
  --text-on-accent: var(--ink-950);
  --text-on-cream: var(--ink-900);

  /* Accent / interactive */
  --accent: var(--amber-500);
  --accent-hover: var(--amber-400);
  --accent-press: var(--amber-600);
  --accent-soft: var(--surface-glass-amber);

  /* Status */
  --status-success: var(--matcha-500);
  --status-error: var(--berry-500);
  --status-warning: var(--honey-500);

  /* Focus ring */
  --focus-ring: rgba(232, 162, 76, 0.55);
}


/* ===== tokens/typography.css ===== */
/* ============================================================
   BATCH - TYPOGRAPHY TOKENS
   Display: Bricolage Grotesque (distinctive modern grotesk)
   Text:    Hanken Grotesk (clean, warm humanist sans)
   Mono:    Space Mono (eyebrows, prices, technical "spec" labels)
   ============================================================ */

:root {
  /* Families */
  --font-display: "Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif;
  --font-text: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --font-mono: "Space Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Weights */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* Fluid display sizes (clamp: min, vw, max) */
  --text-display-xl: clamp(3.5rem, 9vw, 8.5rem);  /* hero monolith */
  --text-display-lg: clamp(2.75rem, 6vw, 5.25rem);
  --text-display-md: clamp(2.25rem, 4.5vw, 3.5rem);
  --text-display-sm: clamp(1.75rem, 3vw, 2.5rem);

  /* Static text sizes */
  --text-2xl: 1.5rem;   /* 24 */
  --text-xl: 1.25rem;   /* 20 */
  --text-lg: 1.125rem;  /* 18 */
  --text-base: 1rem;    /* 16 */
  --text-sm: 0.875rem;  /* 14 */
  --text-xs: 0.75rem;   /* 12 */
  --text-eyebrow: 0.72rem; /* tracked mono labels */

  /* Line heights */
  --leading-none: 0.95;
  --leading-tight: 1.08;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  /* Letter spacing */
  --tracking-tighter: -0.04em;
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-eyebrow: 0.22em; /* mono caps eyebrows */
  --tracking-widest: 0.32em;
}


/* ===== tokens/spacing.css ===== */
/* ============================================================
   BATCH - SPACING & LAYOUT TOKENS
   8px base rhythm, generous cinematic section spacing.
   ============================================================ */

:root {
  --space-0: 0;
  --space-1: 0.25rem;  /* 4  */
  --space-2: 0.5rem;   /* 8  */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */
  --space-9: 6rem;     /* 96 */
  --space-10: 8rem;    /* 128 */
  --space-11: 12rem;   /* 192 */

  /* Section rhythm */
  --section-pad-y: clamp(5rem, 12vh, 11rem);
  --section-pad-x: clamp(1.25rem, 5vw, 6rem);

  /* Layout */
  --container-max: 1320px;
  --container-narrow: 760px;
  --gutter: clamp(1.25rem, 4vw, 4rem); /* @kind spacing */
}


/* ===== tokens/effects.css ===== */
/* ============================================================
   BATCH - EFFECTS: radii, shadows, glows, blur
   Cookies are round → generous radii. Light = warm amber glow,
   not flat drop shadow. Frosted glass via backdrop blur.
   ============================================================ */

:root {
  /* Corner radii */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 34px;
  --radius-2xl: 48px;
  --radius-pill: 999px;

  /* Elevation shadows (deep, warm-tinted) */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 8px 24px -8px rgba(0, 0, 0, 0.65);
  --shadow-lg: 0 24px 60px -16px rgba(0, 0, 0, 0.7);
  --shadow-xl: 0 40px 100px -24px rgba(0, 0, 0, 0.8);

  /* Amber glows (the signature "baked glow") */
  --glow-amber-sm: 0 0 24px rgba(232, 162, 76, 0.28);
  --glow-amber-md: 0 0 60px rgba(232, 162, 76, 0.32);
  --glow-amber-lg: 0 0 120px rgba(232, 162, 76, 0.30);
  --glow-amber-xl: 0 0 220px rgba(232, 162, 76, 0.26);

  /* Inset / rim light for glass surfaces */
  --rim-top: inset 0 1px 0 rgba(246, 238, 225, 0.12);  /* @kind shadow */
  --rim-full: inset 0 0 0 1px rgba(246, 238, 225, 0.08); /* @kind shadow */

  /* Backdrop blur */
  --blur-sm: blur(8px);   /* @kind other */
  --blur-md: blur(18px);  /* @kind other */
  --blur-lg: blur(32px);  /* @kind other */

  /* Radial vignette (drop behind hero objects) */
  --vignette-amber: radial-gradient(60% 60% at 50% 45%, rgba(232,162,76,0.22) 0%, rgba(232,162,76,0.06) 40%, transparent 72%); /* @kind other */
  --grad-page: radial-gradient(120% 90% at 50% -10%, #1A130C 0%, var(--ink-900) 46%, var(--ink-950) 100%); /* @kind other */
  --grad-amber: linear-gradient(135deg, var(--amber-400) 0%, var(--amber-600) 100%); /* @kind other */
  --grad-glass: linear-gradient(160deg, rgba(246,238,225,0.10) 0%, rgba(246,238,225,0.02) 100%); /* @kind other */
}


/* ===== tokens/motion.css ===== */
/* ============================================================
   BATCH - MOTION TOKENS
   Cinematic, weighty, smooth. Long expo-out easing for reveals,
   gentle settle on hover. Nothing bouncy or fast/snappy.
   ============================================================ */

:root {
  /* Durations */
  --dur-fast: 160ms;   /* @kind other */
  --dur-base: 280ms;   /* @kind other */
  --dur-slow: 520ms;   /* @kind other */
  --dur-cinematic: 900ms; /* @kind other */

  /* Easings */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);   /* @kind other */
  --ease-out-soft: cubic-bezier(0.33, 1, 0.68, 1);  /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);    /* @kind other */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);    /* @kind other */
}


/* ===== tokens/base.css ===== */
/* ============================================================
   BATCH - BASE / RESET
   Minimal opinionated base so specimen cards & kits share a
   cinematic warm-dark canvas out of the box.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-text);
  font-weight: var(--weight-regular);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a { color: inherit; text-decoration: none; }

/* Mono eyebrow utility */
.batch-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-accent);
}

::selection { background: var(--amber-500); color: var(--ink-950); }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}