/* Pupproper LOCKED v3 design tokens — CSS custom properties */
/* Generated 2026-06-05 from ~/Claude/_research-portfolio/pupproper-figma-rebuild/tokens.json */
/* Source of truth: ~/Claude/Pupproper/brand/07-brand-standards-LOCKED-v3.md */
/* DO NOT EDIT BY HAND — change tokens.json and re-export via southleft/figma-console-mcp */

:root {
  /* ──────── Color: brand core ──────── */
  --color-brand-ink: #1A1A1A;          /* Pantone Black 6 C — primary type + character mark */
  --color-brand-cream: #F2EBDD;        /* Pantone 7527 C — surface, photo cyc */
  --color-brand-amber: #A4632F;        /* Pantone 7572 C — bottle glass material */

  /* ──────── Color: SKU ladder (label/carton only) ──────── */
  --color-sku-coral: #FF6F61;          /* Resurrection Dry Wash · Pantone 178 C */
  --color-sku-sage: #6CC24A;           /* Confession Stain Remedy · Pantone 360 C */
  --color-sku-mustard: #F2A900;        /* Hours Between Walks · Pantone 130 C (mo 9) */
  --color-sku-periwinkle: #9DA8C7;     /* The Long Goodbye · Pantone 658 C (mo 15) */
  --color-sku-terracotta: #D2693E;     /* Vespers · Pantone 7416 C (mo 18) */

  /* ──────── Color: semantic surface ──────── */
  --color-surface-primary: var(--color-brand-cream);
  --color-surface-inverse: var(--color-brand-ink);

  /* ──────── Color: type ──────── */
  --color-type-primary: var(--color-brand-ink);
  --color-type-inverse: var(--color-brand-cream);
  --color-type-muted: #5C5C5C;

  /* ──────── Typography: family ──────── */
  /* font-display: swap; Loaded substitutes (iter-01): Inter Tight (display), Inter (body), JetBrains Mono (mono).
     Söhne / Söhne Breit / Söhne Mono ship once Söhne licensing is locked — chain prefers them when present. */
  --font-family-display: 'Söhne Breit', 'Inter Tight', 'GT Walsheim', 'Visby CF', system-ui, -apple-system, sans-serif;
  --font-family-body: 'Söhne', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-mono: 'Söhne Mono', 'JetBrains Mono', 'GT America Mono', 'IBM Plex Mono', 'SF Mono', Menlo, monospace;

  /* ──────── Typography: weight ──────── */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ──────── Typography: size scale ──────── */
  --font-size-xs: 10px;        /* Eyebrow caps, legal */
  --font-size-sm: 13px;        /* Small body, captions */
  --font-size-base: 16px;      /* Body default */
  --font-size-md: 18px;        /* Body large */
  --font-size-lg: 22px;        /* Subhead */
  --font-size-xl: 28px;        /* Section head */
  --font-size-2xl: 36px;       /* Page head */
  --font-size-3xl: 48px;       /* Hero head */
  --font-size-4xl: 64px;       /* Wordmark display */

  /* ──────── Typography: leading ──────── */
  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  /* ──────── Typography: tracking ──────── */
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.05em;
  --tracking-wider: 0.12em;    /* Eyebrow caps register */

  /* ──────── Spacing: 8pt grid ──────── */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;              /* Base unit */
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;             /* Section vertical rhythm */
  --space-10: 128px;           /* Hero vertical rhythm */

  /* ──────── Radius ──────── */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 9999px;

  /* ──────── Shadow ──────── */
  --shadow-card: 0 1px 2px rgba(26, 26, 26, 0.04), 0 4px 16px rgba(26, 26, 26, 0.06);
  --shadow-lift: 0 6px 24px rgba(26, 26, 26, 0.10);

  /* ──────── Layout ──────── */
  --layout-container-max: 1200px;
  --layout-container-narrow: 720px;

  /* ──────── Breakpoints (reference; use in @media manually) ──────── */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
}

/* Base reset + body defaults that reference tokens */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-family: var(--font-family-body);
  font-size: var(--font-size-base);
  line-height: var(--leading-normal);
  color: var(--color-type-primary);
  background-color: var(--color-surface-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body { margin: 0; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight);
  margin: 0;
}

/* Eyebrow line utility — the mono caps "DOCUMENT N° XX" register */
.eyebrow {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-type-primary);
}