/* Tier 1 — Structural (invisible infrastructure) */
--duration-t1-fast:   150ms;
--duration-t1-base:   200ms;
--duration-t1-slow:   300ms;
--ease-t1:            cubic-bezier(0.22, 0.03, 0.26, 1.0);

/* Tier 2 — Brand (authored personality) */
--duration-t2-fast:   400ms;
--duration-t2-base:   600ms;
--duration-t2-slow:   800ms;
--ease-t2-spring:     cubic-bezier(0.34, 1.20, 0.64, 1.0);
--ease-t2-spring-max: cubic-bezier(0.34, 1.56, 0.64, 1.0);

/* Grain animation (signature element) */
/* animation: cb-grain-flicker 167ms steps(1, end) infinite; */
/* ~6fps ambient flicker — always prefers-reduced-motion guarded */

/* Checkout / transaction zones — zero expression */
--duration-checkout: 0ms; /* no animation in purchase flow */

/* Adaptive dark mode — surfaces and text invert, brand colors preserved */
@media (prefers-color-scheme: dark) {
  [data-theme='light'] { /* skip if user forced light */ }
  :root:not([data-theme='light']) {
    --surface-0: #0F0B0A;
    --surface-1: #1A1310;
    --surface-2: #241816;
    --surface-3: #3B2C28;
    --color-text:           #F7F2F0;
    --color-text-secondary: #C0B2AC;
    --color-text-tertiary:  #A3938C;
    /* Burgundy text tier — only change for dark surfaces */
    --color-burgundy-text-safe: #E8B4B8; /* was #5A1F25 */
    /* Neutrals tinted warm */
    --color-neutral-100: #1A1310;
    --color-neutral-200: #241816;
    --color-neutral-300: #3B2C28;
    --color-neutral-400: #54423D;
    --color-neutral-500: #A3938C;
    --color-neutral-600: #C0B2AC;
    --color-neutral-700: #D4C9C4;
    --color-neutral-800: #E8DFDB;
    --color-neutral-900: #F7F2F0;
  }
}
/* Manual toggle via JS — stores in localStorage */
.dark-mode,
[data-theme='dark'] {
  --surface-0: #0F0B0A;
  --surface-1: #1A1310;
  --surface-2: #241816;
  --surface-3: #3B2C28;
  --color-text:           #F7F2F0;
  --color-burgundy-text-safe: #E8B4B8;
}

/* Sequential palette — burgundy to cream */
--dataviz-seq-1: #6B262C;
--dataviz-seq-2: #8B3C43;
--dataviz-seq-3: #A8585E;
--dataviz-seq-4: #C47D82;
--dataviz-seq-5: #DFA4A8;
--dataviz-seq-6: #F0CDCF;
--dataviz-seq-7: #F7E8E9;

/* Categorical palette */
--dataviz-cat-1: #6B262C;
--dataviz-cat-2: #FFF6CB;
--dataviz-cat-3: #54423D;
--dataviz-cat-4: #C0B2AC;
--dataviz-cat-5: #3B2C28;
--dataviz-cat-6: #E8B4B8;

/* Typography */
--dataviz-title-font: var(--font-heading);
--dataviz-title-size: var(--text-base);
--dataviz-title-weight: 600;
--dataviz-axis-font: var(--font-body);
--dataviz-axis-size: var(--text-xs);
--dataviz-axis-color: var(--color-neutral-500);
--dataviz-grid-color: #3B2C28;
--dataviz-grid-opacity: 0.5;

/* Breakpoints (mobile-first — min-width) */
/* sm  */ @media (min-width: 640px)  { ... }
/* md  */ @media (min-width: 768px)  { ... }
/* lg  */ @media (min-width: 1024px) { ... }
/* xl  */ @media (min-width: 1280px) { ... }
/* 2xl */ @media (min-width: 1536px) { ... }

/* Max-width container */
.section-inner { max-width: 80ch; margin: 0 auto; padding: 0 16px; }
@media (min-width: 768px) { .section-inner { padding: 0 32px; } }
.section-wide  { max-width: 1200px; }

/* Type scale — mobile baseline, desktop max */
:root {
  --text-display: clamp(52px, 7vw, 98px);
  --text-h1:      clamp(40px, 5vw, 64px);
  --text-h2:      clamp(28px, 4vw, 48px);
  --text-h3:      clamp(22px, 3vw, 31px);
  --text-body:    16px; /* never below 16 */
}

/* Section padding compression */
.section { padding: 48px 0; }
@media (min-width: 768px)  { .section { padding: 64px 0; } }
@media (min-width: 1024px) { .section { padding: 96px 0; } }
@media (min-width: 1280px) { .section { padding: 120px 0; } }

/* Grid: 1 col → 2 col → 3 col */
.grid-3 { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px)  { .grid-3 { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
@media (min-width: 1024px) { .grid-3 { grid-template-columns: repeat(3, 1fr); gap: 32px; } }

/* Touch targets */
.btn, a, button { min-height: 44px; min-width: 44px; }

/* iOS safe area for sticky CTA */
.sticky-cta {
  padding-bottom: max(16px, env(safe-area-inset-bottom));
}