/*
 * tokens.css — CSB design tokens
 * --------------------------------
 * Single source of truth for the visual language: colors, fonts, spacing, type scale,
 * tracking, animation, layout dimensions.
 *
 * Defined as CSS custom properties on :root so every other stylesheet inherits.
 * Mirrored in theme.json so Gutenberg uses the same values.
 *
 * Source of truth: locked mockups at
 *   PUBLISHING/.superpowers/brainstorm/67648-1776890577/content/{csb-home-v1,est-detail-v1,rr-article-v1}.html
 * All three mockups have IDENTICAL :root tokens. Verified 2026-04-25.
 *
 * Loaded site-wide. Always first in the cascade.
 */

/* ==========================================================================
   FONT FACES — self-hosted woff2 (no Google CDN dependency)
   ========================================================================== */

@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/archivo-black-v23-latin-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/figtree-v9-latin-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Figtree';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/figtree-v9-latin-italic.woff2') format('woff2');
}

@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/figtree-v9-latin-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Figtree';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/figtree-v9-latin-500italic.woff2') format('woff2');
}

@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/figtree-v9-latin-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/figtree-v9-latin-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/figtree-v9-latin-800.woff2') format('woff2');
}

/* ==========================================================================
   DESIGN TOKENS — canonical from locked mockups (2026-04-25)
   ========================================================================== */

:root {
  /* ---- Colors ---- */
  --color-bg:            #FAFAF6;
  --color-bg-tint:       #F7F5F0; /* one-two steps off --color-bg (Mark 2026-07-10; was #F4F1EA, too muddy) */
  --color-ink:           #1A1A1A;
  --color-accent:        #B34525;
  --color-accent-hover:  #9C3D20;
  --color-muted:         #6B6560;
  --color-support:       #8E8680;
  --color-border:        rgba(26, 26, 26, 0.1);
  --color-border-strong: rgba(26, 26, 26, 0.2);
  --color-dark-bg:       #1A1A1A;
  --color-dark-text:     #EFE8D9;
  --color-dark-muted:    rgba(239, 232, 217, 0.65);
  --color-footer-bg:     #2C2825;

  /* ---- Fonts ---- */
  --font-display: 'Archivo Black', sans-serif;
  --font-body:    'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ---- Type scale (font-size) ---- */
  --fs-display-hero:    clamp(56px, 9vw, 128px);
  --fs-display-section: clamp(40px, 5.5vw, 72px);
  --fs-display-banner:  clamp(44px, 6vw, 80px);
  --fs-display-card:    22px;
  --fs-body-large:      17px;
  --fs-body:            16px;
  --fs-body-sm:         15px;
  --fs-label:           12px;
  --fs-micro:           11px;

  /* ---- Heading hierarchy (H1-H6 site-wide foundation, used by base.css) ---- */
  --fs-h1: clamp(40px, 5.5vw, 72px);
  --fs-h2: clamp(28px, 3.4vw, 44px);
  --fs-h3: clamp(22px, 2.4vw, 30px);
  --fs-h4: 19px;
  --fs-h5: 16px;
  --fs-h6: 13px;

  /* ---- Letter-spacing (tracking) ---- */
  --track-label: 0.22em;
  --track-cta:   0.2em;
  --track-nav:   0.2em;

  /* ---- Spacing scale ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;
  --space-9: 128px;

  /* ---- Layout ---- */
  --max-page: 1400px;

  /* ---- Animation ---- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-short:   0.15s;
  --dur-medium:  0.4s;
  --dur-long:    0.8s;

  /* ---- Shared preorder component map ---- */
  --csbds-color-subline: var(--color-muted);
  --csbds-color-card-bg: transparent;
  --csbds-color-card-border: rgba(26, 26, 26, 0.12);
  --csbds-color-card-border-hover: rgba(26, 26, 26, 0.12);
  --csbds-color-card-title: var(--color-ink);
  --csbds-color-card-price: var(--color-ink);
  --csbds-color-label: var(--color-muted);
  --csbds-color-button-border: rgba(26, 26, 26, 0.18);
  --csbds-color-button-bg: transparent;
  --csbds-color-button-text: var(--color-ink);
  --csbds-color-button-hover-border: var(--color-accent);
  --csbds-color-button-hover-bg: var(--color-ink);
  --csbds-color-button-hover-text: var(--color-accent);
  --csbds-color-button-primary-border: var(--color-accent);
  --csbds-color-button-primary-bg: var(--color-accent);
  --csbds-color-button-primary-text: #fff;
  --csbds-color-button-primary-hover-border: var(--color-ink);
  --csbds-color-button-primary-hover-bg: var(--color-ink);
  --csbds-color-button-primary-hover-text: #fff;
  --csbds-font-subline: var(--font-body);
  --csbds-font-card-title: var(--font-display);
  --csbds-font-card-price: var(--font-display);
  --csbds-font-label: var(--font-body);
  --csbds-font-button: var(--font-body);
  --csbds-subline-font-size: 16px;
  --csbds-subline-line-height: inherit;
  --csbds-subline-margin: 0;
  --csbds-subline-max-width: none;
  --csbds-subline-text-align: inherit;
  --csbds-grid-gap: var(--space-5);
  --csbds-card-position: static;
  --csbds-card-padding: var(--space-5);
  --csbds-card-gap: 0;
  --csbds-card-transition: none;
  --csbds-card-header-gap: var(--space-3);
  --csbds-card-header-margin: 0 0 var(--space-4);
  --csbds-card-title-font-weight: 400;
  --csbds-card-title-font-size: 28px;
  --csbds-card-title-line-height: 1;
  --csbds-card-title-letter-spacing: -0.005em;
  --csbds-card-price-font-weight: 400;
  --csbds-card-price-font-size: 32px;
  --csbds-card-price-line-height: 1;
  --csbds-card-price-letter-spacing: 0;
  --csbds-card-actions-gap: var(--space-2);
  --csbds-label-font-weight: 400;
  --csbds-label-font-size: 12px;
  --csbds-label-padding-bottom: var(--space-1);
  --csbds-button-font-weight: 500;
  --csbds-button-font-size: 14px;
  --csbds-button-letter-spacing: var(--track-cta);
  --csbds-button-padding: 0 14px;
  --csbds-button-transition: border-color var(--dur-short), background var(--dur-short), color var(--dur-short);
  --csbds-button-primary-font-weight: 700;

  /* ---- Header / chrome heights ---- */
  --header-h-default: 84px;
  --header-h-compact: 64px;
  --announce-h:       36px;
}