/* ========================================
   HELIOGRAPH DESIGN TOKENS
   Source of truth: Reference/Heliograph CSS/styles.css
   When Heliograph updates, sync the primitive tokens below.
   Project extensions and short aliases are marked clearly.
   ======================================== */

:root {
  /* Colors - Purple (Primary) */
  --purple-01: #f2eeff;
  --purple-02: #dad0ff;
  --purple-03: #c1b1ff;
  --purple-04: #a993ff;
  --purple-05: #9074ff;
  --purple-06: #7856ff;
  --purple-06-10pct: rgba(120, 86, 255, 0.1);
  --purple-06-20pct: rgba(120, 86, 255, 0.2);
  --purple-06-30pct: rgba(120, 86, 255, 0.3);
  --purple-06-40pct: rgba(120, 86, 255, 0.4);
  --purple-06-50pct: rgba(120, 86, 255, 0.5);
  --purple-07: #5f41cf;
  --purple-08: #472ba0;
  --purple-09: #2e1670;
  --purple-10: #150040;

  /* Colors - Gray */
  --gray-01: #fafafa;
  --gray-02: #f4f4f4;
  --gray-03: #eaeaea;
  --gray-04: #dfdfdf;
  --gray-05: #d5d5d5;
  --gray-06: #cacaca;
  --gray-07: #a2a2a2;
  --gray-08: #797979;
  --gray-09: #515151;
  --gray-10: #1f2023;
  --gray-10-80pct: rgba(31, 32, 35, 0.8);

  /* Colors - Pool */
  --pool-01: #f0f9fe;
  --pool-02: #d7edfc;
  --pool-03: #bee1fa;
  --pool-04: #a4d6f8;
  --pool-05: #8bccf6;
  --pool-06: #72bef4;
  --pool-06-10pct: rgba(114, 190, 244, 0.1);
  --pool-06-20pct: rgba(114, 190, 244, 0.2);
  --pool-06-30pct: rgba(114, 190, 244, 0.3);
  --pool-06-40pct: rgba(114, 190, 244, 0.4);
  --pool-06-50pct: rgba(114, 190, 244, 0.5);
  --pool-07: #5698c7;
  --pool-08: #39729a;
  --pool-09: #1d4b6d;
  --pool-10: #002540;

  /* Colors - Mint */
  --mint-01: #f2fcfb;
  --mint-02: #dbf7f4;
  --mint-03: #c4f1ed;
  --mint-04: #adece6;
  --mint-05: #96e6df;
  --mint-06: #7fe1d8;
  --mint-06-10pct: rgba(127, 225, 216, 0.1);
  --mint-06-20pct: rgba(127, 225, 216, 0.2);
  --mint-06-30pct: rgba(127, 225, 216, 0.3);
  --mint-06-40pct: rgba(127, 225, 216, 0.4);
  --mint-06-50pct: rgba(127, 225, 216, 0.5);
  --mint-07: #5fb6ac;
  --mint-08: #408a81;
  --mint-09: #205f56;
  --mint-10: #00332a;

  /* Colors - Lava */
  --lava-01: #fff0ed;
  --lava-02: #ffd7cf;
  --lava-03: #ffbfb1;
  --lava-04: #ffa693;
  --lava-05: #ff8e75;
  --lava-06: #ff7557;
  --lava-06-10pct: rgba(255, 117, 87, 0.1);
  --lava-06-20pct: rgba(255, 117, 87, 0.2);
  --lava-06-30pct: rgba(255, 117, 87, 0.3);
  --lava-06-40pct: rgba(255, 117, 87, 0.4);
  --lava-06-50pct: rgba(255, 117, 87, 0.5);
  --lava-07: #cc5849;
  --lava-08: #993c3b;
  --lava-09: #661d2d;
  --lava-10: #33001f;

  /* Colors - Peach */
  --peach-01: #fff7f2;
  --peach-02: #ffe9da;
  --peach-03: #ffdbc2;
  --peach-04: #ffceaa;
  --peach-05: #ffc092;
  --peach-06: #ffb27a;
  --peach-06-10pct: rgba(255, 178, 122, 0.1);
  --peach-06-20pct: rgba(255, 178, 122, 0.2);
  --peach-06-30pct: rgba(255, 178, 122, 0.3);
  --peach-06-40pct: rgba(255, 178, 122, 0.4);
  --peach-06-50pct: rgba(255, 178, 122, 0.5);
  --peach-07: #cc8c5e;
  --peach-08: #996642;
  --peach-09: #664126;
  --peach-10: #331b0a;

  /* Colors - Mustard */
  --mustard-01: #fef8eb;
  --mustard-02: #fdecc8;
  --mustard-03: #fce0a5;
  --mustard-04: #fad482;
  --mustard-05: #f9c85f;
  --mustard-06: #f8bc3c;
  --mustard-06-10pct: rgba(249, 200, 95, 0.1);
  --mustard-06-20pct: rgba(249, 200, 95, 0.2);
  --mustard-06-30pct: rgba(249, 200, 95, 0.3);
  --mustard-06-40pct: rgba(249, 200, 95, 0.4);
  --mustard-06-50pct: rgba(249, 200, 95, 0.5);
  --mustard-07: #ca9430;
  --mustard-08: #9c6b25;
  --mustard-09: #6e4319;
  --mustard-10: #401a0d;

  /* Colors - Grass */
  --grass-01: #ebf6f1;
  --grass-02: #c8e7d8;
  --grass-03: #a5d7bf;
  --grass-04: #81c8a6;
  --grass-05: #5eb88d;
  --grass-06: #3ba974;
  --grass-06-10pct: rgba(59, 169, 116, 0.1);
  --grass-06-20pct: rgba(59, 169, 116, 0.2);
  --grass-06-30pct: rgba(59, 169, 116, 0.3);
  --grass-06-40pct: rgba(59, 169, 116, 0.4);
  --grass-06-50pct: rgba(59, 169, 116, 0.5);
  --grass-07: #2c885c;
  --grass-08: #1e6844;
  --grass-09: #0f472c;
  --grass-10: #002614;

  /* Colors - Black & White */
  --black: #000000;
  --black-2pct: rgba(0, 0, 0, 0.02);
  --black-7pct: rgba(0, 0, 0, 0.07);
  --black-10pct: rgba(0, 0, 0, 0.1);
  --black-15pct: rgba(0, 0, 0, 0.15);
  --black-20pct: rgba(0, 0, 0, 0.2);
  --black-25pct: rgba(0, 0, 0, 0.25);
  --black-30pct: rgba(0, 0, 0, 0.3);
  --black-50pct: rgba(0, 0, 0, 0.5);
  --black-60pct: rgba(0, 0, 0, 0.6);
  --black-70pct: rgba(0, 0, 0, 0.7);
  --black-80pct: rgba(0, 0, 0, 0.8);
  --black-90pct: rgba(0, 0, 0, 0.9);
  --black-100pct: #000000;
  --white: #ffffff;
  --white-5pct: rgba(255, 255, 255, 0.05);
  --white-8pct: rgba(255, 255, 255, 0.08);
  --white-10pct: rgba(255, 255, 255, 0.1);
  --white-15pct: rgba(255, 255, 255, 0.15);
  --white-20pct: rgba(255, 255, 255, 0.2);
  --white-30pct: rgba(255, 255, 255, 0.3);
  --white-40pct: rgba(255, 255, 255, 0.4);
  --white-50pct: rgba(255, 255, 255, 0.5);
  --white-70pct: rgba(255, 255, 255, 0.7);
  --white-80pct: rgba(255, 255, 255, 0.8);
  --white-90pct: rgba(255, 255, 255, 0.9);
  --white-100pct: #ffffff;

  /* Spacing */
  --space-2: 2px;
  --space-3: 3px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;
  --space-160: 160px;

  /* Radius */
  --radius-2: 2px;
  --radius-4: 4px;
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-10: 10px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-24: 24px;
  --radius-32: 32px;
  --radius-40: 40px;

  /* Opacity */
  --opacity-2: 0.02;
  --opacity-5: 0.05;
  --opacity-7: 0.07;
  --opacity-10: 0.10;
  --opacity-20: 0.20;
  --opacity-30: 0.30;
  --opacity-40: 0.40;
  --opacity-50: 0.50;
  --opacity-60: 0.60;
  --opacity-70: 0.70;
  --opacity-80: 0.80;
  --opacity-90: 0.90;
  --opacity-100: 1.00;

  /* Typography - Fonts */
  --font-sans: 'Garnett', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif: 'Arizona', Georgia, serif;
  --font-mono: 'Apercu Mono', 'SF Mono', Monaco, Consolas, monospace;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* Typography - Line Heights */
  --line-height-120: 1.20;
  --line-height-140: 1.40;
  --line-height-150: 1.50;
  --line-height-160: 1.60;
  --line-height-168: 1.68;

  /* Typography - Letter Spacing */
  --tracking-tight: -0.02em;
  --tracking-headline: -0.02em;
  --tracking-caps: 0.06em;
  --tracking-body: 0.02em;
  --tracking-eyebrow: 0.20em;

  /* Typography - Type Scale (Heliograph canonical names)
     Short aliases at the bottom map to these. */

  /* Headings */
  --heading-xl-60-size: 60px;
  --heading-xl-60-weight: var(--weight-medium);
  --heading-xl-60-line-height: 1.20;
  --heading-xl-60-letter-spacing: -0.02em;

  --heading-lg-48-size: 48px;
  --heading-lg-48-weight: var(--weight-medium);
  --heading-lg-48-line-height: 1.20;
  --heading-lg-48-letter-spacing: -0.02em;

  --heading-md-36-size: 36px;
  --heading-md-36-weight: var(--weight-medium);
  --heading-md-36-line-height: 1.20;
  --heading-md-36-letter-spacing: -0.02em;

  --heading-sm-28-size: 28px;
  --heading-sm-28-weight: var(--weight-medium);
  --heading-sm-28-line-height: 1.20;
  --heading-sm-28-letter-spacing: -0.01em;

  --heading-xs-22-size: 22px;
  --heading-xs-22-weight: var(--weight-medium);
  --heading-xs-22-line-height: 1.40;
  --heading-xs-22-letter-spacing: 0;

  --heading-xxs-18-size: 18px;
  --heading-xxs-18-weight: var(--weight-medium);
  --heading-xxs-18-line-height: 1.40;
  --heading-xxs-18-letter-spacing: 0;

  /* Body */
  --body-xxl-36-size: 36px;
  --body-xxl-36-weight: var(--weight-regular);
  --body-xxl-36-line-height: 1.50;
  --body-xxl-36-letter-spacing: 0.02em;

  --body-xl-28-size: 28px;
  --body-xl-28-weight: var(--weight-regular);
  --body-xl-28-line-height: 1.60;
  --body-xl-28-letter-spacing: 0.02em;

  --body-lg-22-size: 22px;
  --body-lg-22-weight: var(--weight-regular);
  --body-lg-22-line-height: 1.60;
  --body-lg-22-letter-spacing: 0.02em;

  --body-md-18-size: 18px;
  --body-md-18-weight: var(--weight-regular);
  --body-md-18-line-height: 1.60;
  --body-md-18-letter-spacing: 0.02em;

  --body-sm-16-size: 16px;
  --body-sm-16-weight: var(--weight-regular);
  --body-sm-16-line-height: 1.60;
  --body-sm-16-letter-spacing: 0.02em;

  --font-size-base: 16px;

  /* Caption */
  --caption-lg-14-size: 14px;
  --caption-lg-14-weight: var(--weight-regular);
  --caption-lg-14-line-height: 1.68;
  --caption-lg-14-letter-spacing: 0.02em;
  --caption-lg-14-medium-weight: var(--weight-medium);

  --caption-sm-12-size: 12px;
  --caption-sm-12-weight: var(--weight-regular);
  --caption-sm-12-line-height: 1.68;
  --caption-sm-12-letter-spacing: 0.02em;
  --caption-sm-12-medium-weight: var(--weight-medium);

  /* Eyebrow */
  --eyebrow-lg-14-size: 14px;
  --eyebrow-lg-14-weight: var(--weight-medium);
  --eyebrow-lg-14-letter-spacing: 0.20em;
  --eyebrow-lg-14-transform: uppercase;

  --eyebrow-sm-12-size: 12px;
  --eyebrow-sm-12-weight: var(--weight-medium);
  --eyebrow-sm-12-letter-spacing: 0.20em;
  --eyebrow-sm-12-transform: uppercase;

  /* UI Labels — project extension, not in Heliograph */
  --ui-label-size: 11px;
  --ui-label-xs-size: 10px;
  --ui-label-xxs-size: 9px;

  /* Short aliases — point to canonical names above */
  --heading-xl-size: var(--heading-xl-60-size);
  --heading-lg-size: var(--heading-lg-48-size);
  --heading-md-size: var(--heading-md-36-size);
  --heading-sm-size: var(--heading-sm-28-size);
  --heading-xs-size: var(--heading-xs-22-size);
  --heading-xxs-size: var(--heading-xxs-18-size);
  --body-lg-size: var(--body-lg-22-size);
  --body-md-size: var(--body-md-18-size);
  --body-sm-size: var(--body-sm-16-size);
  --caption-lg-size: var(--caption-lg-14-size);
  --caption-sm-size: var(--caption-sm-12-size);
  --eyebrow-lg-size: var(--eyebrow-lg-14-size);
  --eyebrow-sm-size: var(--eyebrow-sm-12-size);

  /* Border */
  --border-width-05: 0.5px;
  --border-width-10: 1px;

  /* Sizing */
  --sizing-12: 12px;
  --sizing-16: 16px;
  --sizing-24: 24px;
  --sizing-25: 25px;
  --sizing-31: 31px;
  --sizing-32: 32px;
  --sizing-40: 40px;

  /* Max Widths */
  --max-width-text: 760px;
  --max-width-content: 1100px;
  --max-width-container: 1440px;
  --max-width-wide: 1500px;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);

  /* Transitions */
  --duration-instant: 100ms;
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 300ms;
  --duration-slower: 400ms;
  --ease-linear: linear;
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.2, 0, 0.2, 1);
  --ease-smooth: cubic-bezier(0.2, 0, 0.2, 1);

  /* Transitions */
  --transition-bg: background-color var(--duration-slower) var(--ease-spring);
  --transition-opacity: opacity var(--duration-slower) var(--ease-spring);
  --transition-fast: all var(--duration-fast) var(--ease-out);

  /* Breakpoints & Grid */
  --breakpoint-phone: 384px;
  --breakpoint-tablet: 808px;
  --breakpoint-desktop: 1200px;
  --breakpoint-desktop-plus: 1440px;
  --grid-gutter: 16px;

  /* Semantic Text Colors (Heliograph + Project Extension)
     - Heliograph defines body text as black-70pct / white-70pct by mode
     - Project extends with secondary/muted levels for captions and metadata */
  --text-primary: var(--gray-10);
  --text-body: var(--black-70pct);
  --text-secondary: var(--gray-08);
  --text-muted: var(--gray-07);
  --text-inverse: var(--white-70pct);

  /* Semantic Accent Colors */
  --color-accent: var(--purple-06);
  --color-accent-text: var(--purple-07);
  --color-accent-muted: var(--purple-05);

  /* Project Gradients */
  --gradient-bg-lg-purple: linear-gradient(0deg, #150040 1.44%, #472BA0 21.99%, #7856FF 49.97%, #FFD7CF 76.96%, #FFFFFF 99.95%);
  --gradient-bg-lg-pool: linear-gradient(0deg, #002540 0%, #1D4B6D 22.1%, #5698C7 50.45%, #DBF7F4 76.88%, #FFFFFF 99.95%);
  --gradient-bg-lg-mint: linear-gradient(0deg, #00332A 0%, #205F56 22.1%, #5FB6AC 50.45%, #D7EDFC 76.88%, #FFFFFF 99.95%);
  --gradient-bg-lg-lava: linear-gradient(0deg, #33001F 0%, #993C3B 22.1%, #FF7557 50.45%, #FAD482 76.88%, #FFFFFF 99.95%);
  --gradient-bg-lg-mustard: linear-gradient(0deg, #401A0D 0%, #9C6B25 22.1%, #F8BC3C 50.45%, #FFE9DA 76.88%, #FFFFFF 99.95%);
  --gradient-bg-lg-grass: linear-gradient(0deg, #002614 0%, #1E6844 22.1%, #3BA974 50.45%, #FFE9DA 76.88%, #FFFFFF 99.95%);
  --gradient-bg-sm-purple: linear-gradient(180deg, rgba(193, 177, 255, 0) 25%, #A993FF 100%);
  --gradient-bg-sm-pool: linear-gradient(180deg, rgba(190, 225, 250, 0) 25%, #A4D6F8 100%);
  --gradient-bg-sm-mint: linear-gradient(180deg, rgba(196, 241, 237, 0) 25%, #ADECE6 100%);
  --gradient-bg-sm-lava: linear-gradient(180deg, rgba(255, 200, 188, 0) 25%, #FFA693 100%);
  --gradient-bg-sm-mustard: linear-gradient(180deg, rgba(252, 228, 177, 0) 25%, #FAD482 100%);
  --gradient-bg-sm-grass: linear-gradient(180deg, rgba(165, 215, 191, 0) 25%, #81C8A6 100%);
  --gradient-product-card-purple: linear-gradient(180deg, #FFF0ED 0%, #FFBFB1 37.02%, #7856FF 82.11%, #5F41CF 100%);
  --gradient-product-card-pool: linear-gradient(180deg, #F2FCFB 0%, #C4F1ED 35.29%, #72BEF4 66.31%, #5698C7 100%);
  --gradient-product-card-mint: linear-gradient(180deg, #F0F9FE 0%, #BEE1FA 35.29%, #5FB6AC 66.31%, #5FB6AC 100%);
  --gradient-product-card-lava: linear-gradient(180deg, #FEF8EB 0%, #FAD482 35.29%, #FF7557 66.31%, #CC5849 100%);
  --gradient-product-card-mustard: linear-gradient(180deg, #FFF7F2 0%, #FFDBC2 35.29%, #F8BC3C 66.31%, #CA9430 100%);
  --gradient-product-card-grass: linear-gradient(180deg, #FFF7F2 0%, #FFDBC2 35.29%, #5EB88D 66.31%, #2C885C 100%);
}

/* ========================================
   FONT FACES
   ======================================== */

@font-face {
  font-family: 'Garnett';
  src: url('../assets/fonts/Garnett-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Garnett';
  src: url('../assets/fonts/Garnett-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Apercu Mono';
  src: url('../assets/fonts/apercu-mono-regular-pro.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ========================================
   BASE STYLES
   ======================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: var(--font-sans);
  background: var(--white);
  color: var(--text-primary);
  font-size: var(--body-sm-size);
  line-height: var(--line-height-160);
  letter-spacing: var(--tracking-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body > .app {
  display: flex;
  min-height: 100vh;
}

/* ========================================
   TYPOGRAPHY SYSTEM
   From Heliograph - consistent heading hierarchy
   ======================================== */

/* H1 - Page title (60px XL) */
h1, .h1 {
  font-family: var(--font-sans);
  font-size: var(--heading-xl-size);
  font-weight: var(--weight-medium);
  line-height: var(--line-height-120);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}

/* H2 - Section titles (48px) */
h2, .h2 {
  font-family: var(--font-sans);
  font-size: var(--heading-lg-size);
  font-weight: var(--weight-medium);
  line-height: var(--line-height-120);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}

/* H3 - Subsection titles (28px) */
h3, .h3 {
  font-family: var(--font-sans);
  font-size: var(--heading-sm-size);
  font-weight: var(--weight-medium);
  line-height: var(--line-height-120);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}

/* H4 - Sub-subsection titles (18px) */
h4, .h4 {
  font-family: var(--font-sans);
  font-size: var(--heading-xxs-size);
  font-weight: var(--weight-medium);
  line-height: var(--line-height-140);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}

/* Heading utility classes - full Heliograph scale */
.heading-xl {
  font-size: var(--heading-xl-size);
  line-height: var(--line-height-120);
  letter-spacing: var(--tracking-tight);
}

.heading-lg {
  font-size: var(--heading-lg-size);
  line-height: var(--line-height-120);
  letter-spacing: var(--tracking-tight);
}

.heading-md {
  font-size: var(--heading-md-size);
  line-height: var(--line-height-120);
  letter-spacing: var(--tracking-tight);
}

.heading-sm {
  font-size: var(--heading-sm-size);
  line-height: var(--line-height-120);
  letter-spacing: var(--tracking-tight);
}

.heading-xs {
  font-size: var(--heading-xs-size);
  line-height: var(--line-height-140);
  letter-spacing: var(--tracking-tight);
}

.heading-xxs {
  font-size: var(--heading-xxs-size);
  line-height: var(--line-height-140);
  letter-spacing: var(--tracking-tight);
}

/* Eyebrow - Category labels (12px uppercase) */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--eyebrow-sm-size);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-accent-text);
}

/* Body text sizes */
.body-lg {
  font-size: var(--body-lg-size);
  line-height: var(--line-height-160);
}

.body-md {
  font-size: var(--body-md-size);
  line-height: var(--line-height-160);
}

.body-sm {
  font-size: var(--body-sm-size);
  line-height: var(--line-height-160);
}

/* Caption text */
.caption {
  font-size: var(--caption-lg-size);
  line-height: var(--line-height-168);
  color: var(--text-secondary);
}

.caption-sm {
  font-size: var(--caption-sm-size);
  line-height: var(--line-height-168);
  color: var(--text-secondary);
}

/* Card utility */
.card {
  background: var(--gray-01);
  border: 1px solid var(--gray-03);
  border-radius: var(--radius-8);
  padding: var(--space-24);
}

.card p,
.card li {
  font-size: var(--caption-lg-14-size);
  line-height: var(--caption-lg-14-line-height);
  letter-spacing: var(--caption-lg-14-letter-spacing);
  font-feature-settings: 'ss01' on;
}

.card .section-intro {
  margin-bottom: var(--space-16);
  max-width: none;
}

/* Shared heading for titled blocks inside cards or principle sections */
.block-title {
  font-size: var(--heading-xs-22-size);
  font-weight: var(--weight-medium);
  line-height: var(--heading-xs-22-line-height);
  color: var(--text-primary);
  margin: 0;
}

/* Stack utility — vertical flex with 40px gap */
.stack-40 {
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
}

.subsection .stack-40 {
  margin-top: var(--space-32);
}

/* Do/Don't example cards */
.example {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.example.do.card {
  background: var(--grass-01);
  border-color: var(--grass-03);
}

.example.dont.card {
  background: var(--lava-01);
  border-color: var(--lava-03);
}

.example p {
  color: var(--text-secondary);
  margin: 0;
}

.example ul {
  margin: 0;
  padding-left: 1.2em;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.example li {
  color: var(--text-secondary);
}

.example-label {
  font-size: var(--heading-xxs-size);
  font-weight: var(--weight-medium);
  margin-bottom: var(--space-4);
}

.example.do .example-label {
  color: var(--grass-08);
}

.example.dont .example-label {
  color: var(--lava-08);
}

/* Surface — white bg, thin border, for grouping related content */
.surface {
  background: var(--white);
  border: var(--border-width-10) solid var(--gray-03);
  border-radius: var(--radius-8);
  padding: var(--space-24);
}

.surface.surface-sm {
  padding: var(--space-16);
}

.surface.surface-tinted {
  background: var(--gray-01);
}

/* Data table — row-divider style, no outer box */
.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th {
  font-family: var(--font-mono);
  font-size: var(--caption-lg-14-size);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  text-align: left;
  padding: var(--space-8) var(--space-16) var(--space-8) 0;
  border-bottom: var(--border-width-10) solid var(--gray-04);
  white-space: nowrap;
}

.data-table td {
  font-size: var(--body-sm-16-size);
  color: var(--text-primary);
  padding: var(--space-12) var(--space-16) var(--space-12) 0;
  border-bottom: var(--border-width-10) solid var(--gray-03);
  vertical-align: top;
}

.data-table tr:last-child td {
  border-bottom: none;
}

.data-table td.mono,
.data-table th.mono {
  font-family: var(--font-mono);
}

.data-table td.muted {
  color: var(--text-secondary);
}

/* Grid utilities */
.grid {
  display: grid;
  gap: var(--space-16);
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-6 { grid-template-columns: repeat(6, 1fr); }

.gap-8 { gap: var(--space-8); }
.gap-16 { gap: var(--space-16); }
.gap-24 { gap: var(--space-24); }

/* ========================================
   LAYOUT
   Hamburger, sidebar, main content area
   ======================================== */

/* Hamburger Button */
.hamburger {
  display: none;
  position: fixed;
  top: var(--space-16);
  left: var(--space-16);
  z-index: 200;
  width: 40px;
  height: 40px;
  padding: var(--space-8);
  background: var(--purple-10);
  border: none;
  border-radius: var(--radius-8);
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--space-5);
}

.hamburger-line {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--white);
  border-radius: var(--space-2);
  transition: transform var(--duration-base) var(--ease-out), opacity var(--duration-base) var(--ease-out);
}

.hamburger.active .hamburger-line:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.active .hamburger-line:nth-child(2) {
  opacity: 0;
}

.hamburger.active .hamburger-line:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* Sidebar Overlay */
.sidebar-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 90;
}

.sidebar-overlay.active {
  display: block;
}

/* Sidebar */
.app > .sidebar {
  width: 260px;
  background: var(--purple-10);
  color: var(--white);
  padding: var(--space-32);
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  z-index: 100;
  transition: transform var(--duration-slow) var(--ease-out);
}

.logo {
  display: block;
  text-decoration: none;
  margin-bottom: var(--space-40);
  padding-bottom: var(--space-24);
  border-bottom: 1px solid var(--purple-08);
}

.logo img {
  width: 100%;
  height: auto;
  filter: brightness(0) invert(1);
}

.logo-subtitle {
  margin-top: var(--space-8);
  font-family: var(--font-mono);
  font-size: var(--caption-lg-size);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--purple-04);
}

.toc {
  list-style: none;
}

.toc-item {
  margin-bottom: var(--space-4);
}

.toc-link {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-32);
  margin-left: calc(-1 * var(--space-32));
  margin-right: calc(-1 * var(--space-32));
  color: var(--purple-03);
  text-decoration: none;
  font-size: var(--body-sm-size);
  border-radius: 0;
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}

.toc-link:hover {
  background: var(--purple-09);
  color: var(--white);
}

.toc-link:active {
  transform: scale(0.98);
}

.toc-link.active {
  background: var(--color-accent);
  color: var(--white);
  font-weight: var(--weight-medium);
}

.toc-number {
  font-family: var(--font-mono);
  font-size: var(--caption-lg-size);
  color: var(--color-accent-muted);
  min-width: 22px;
}

.toc-link.active .toc-number {
  color: var(--purple-02);
}

.sidebar-footer {
  margin-top: auto;
  padding-top: var(--space-24);
  font-family: var(--font-mono);
  font-size: var(--caption-sm-size);
  color: var(--color-accent-muted);
  letter-spacing: var(--tracking-body);
}

/* Main */
.app > .main {
  flex: 1;
  margin-left: 260px;
  min-width: 0;
  max-width: calc(100vw - 260px);
  position: relative;
}

.app > .main::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  background: var(--gradient-bg-lg-purple);
  z-index: 0;
  pointer-events: none;
}

.header {
  position: sticky;
  top: 0;
  background: var(--white);
  border-bottom: 1px solid var(--gray-03);
  padding: var(--space-16) var(--space-40);
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 50;
}

.header-title {
  font-family: var(--font-mono);
  font-size: var(--ui-label-size);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
}

.toggle-container {
  display: flex;
  background: var(--gray-02);
  padding: var(--space-3);
  border-radius: var(--radius-8);
}

.toggle-btn {
  padding: var(--space-8) var(--space-16);
  min-width: 72px;
  font-size: var(--caption-sm-size);
  font-family: var(--font-sans);
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-4);
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), transform var(--duration-instant) var(--ease-out);
}

.toggle-btn:active {
  transform: scale(0.97);
}

.toggle-btn.active {
  background: var(--white);
  color: var(--color-accent);
  font-weight: var(--weight-medium);
  box-shadow: 0 1px 3px rgba(120, 86, 255, 0.15);
}

/* Sidebar Toggle - Dark Theme */
.sidebar-toggle {
  margin-top: var(--space-32);
  padding-top: var(--space-24);
  border-top: 1px solid var(--purple-08);
}

.toggle-container.dark {
  background: var(--purple-09);
  width: 100%;
}

.toggle-container.dark .toggle-btn {
  flex: 1;
  color: var(--purple-04);
}

.toggle-container.dark .toggle-btn.active {
  background: var(--color-accent);
  color: var(--white);
  font-weight: var(--weight-medium);
  box-shadow: none;
}

.toggle-container.dark .toggle-btn:hover:not(.active) {
  background: transparent;
  color: var(--purple-02);
}

.content {
  padding: var(--space-80);
  padding-top: 0;
  padding-bottom: var(--space-160);
  width: 100%;
  max-width: var(--max-width-content);
  margin: 0 auto;
  overflow-x: hidden;
  position: relative;
  z-index: 1;
}

/* Sections */
.section {
  margin-bottom: var(--space-80);
  scroll-margin-top: var(--space-80);
  padding-top: var(--space-80);
  border-top: 1px solid var(--gray-03);
  background: var(--white);
  position: relative;
}

.section:first-child {
  border-top: none;
  padding-top: 0;
}

/* Intro Section - Full Bleed Hero */
.section.intro-section {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  min-height: 100vh;
  background: transparent;
  padding-bottom: var(--space-80);
  margin-bottom: var(--space-80);
  border-top: none;
  position: relative;
  z-index: 1;
}

.intro-hero-title {
  font-size: var(--heading-xl-60-size);
  font-weight: var(--heading-xl-60-weight);
  line-height: var(--heading-xl-60-line-height);
  letter-spacing: var(--heading-xl-60-letter-spacing);
  color: var(--white);
  margin: 0 0 var(--space-24) 0;
}

.intro-hero-body {
  color: var(--white-70pct);
  font-size: var(--body-lg-18-size);
  line-height: 1.6;
  max-width: 480px;
  margin: 0;
}

.section.strategy-hero {
  border-top: none;
}

/* Section Headers */
.section-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  margin-bottom: var(--space-16);
}

/* Section title - size inherited from h1/h2 */
.section-tag {
  margin-bottom: var(--space-8);
}

/* Section eyebrow label (12px mono uppercase) */
.section-label {
  font-family: var(--font-mono);
  font-size: var(--eyebrow-sm-size);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--text-muted);
}

/* Section intro paragraph */
.section-intro {
  color: var(--text-secondary);
  margin-bottom: var(--space-24);
  max-width: var(--max-width-text);
}

/* Subsections */
.subsection {
  margin-top: var(--space-80);
}

/* Subsection title - spacing only, size from h3/h4 base */
.subsection-title {
  margin-bottom: var(--space-16);
}

/* Brand Statements - 3-column card grid */
.brand-statements {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-16);
  margin-top: var(--space-40);
}

.brand-statement {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.brand-statement .statement-text {
  font-size: var(--heading-sm-size);
  font-weight: var(--weight-medium);
  line-height: var(--line-height-120);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  margin: 0;
}

/* Our Story + What We Do - 2-column prose grid */
.story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-40);
  margin-top: var(--space-80);
}

.story-grid .subsection-title {
  margin-bottom: var(--space-16);
}

/* Values - Row/rule pattern */
.values-list {
  display: flex;
  flex-direction: column;
  margin-top: var(--space-32);
}


.value-item {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--space-40);
  align-items: start;
  padding: var(--space-24) 0;
  border-bottom: 1px solid var(--gray-03);
}

.value-item:first-child {
  border-top: 1px solid var(--gray-03);
}

.value-item:last-child {
  border-bottom: none;
}

.value-name {
  font-size: var(--body-sm-size);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}

.value-desc {
  font-size: var(--caption-lg-size);
  line-height: var(--caption-lg-14-line-height);
  color: var(--text-secondary);
}

/* Voice Principles */
.tone-guidance p {
  color: var(--text-secondary);
  margin-bottom: var(--space-8);
}

.tone-guidance p:last-child {
  margin-bottom: 0;
}

.tone-guidance strong {
  font-family: var(--font-sans);
  font-size: inherit;
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  letter-spacing: inherit;
  text-transform: none;
}

/* Subsection Note — uses .card for bg/border/radius/padding */
.subsection-note {
  margin-top: var(--space-16);
  font-size: var(--caption-lg-size);
  line-height: var(--caption-lg-14-line-height);
  color: var(--text-secondary);
}

.subsection-note strong {
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}

/* Logo Display */
.logo-grid {
  /* uses .grid.grid-2.gap-24 */
}

.logo-grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.logo-item {
  text-align: center;
  min-width: 0;
}

.logo-display {
  padding: var(--space-24);
  border-radius: var(--radius-16);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  margin-bottom: var(--space-8);
  overflow: hidden;
}

.logo-display.light {
  background: var(--gray-02);
}

.logo-display.dark {
  background: var(--gray-10);
}

.logo-display img {
  width: 100%;
  max-width: 180px;
  height: auto;
  object-fit: contain;
}

.logo-display.dark img {
  filter: brightness(0) invert(1);
}

.logo-mark {
  max-width: 64px;
  width: auto;
}

.logo-caption {
  font-size: var(--caption-sm-size);
  color: var(--text-muted);
  margin-bottom: var(--space-8);
}

.download-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--ui-label-xs-size);
  color: var(--text-primary);
  text-decoration: none;
  padding: var(--space-4) var(--space-8);
  background: var(--gray-02);
  border-radius: var(--radius-4);
  transition: background var(--duration-fast) var(--ease-out), transform var(--duration-instant) var(--ease-out);
}

.download-btn:hover {
  background: var(--purple-02);
}

.download-btn:active {
  transform: scale(0.97);
}

/* ========================================
   COMPONENTS
   Buttons, cards, form elements
   ======================================== */

/* Dark Button (Primary CTA) */
.btn-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  background: var(--gray-10);
  color: var(--white);
  font-family: var(--font-sans);
  font-size: var(--body-sm-size);
  font-weight: var(--weight-medium);
  height: var(--sizing-40);
  padding: 0 var(--space-14) 0 var(--space-16);
  border-radius: var(--radius-40);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-out), transform var(--duration-instant) var(--ease-out);
}

.btn-dark:hover {
  background: var(--gray-09);
}

.btn-dark:active {
  transform: scale(0.97);
}

.btn-dark svg {
  width: 6px;
  height: 10px;
}

/* ========================================
   SECTION-SPECIFIC STYLES
   Colors, typography, spacing, layout demos
   ======================================== */

/* Colors */
.color-section {
  margin-bottom: var(--space-32);
}

.color-section.primary-highlight {
  margin-top: var(--space-48);
  margin-bottom: var(--space-40);
  padding-bottom: var(--space-40);
  border-bottom: var(--border-width-10) solid var(--gray-03);
}

.color-section.primary-highlight .color-row .color-swatch {
  aspect-ratio: 1 / 2;
}

.primary-color-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-24);
  margin-bottom: var(--space-20);
}

.primary-color-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.primary-color-name {
  font-size: var(--heading-sm-28-size);
  font-weight: var(--heading-sm-28-weight);
  line-height: var(--heading-sm-28-line-height);
  letter-spacing: var(--heading-sm-28-letter-spacing);
  color: var(--text-primary);
}

.primary-color-desc {
  font-size: var(--body-sm-16-size);
  line-height: var(--line-height-160);
  color: var(--text-secondary);
  max-width: 480px;
}

.primary-color-token {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-4);
  flex-shrink: 0;
}

.primary-color-hex {
  font-family: var(--font-mono);
  font-size: var(--heading-md-36-size);
  font-weight: var(--weight-medium);
  line-height: 1;
  color: var(--purple-06);
}

.primary-token-name {
  font-family: var(--font-mono);
  font-size: var(--caption-sm-12-size);
  color: var(--purple-07);
}

.color-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-8);
}

.color-name {
  font-size: var(--heading-xxs-size);
  font-weight: var(--weight-medium);
}

.color-primary-badge {
  font-family: var(--font-mono);
  font-size: var(--ui-label-xxs-size);
  background: var(--color-accent);
  color: var(--white);
  padding: var(--space-2) var(--space-6);
  border-radius: var(--radius-4);
  text-transform: uppercase;
}

.color-desc {
  font-size: var(--caption-lg-size);
  line-height: var(--line-height-168);
  color: var(--text-muted);
  margin-bottom: var(--space-16);
}

.color-row {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  width: 100%;
}

.color-swatch {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-6);
  cursor: pointer;
  transition: transform 250ms cubic-bezier(0.34, 1.2, 0.64, 1);
}

.color-swatch:hover {
  transform: translateY(-6px);
}

.color-swatch:active {
  transform: translateY(-2px);
  transition-duration: 80ms;
}

.color-swatch.primary {
  grid-column: span 1;
}

.swatch-label {
  font-family: var(--font-mono);
  font-size: var(--ui-label-size);
  color: inherit;
  opacity: 0.7;
}

.swatch-hex {
  font-family: var(--font-mono);
  font-size: var(--ui-label-size);
  color: inherit;
  opacity: 0.9;
  margin-top: 2px;
}

.color-swatch.light .swatch-label,
.color-swatch.light .swatch-hex {
  color: var(--text-primary);
}

.color-swatch.dark .swatch-label,
.color-swatch.dark .swatch-hex {
  color: var(--white);
}

/* Usage Examples */
.usage-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-16);
  margin-top: var(--space-24);
}

.usage-card {
  border-radius: var(--radius-8);
  padding: var(--space-24);
  min-height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.usage-card.gray-accent {
  background: var(--gray-02);
  color: var(--text-primary);
  border: 1px solid var(--gray-03);
}

.usage-card.white-accent {
  background: var(--white);
  color: var(--text-primary);
  border: 1px solid var(--gray-03);
}

.usage-label {
  font-family: var(--font-mono);
  font-size: var(--ui-label-size);
  text-transform: uppercase;
  opacity: 0.7;
}

.usage-card .accent {
  color: var(--text-primary);
  font-weight: var(--weight-medium);
}

/* Color Usage Modes — unified grid */
.mode-all-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-12);
  align-items: stretch;
}

.mode-principle-card {
  border-radius: var(--radius-8);
  padding: var(--space-24);
}

.mode-principle-headline {
  font-size: var(--heading-sm-28-size);
  font-weight: var(--weight-medium);
  margin-bottom: var(--space-8);
}

.mode-principle-body {
  font-size: var(--body-sm-16-size);
  line-height: var(--line-height-160);
}

.mode-token-list {
  margin-top: var(--space-16);
  padding-top: var(--space-16);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--caption-sm-12-size);
}

.mode-dark-purple .mode-token-list,
.mode-dark-pool .mode-token-list,
.mode-dark-mint .mode-token-list,
.mode-dark-lava .mode-token-list,
.mode-dark-peach .mode-token-list,
.mode-dark-mustard .mode-token-list,
.mode-dark-grass .mode-token-list {
  border-top-color: rgba(255, 255, 255, 0.15);
}

.mode-token-row {
  display: flex;
  gap: var(--space-12);
}

.mode-token-row dt {
  opacity: 0.5;
  min-width: 36px;
}


.mode-swatch-card {
  border-radius: var(--radius-8);
  padding: var(--space-16);
  min-height: 180px;
  display: flex;
  flex-direction: column;
}

.mode-swatch-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.mode-swatch-card .mode-token-list {
  margin-top: auto;
  padding-top: var(--space-12);
  margin-bottom: 0;
}

.mode-swatch-headline {
  font-size: var(--heading-xs-22-size);
  font-weight: var(--weight-medium);
  line-height: 1.2;
}

.mode-swatch-body {
  font-size: var(--caption-sm-12-size);
  line-height: 1.4;
}


.mini-headline {
  display: block;
  font-size: var(--caption-lg-size);
  font-weight: var(--weight-medium);
  margin-bottom: var(--space-4);
}

.mini-body {
  display: block;
  font-size: var(--caption-sm-size);
  opacity: 0.7;
}

/* Color Pairing */
.pairing-grid {
  /* uses .grid.grid-2.gap-24 */
  margin-bottom: var(--space-32);
}

.pairing-card {
  border-radius: var(--radius-8);
  overflow: hidden;
  border: 1px solid var(--gray-03);
}

.pairing-preview {
  padding: var(--space-24);
  min-height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.pairing-preview.default-page {
  background: var(--white);
}

.pairing-preview.default-page .pairing-headline {
  color: var(--text-primary);
  font-size: var(--heading-xxs-size);
  font-weight: var(--weight-medium);
  margin-bottom: var(--space-8);
}

.pairing-preview.default-page .pairing-body {
  color: var(--text-body);
  font-size: var(--body-md-size);
  margin-bottom: var(--space-16);
}

.pairing-preview.default-page .pairing-link {
  color: var(--purple-06);
  font-size: var(--body-md-size);
  font-weight: var(--weight-medium);
}

.pairing-preview .pairing-headline {
  font-size: var(--heading-xxs-size);
  font-weight: var(--weight-medium);
  margin-bottom: var(--space-8);
}

.pairing-preview .pairing-body {
  font-size: var(--body-md-size);
}

.pairing-label {
  padding: var(--space-16) var(--space-16);
  background: var(--gray-01);
  font-family: var(--font-mono);
  font-size: var(--caption-sm-size);
  color: var(--text-muted);
}

/* Avoid section */
.pairing-avoid {
  background: var(--gray-01);
  border-radius: var(--radius-8);
  padding: var(--space-16);
}

.avoid-title {
  font-size: var(--caption-lg-size);
  font-weight: var(--weight-medium);
  color: var(--lava-07);
  margin-bottom: var(--space-16);
}

.avoid-examples {
  display: flex;
  gap: var(--space-32);
}

.avoid-item {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  font-size: var(--body-md-size);
  color: var(--text-secondary);
}

.avoid-swatch {
  width: 48px;
  height: 24px;
  border-radius: var(--radius-4);
}

.avoid-swatch.clash-1 {
  background: linear-gradient(90deg, var(--lava-06) 50%, var(--mustard-06) 50%);
}

.avoid-swatch.clash-2 {
  background: linear-gradient(90deg, var(--purple-06) 33%, var(--pool-06) 33%, var(--pool-06) 66%, var(--mint-06) 66%);
}

/* Gradients */
.gradient-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(115px, 1fr));
  gap: var(--space-16);
  margin-bottom: var(--space-40);
}

.gradient-swatch {
  height: 200px;
  border-radius: var(--radius-8);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-16);
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}

.gradient-swatch:active {
  transform: scale(0.97);
}

.gradient-label {
  font-family: var(--font-mono);
  font-size: var(--caption-sm-size);
  color: var(--white);
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.gradient-label.dark {
  color: var(--text-primary);
  text-shadow: 0 1px 2px rgba(255,255,255,0.5);
}

.gradient-category-title {
  font-size: var(--heading-xxs-size);
  font-weight: var(--weight-medium);
  line-height: var(--line-height-140);
  margin-bottom: var(--space-16);
  margin-top: var(--space-40);
}

.gradient-category-title:first-of-type {
  margin-top: 0;
}

/* Typography */
.typeface-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  margin-top: var(--space-32);
}

.typeface-card {
  border-radius: var(--radius-8);
  padding: var(--space-24);
  background: var(--gray-01);
  border: 1px solid var(--gray-03);
  display: flex;
  flex-direction: column;
}

.typeface-display {
  font-size: var(--heading-lg-48-size);
  font-weight: var(--heading-lg-48-weight);
  line-height: 1.1;
  letter-spacing: var(--heading-lg-48-letter-spacing);
}

.typeface-display.mono {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--heading-md-36-size);
}

.typeface-desc {
  margin-top: auto;
  padding-top: var(--space-16);
  border-top: 1px solid var(--gray-03);
}

.typeface-role {
  font-size: var(--caption-lg-14-size);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  letter-spacing: var(--caption-lg-14-letter-spacing);
  margin-bottom: var(--space-4);
}

.typeface-scope {
  font-size: var(--caption-lg-14-size);
  color: var(--text-secondary);
  line-height: var(--line-height-160);
  letter-spacing: var(--caption-lg-14-letter-spacing);
}

.type-sample {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--space-40);
  align-items: center;
  padding: var(--space-24) 0;
  border-top: 1px solid var(--gray-03);
}

.type-sample:last-child {
  border-bottom: 1px solid var(--gray-03);
}

.type-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.type-meta span {
  font-family: var(--font-mono);
  font-size: var(--caption-lg-size);
  color: var(--text-primary);
  display: block;
}

.type-meta span:first-child {
  font-weight: 500;
}

.type-meta span:not(:first-child) {
  color: var(--text-muted);
}

.type-preview {
  font-size: var(--heading-md-size);
  font-weight: var(--weight-medium);
  line-height: var(--line-height-120);
}

.type-preview.mono {
  font-family: var(--font-mono);
  font-size: var(--caption-lg-14-size);
  font-weight: var(--weight-regular);
  color: var(--text-primary);
  letter-spacing: var(--caption-lg-14-letter-spacing);
}

.type-alphabet {
  font-size: var(--caption-lg-size);
  line-height: var(--line-height-168);
  color: var(--text-muted);
  margin-top: var(--space-8);
}

/* Spacing */
.spacing-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  width: 100%;
}

.spacing-item {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  width: 100%;
  background: transparent;
  padding: var(--space-16) 0;
  border-bottom: 1px solid var(--gray-03);
}

.spacing-item:last-child {
  border-bottom: none;
}

.spacing-info {
  display: flex;
  align-items: baseline;
  gap: var(--space-8);
  min-width: 180px;
}

.spacing-box {
  background: var(--purple-02);
  border: 1px solid var(--purple-03);
  height: var(--space-24);
  border-radius: var(--radius-4);
  flex-shrink: 0;
}

.spacing-label {
  font-family: var(--font-mono);
  font-size: var(--caption-lg-size);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}

.spacing-value {
  font-family: var(--font-mono);
  font-size: var(--caption-lg-size);
  color: var(--text-muted);
}

/* Border Radius */
.radius-showcase {
  display: flex;
  flex-direction: column;
}

.radius-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-24) 0;
  border-top: 1px solid var(--gray-03);
}

.radius-item:last-child {
  border-bottom: 1px solid var(--gray-03);
}

.radius-info {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-16);
}

.radius-use {
  font-family: var(--font-mono);
  font-size: var(--caption-lg-size);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}

.radius-meta {
  display: flex;
  align-items: baseline;
  gap: var(--space-8);
}

.radius-box {
  background: var(--purple-02);
  border: 1px solid var(--purple-03);
}

.radius-box.radius-shape-button  { width: 160px; height: 40px; }
.radius-box.radius-shape-pill    { width: 160px; height: 40px; }
.radius-box.radius-shape-card-sm { width: 35%;   height: 180px; }
.radius-box.radius-shape-card-md { width: 55%;   height: 300px; }
.radius-box.radius-shape-card-lg { width: 75%;   height: 420px; }
.radius-box.radius-shape-card-xl { width: 100%;  height: 540px; }

.radius-box.radius-4 { border-radius: 4px; }
.radius-box.radius-8 { border-radius: 8px; }
.radius-box.radius-16 { border-radius: 16px; }
.radius-box.radius-24 { border-radius: 24px; }
.radius-box.radius-32 { border-radius: 32px; }
.radius-box.radius-40 { border-radius: 40px; }

.radius-label {
  font-family: var(--font-mono);
  font-size: var(--caption-lg-size);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}

.radius-value {
  font-family: var(--font-mono);
  font-size: var(--caption-lg-size);
  color: var(--text-muted);
}

/* Grid System */
.grid-viz-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

.grid-viz-item {
  display: flex;
  align-items: center;
  gap: var(--space-40);
  width: 100%;
  padding: var(--space-24) 0;
  border-bottom: 1px solid var(--gray-03);
}

.grid-viz-item:nth-child(1) { width: 100%; }
.grid-viz-item:nth-child(2) { width: 80%; }
.grid-viz-item:nth-child(3) { width: 58%; }
.grid-viz-item:nth-child(4) { width: 40%; }

.grid-viz-item:last-child {
  border-bottom: none;
}

.grid-viz-meta {
  width: 200px;
  flex-shrink: 0;
}

.grid-viz-header {
  display: flex;
  align-items: baseline;
  gap: var(--space-8);
  margin-bottom: var(--space-8);
}

.grid-viz-name {
  font-family: var(--font-mono);
  font-size: var(--caption-lg-size);
  font-weight: 500;
  color: var(--text-primary);
}

.grid-viz-breakpoint {
  font-family: var(--font-mono);
  font-size: var(--caption-lg-size);
  color: var(--text-muted);
}

.grid-viz-specs {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.grid-viz-specs span {
  font-family: var(--font-mono);
  font-size: var(--caption-lg-size);
  color: var(--text-muted);
  line-height: 1.5;
}

.grid-viz-track {
  flex: 1;
  display: flex;
  align-items: stretch;
  height: 40px;
}

.grid-viz-margin-zone {
  background: repeating-linear-gradient(
    -45deg,
    var(--purple-03),
    var(--purple-03) 1px,
    transparent 1px,
    transparent 6px
  );
  border: 1px solid var(--purple-03);
  flex-shrink: 0;
}

.grid-viz-columns-zone {
  flex: 1;
  display: grid;
  gap: 3px;
  padding: 0 3px;
}

.grid-viz-col {
  background: var(--purple-02);
  border: 1px solid var(--purple-03);
}

/* Margin proportions: margin / total viewport width */
.grid-viz-margin-desktop-plus { flex: 0 0 3.33%; }
.grid-viz-margin-desktop       { flex: 0 0 3.33%; }
.grid-viz-margin-tablet        { flex: 0 0 3.96%; }
.grid-viz-margin-phone         { flex: 0 0 4.17%; }

.grid-viz-cols-12 { grid-template-columns: repeat(12, 1fr); }
.grid-viz-cols-6  { grid-template-columns: repeat(6, 1fr); }
.grid-viz-cols-2  { grid-template-columns: repeat(2, 1fr); }

/* Whitespace Guide */
.ws-guide {
  display: flex;
  flex-direction: column;
}

.ws-item {
  padding: var(--space-16) 0;
  border-bottom: 1px solid var(--gray-03);
}

.ws-item:last-child {
  border-bottom: none;
}

.ws-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-16);
  margin-bottom: var(--space-12);
}

.ws-label {
  font-family: var(--font-mono);
  font-size: var(--caption-lg-size);
  font-weight: 500;
  color: var(--text-primary);
}

.ws-meta {
  display: flex;
  align-items: baseline;
  gap: var(--space-8);
}

.ws-spacer {
  background: var(--purple-02);
  border: 1px solid var(--purple-03);
  border-radius: var(--radius-4);
  width: 100%;
}

/* AI Integration */
/* AI Reference — Quick Reference grouped rules */
.ai-ref-group {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--space-40);
  align-items: start;
  padding: var(--space-24) 0;
  border-bottom: 1px solid var(--gray-03);
}

.ai-ref-group:first-child {
  border-top: 1px solid var(--gray-03);
}

.ai-ref-item {
  padding: var(--space-8) 0;
  border-bottom: 1px solid var(--gray-02);
}

.ai-ref-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.ai-ref-item:first-child {
  padding-top: 0;
}

.ai-ref-item code {
  font-size: var(--caption-sm-size);
  background: var(--gray-03);
  padding: 2px 5px;
  border-radius: var(--radius-4);
}

.vocab-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-24);
}

.vocab-column-label {
  font-size: var(--ui-label-size);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  margin-bottom: var(--space-8);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.7;
}

.vocab-list {
  font-size: var(--caption-lg-size);
  line-height: var(--line-height-168);
  color: var(--text-secondary);
}


/* ========================================
   IMAGERY
   Illustrations, icons, visual assets
   ======================================== */

/* Illustrations */
.illustrations-section {
  margin-bottom: var(--space-40);
}

.illustrations-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-16);
}

.download-all-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--gray-10);
  color: var(--white);
  font-family: var(--font-sans);
  font-size: var(--caption-lg-size);
  font-weight: var(--weight-medium);
  height: 36px;
  padding: 0 14px 0 16px;
  border-radius: 40px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-out), transform var(--duration-instant) var(--ease-out);
}

.download-all-btn:hover {
  background: var(--gray-09);
}

.download-all-btn:active {
  transform: scale(0.97);
}

.brand-illustrations-grid {
  /* uses .grid.grid-3 */
}

.spot-illustrations-grid {
  /* uses .grid.grid-6.gap-8 */
}

/* Icons Subsection */
.icons-subsection {
  margin-top: var(--space-80);
}

.subsection-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-16);
}

.subsection-header .subsection-title {
  margin-bottom: 0;
}

.icon-style-toggle {
  display: flex;
  background: var(--gray-02);
  padding: var(--space-3);
  border-radius: var(--radius-8);
}

.style-btn {
  padding: var(--space-4) var(--space-16);
  font-size: var(--caption-sm-size);
  font-family: var(--font-sans);
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 6px;
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}

.style-btn.active {
  background: var(--white);
  color: var(--color-accent);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.icons-category-title {
  font-size: var(--heading-xxs-size);
  font-weight: var(--weight-medium);
  line-height: var(--line-height-140);
  color: var(--text-primary);
  margin-top: var(--space-40);
  margin-bottom: var(--space-16);
}

.icons-subcategory {
  font-family: var(--font-mono);
  font-size: var(--caption-sm-size);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  margin-top: var(--space-24);
  margin-bottom: var(--space-8);
}

.icons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: var(--space-8);
}

.icons-desc {
  font-size: var(--caption-lg-size);
  line-height: var(--line-height-168);
  color: var(--text-muted);
  margin-bottom: var(--space-8);
}

.icon-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-16);
  background: var(--gray-01);
  border: 1px solid var(--gray-03);
  border-radius: var(--radius-8);
  transition: background var(--duration-fast) var(--ease-out);
}

.icon-card:hover {
  background: var(--gray-02);
}

.icon-card img {
  width: auto;
  height: auto;
  max-width: 100%;
  margin-bottom: var(--space-8);
}

.icon-card .icon-fill {
  display: none;
}

.icons-subsection.show-fill .icon-card .icon-line {
  display: none;
}

.icons-subsection.show-fill .icon-card .icon-fill {
  display: block;
}

.icon-name {
  font-size: var(--ui-label-size);
  color: var(--text-secondary);
  text-align: center;
}

/* Row table layout - line and fill as columns, category-first */
.icons-table {
  border: 1px solid var(--gray-03);
  border-radius: var(--radius-8);
  overflow: hidden;
  margin-bottom: var(--space-40);
}

.icons-table-header {
  display: grid;
  grid-template-columns: 1fr 72px 72px;
  background: var(--gray-02);
  border-bottom: 1px solid var(--gray-03);
}

.icons-table-header > span:first-child {
  padding: var(--space-8) var(--space-16);
}

.icons-col-label {
  font-family: var(--font-mono);
  font-size: var(--caption-sm-size);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) 0;
}

.icons-table-row {
  display: grid;
  grid-template-columns: 1fr 72px 72px;
  align-items: center;
  border-bottom: 1px solid var(--gray-03);
}

.icons-table-row:last-child {
  border-bottom: none;
}

.icons-row-name {
  padding: var(--space-8) var(--space-16);
  font-size: var(--ui-label-size);
  color: var(--text-secondary);
}

.icon-table-cell {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--space-10) 0;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out);
  height: 100%;
}

.icon-table-cell:hover {
  background: var(--purple-01);
}

.icon-table-cell.icon-copied {
  background: var(--purple-02);
}

.icon-table-cell img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  display: block;
  pointer-events: none;
}

.illustration-card {
  background: var(--gray-01);
  border: 1px solid var(--gray-03);
  border-radius: var(--radius-8);
  padding: var(--space-16);
  text-align: center;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out), transform var(--duration-instant) var(--ease-out);
}

.illustration-card:active {
  transform: scale(0.97);
}

.brand-illustrations-grid .illustration-card {
  padding: var(--space-24);
}

.brand-illustrations-grid .illustration-card img {
  width: 100%;
  height: 240px;
  object-fit: contain;
  margin-bottom: var(--space-8);
}

.spot-illustrations-grid .illustration-card img {
  width: 100%;
  height: 48px;
  object-fit: contain;
  margin-bottom: var(--space-4);
}

.illustration-name {
  font-size: var(--ui-label-size);
  color: var(--text-secondary);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Code Block */
.code-block {
  background: var(--purple-10);
  padding: var(--space-24);
  border-radius: var(--radius-8);
  font-family: var(--font-mono);
  font-size: var(--caption-lg-size);
  overflow-x: auto;
  overflow-y: auto;
  max-height: 320px;
  position: relative;
  margin-top: var(--space-16);
  scrollbar-color: var(--purple-07) var(--purple-09);
}

.code-block::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

.code-block::-webkit-scrollbar-track {
  background: var(--purple-09);
  border-radius: 3px;
}

.code-block::-webkit-scrollbar-thumb {
  background: var(--purple-07);
  border-radius: 3px;
}

.code-block::-webkit-scrollbar-thumb:hover {
  background: var(--purple-05);
}

.code-block-label {
  font-family: var(--font-mono);
  font-size: var(--caption-lg-14-size);
  color: var(--purple-05);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  background: var(--purple-10);
  padding: var(--space-16) var(--space-24);
  border-radius: var(--radius-8) var(--radius-8) 0 0;
  margin-top: var(--space-48);
  margin-bottom: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.code-block-label .copy-btn {
  position: static;
  margin: 0;
}

.code-block-label + .code-block {
  border-radius: 0 0 var(--radius-8) var(--radius-8);
  margin-top: 0;
}

.code-block code {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  color: var(--white-70pct);
  background: transparent;
}

.code-block .code-line {
  display: flex;
  gap: var(--space-8);
}

.code-block code span {
  background: transparent !important;
}

.code-block .comment {
  color: var(--purple-05);
}

.code-block .property {
  color: var(--white-70pct);
}

.code-block .value {
  color: var(--purple-03);
}

.copy-btn {
  position: absolute;
  top: var(--space-8);
  right: var(--space-8);
  background: var(--purple-08);
  border: none;
  color: var(--purple-03);
  font-family: var(--font-mono);
  font-size: var(--caption-sm-12-size);
  padding: var(--space-6) var(--space-12);
  border-radius: var(--radius-4);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out), transform var(--duration-instant) var(--ease-out);
}

.copy-btn:hover {
  background: var(--purple-07);
}

.copy-btn:active {
  transform: scale(0.97);
}

/* ========================================
   AGENT MODE
   Dark theme for AI/agent content view
   ======================================== */

.agent-content {
  display: none;
  padding-top: var(--space-40);
}

.agent-content.active {
  display: block;
}

.main.agent-mode {
  background: var(--purple-10);
}

.main.agent-mode::before {
  display: none;
}

.main.agent-mode .header {
  background: var(--purple-10);
  border-bottom: 1px solid var(--purple-08);
}

.main.agent-mode .header-title {
  color: var(--purple-03);
}

.main.agent-mode .toggle-container {
  background: var(--purple-08);
}

.main.agent-mode .toggle-btn {
  color: var(--purple-03);
}

.main.agent-mode .toggle-btn.active {
  background: var(--color-accent-text);
  color: var(--white);
}

.main.agent-mode .content {
  max-width: 100%;
  padding-top: var(--space-80);
}

.human-content.hidden {
  display: none;
}

.agent-file {
  position: relative;
  max-width: 900px;
}

.agent-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-24);
}

.agent-filename {
  display: inline-flex;
  align-items: center;
  background: var(--color-accent-text);
  color: var(--purple-02);
  padding: var(--space-8) var(--space-16);
  border-radius: var(--radius-4);
  font-size: var(--caption-lg-size);
  font-family: var(--font-mono);
  height: 32px;
}

.agent-note {
  font-size: var(--caption-lg-size);
  font-family: var(--font-mono);
  color: var(--purple-03);
  padding: var(--space-16);
  background: rgba(193, 177, 255, 0.05);
  border: 1px solid rgba(193, 177, 255, 0.15);
  margin-bottom: var(--space-16);
  border-radius: var(--radius-4);
  line-height: 1.6;
}

.agent-note pre {
  margin: var(--space-12) 0 0 0;
  font-family: var(--font-mono);
  font-size: var(--caption-lg-size);
  color: var(--purple-02);
  line-height: 1.8;
}

.agent-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  background: var(--color-accent-text);
  border: none;
  color: var(--purple-02);
  font-family: var(--font-mono);
  font-size: var(--caption-lg-size);
  padding: var(--space-8) var(--space-16);
  border-radius: var(--radius-4);
  height: 32px;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out), transform var(--duration-instant) var(--ease-out);
}

.agent-copy-btn:hover {
  background: var(--color-accent);
}

.agent-copy-btn:active {
  transform: scale(0.97);
}

.agent-code {
  color: var(--purple-02);
  font-family: var(--font-mono);
  font-size: var(--caption-lg-size);
  line-height: 1.8;
  white-space: pre-wrap;
}

/* Toast */
.copied-toast {
  position: fixed;
  bottom: var(--space-24);
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--gray-10);
  color: var(--white);
  padding: var(--space-8) var(--space-16);
  border-radius: var(--radius-8);
  font-size: var(--caption-sm-size);
  opacity: 0;
  transition: transform var(--duration-base) var(--ease-out), opacity var(--duration-base) var(--ease-out);
  z-index: 1000;
}

.copied-toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* ========================================
   UTILITIES
   Spacing, layout, and helper classes
   ======================================== */

.mb-24 {
  margin-bottom: var(--space-24);
}

.mt-40 {
  margin-top: var(--space-40);
}

.mt-48 {
  margin-top: 48px;
}

.mt-64 {
  margin-top: 64px;
}

.type-section-title {
  font-size: var(--heading-xxs-size);
  font-weight: var(--weight-medium);
  line-height: var(--line-height-140);
  margin-bottom: var(--space-24);
  color: var(--text-primary);
}

.text-muted {
  color: var(--text-secondary);
  line-height: 1.7;
}

/* Spacing visualization bars - width represents the spacing value */
.spacing-box-4 { width: 16px; }
.spacing-box-12 { width: 48px; }
.spacing-box-8 { width: 32px; }
.spacing-box-16 { width: 64px; }
.spacing-box-24 { width: 96px; }
.spacing-box-32 { width: 128px; }
.spacing-box-40 { width: 160px; }
.spacing-box-48 { width: 192px; }
.spacing-box-64 { width: 256px; }
.spacing-box-80 { width: 320px; }
.spacing-box-160 { width: 400px; }

/* Hover states - only for devices that support hover */
/* ========================================
   RESPONSIVE
   Breakpoints and mobile adaptations
   ======================================== */

@media (hover: hover) and (pointer: fine) {
  .gradient-swatch:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  }

  .illustration-card:hover {
    background: var(--gray-02);
  }
}

/* Responsive - Tablet breakpoint (808px per Heliograph) */
@media (max-width: 808px) {
  .hamburger {
    display: flex;
  }

  .sidebar {
    transform: translateX(-100%);
  }

  .sidebar.active {
    transform: translateX(0);
  }

  .app > .main {
    margin-left: 0;
    max-width: 100vw;
  }

  .content {
    padding: var(--space-24);
    padding-top: 72px;
    max-width: 100%;
  }

  .brand-statement .statement-text {
    font-size: var(--heading-xs-size);
  }

  .brand-statements {
    grid-template-columns: 1fr;
  }

  .story-grid {
    grid-template-columns: 1fr;
  }

  .value-item {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .type-sample {
    grid-template-columns: 1fr;
  }

  .logo-grid {
    grid-template-columns: 1fr;
  }

  .logo-grid.logo-grid-3 {
    grid-template-columns: 1fr;
  }

  .color-row {
    grid-template-columns: repeat(5, 1fr);
  }

  .usage-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .brand-illustrations-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .spot-illustrations-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .icons-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .color-modes-grid {
    grid-template-columns: 1fr;
  }

  .mode-variations-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .pairing-grid {
    grid-template-columns: 1fr;
  }

  .avoid-examples {
    flex-direction: column;
    gap: var(--space-16);
  }

  .tone-comparison {
    grid-template-columns: 1fr;
  }

  .grid-specs {
    grid-template-columns: 1fr;
  }

  .ai-guidelines {
    grid-template-columns: 1fr;
  }


  .voice-examples.grid-2 {
    grid-template-columns: 1fr;
  }
}

/* ========================================
   COLOR MODE UTILITY CLASSES
   Apply to containers for automatic
   background + text color combinations
   ======================================== */

/* Mode 1 — Light Backgrounds (White/Gray) */
.mode-light {
  background-color: var(--white);
  color: var(--black-70pct);
  border: var(--border-width-10) solid var(--gray-03);
}
.mode-light h1, .mode-light h2, .mode-light h3, .mode-light h4,
.mode-light .headline {
  color: var(--text-primary);
}

.mode-light-gray {
  background-color: var(--gray-01);
  color: var(--black-70pct);
  border: var(--border-width-10) solid var(--gray-03);
  margin-bottom: var(--space-24);
}
.mode-light-gray h1, .mode-light-gray h2, .mode-light-gray h3, .mode-light-gray h4,
.mode-light-gray .headline {
  color: var(--text-primary);
}

/* Mode 2 — Tinted Backgrounds (Color-02) */
.mode-tinted-purple {
  background-color: var(--purple-02);
  color: var(--black-70pct);
}
.mode-tinted-purple h1, .mode-tinted-purple h2, .mode-tinted-purple h3, .mode-tinted-purple h4,
.mode-tinted-purple .headline {
  color: var(--purple-09);
}

.mode-tinted-pool {
  background-color: var(--pool-02);
  color: var(--black-70pct);
}
.mode-tinted-pool h1, .mode-tinted-pool h2, .mode-tinted-pool h3, .mode-tinted-pool h4,
.mode-tinted-pool .headline {
  color: var(--pool-09);
}

.mode-tinted-mint {
  background-color: var(--mint-02);
  color: var(--black-70pct);
}
.mode-tinted-mint h1, .mode-tinted-mint h2, .mode-tinted-mint h3, .mode-tinted-mint h4,
.mode-tinted-mint .headline {
  color: var(--mint-09);
}

.mode-tinted-lava {
  background-color: var(--lava-02);
  color: var(--black-70pct);
}
.mode-tinted-lava h1, .mode-tinted-lava h2, .mode-tinted-lava h3, .mode-tinted-lava h4,
.mode-tinted-lava .headline {
  color: var(--lava-09);
}

.mode-tinted-peach {
  background-color: var(--peach-02);
  color: var(--black-70pct);
}
.mode-tinted-peach h1, .mode-tinted-peach h2, .mode-tinted-peach h3, .mode-tinted-peach h4,
.mode-tinted-peach .headline {
  color: var(--peach-09);
}

.mode-tinted-mustard {
  background-color: var(--mustard-02);
  color: var(--black-70pct);
}
.mode-tinted-mustard h1, .mode-tinted-mustard h2, .mode-tinted-mustard h3, .mode-tinted-mustard h4,
.mode-tinted-mustard .headline {
  color: var(--mustard-09);
}

.mode-tinted-grass {
  background-color: var(--grass-02);
  color: var(--black-70pct);
}
.mode-tinted-grass h1, .mode-tinted-grass h2, .mode-tinted-grass h3, .mode-tinted-grass h4,
.mode-tinted-grass .headline {
  color: var(--grass-09);
}

/* Mode 3 — Dark Backgrounds (Color-10) */
.mode-dark-purple {
  background-color: var(--purple-10);
  color: var(--white-70pct);
}
.mode-dark-purple h1, .mode-dark-purple h2, .mode-dark-purple h3, .mode-dark-purple h4,
.mode-dark-purple .headline {
  color: var(--purple-03);
}

.mode-dark-pool {
  background-color: var(--pool-10);
  color: var(--white-70pct);
}
.mode-dark-pool h1, .mode-dark-pool h2, .mode-dark-pool h3, .mode-dark-pool h4,
.mode-dark-pool .headline {
  color: var(--pool-03);
}

.mode-dark-mint {
  background-color: var(--mint-10);
  color: var(--white-70pct);
}
.mode-dark-mint h1, .mode-dark-mint h2, .mode-dark-mint h3, .mode-dark-mint h4,
.mode-dark-mint .headline {
  color: var(--mint-03);
}

.mode-dark-lava {
  background-color: var(--lava-10);
  color: var(--white-70pct);
}
.mode-dark-lava h1, .mode-dark-lava h2, .mode-dark-lava h3, .mode-dark-lava h4,
.mode-dark-lava .headline {
  color: var(--lava-03);
}

.mode-dark-peach {
  background-color: var(--peach-10);
  color: var(--white-70pct);
}
.mode-dark-peach h1, .mode-dark-peach h2, .mode-dark-peach h3, .mode-dark-peach h4,
.mode-dark-peach .headline {
  color: var(--peach-03);
}

.mode-dark-mustard {
  background-color: var(--mustard-10);
  color: var(--white-70pct);
}
.mode-dark-mustard h1, .mode-dark-mustard h2, .mode-dark-mustard h3, .mode-dark-mustard h4,
.mode-dark-mustard .headline {
  color: var(--mustard-03);
}

.mode-dark-grass {
  background-color: var(--grass-10);
  color: var(--white-70pct);
}
.mode-dark-grass h1, .mode-dark-grass h2, .mode-dark-grass h3, .mode-dark-grass h4,
.mode-dark-grass .headline {
  color: var(--grass-03);
}

.mode-dark-gray {
  background-color: var(--text-primary);
  color: var(--white-70pct);
}
.mode-dark-gray h1, .mode-dark-gray h2, .mode-dark-gray h3, .mode-dark-gray h4,
.mode-dark-gray .headline {
  color: var(--white);
}

/* ========================================
   07 Component Gallery — Buttons & Tags
   ======================================== */

.comp-canvas {
  border-radius: var(--radius-16);
  border: 1px solid var(--gray-03);
  overflow: hidden;
}

.comp-canvas + .comp-canvas {
  margin-top: var(--space-8);
}

.comp-canvas-light {
  background: var(--white);
  padding: var(--space-40) var(--space-48);
}

.comp-canvas-dark {
  background: var(--gray-02);
  padding: var(--space-40) var(--space-48);
}

.comp-group {
  margin-bottom: var(--space-32);
}

.comp-group:last-child {
  margin-bottom: 0;
}

.comp-group-label {
  font-family: var(--font-mono);
  font-size: var(--ui-label-size);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  margin-bottom: var(--space-12);
}

.comp-canvas-dark .comp-group-label {
  color: var(--gray-07);
}

.comp-row {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  flex-wrap: wrap;
}

/* Buttons */
/* Large Buttons (40px height) - From Framer Component */
.btn-lg-primary,
.btn-lg-secondary,
.btn-lg-primary-dark,
.btn-lg-secondary-dark {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  align-content: center;
  flex-wrap: nowrap;
  gap: var(--space-3);
  height: var(--sizing-40);
  padding: var(--space-8) var(--space-8) var(--space-8) var(--space-16);
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  font-weight: var(--weight-medium);
  line-height: 16px;
  border-radius: 100px;
  cursor: pointer;
  transition: var(--transition-bg), var(--transition-opacity);
  border: none;
  overflow: visible;
  box-sizing: border-box;
  white-space: pre;
  text-decoration: none;
}

.btn-lg-primary {
  background-color: var(--gray-10);
  color: var(--white);
}

.btn-lg-secondary {
  background-color: var(--black-7pct);
  color: var(--gray-10);
}

.btn-lg-primary-dark {
  background-color: var(--white);
  color: var(--gray-10);
}

.btn-lg-secondary-dark {
  background-color: var(--white-10pct);
  color: var(--white);
}

.btn-lg-primary:hover {
  background-color: var(--gray-10-80pct);
}

.btn-lg-secondary:hover {
  background-color: var(--black-10pct);
}

.btn-lg-primary-dark:hover {
  background-color: var(--white-80pct);
}

.btn-lg-secondary-dark:hover {
  background-color: var(--white-8pct);
}

.btn-lg-primary:active {
  background-color: rgba(31, 32, 35, 0.8);
  opacity: 0.8;
}

.btn-lg-secondary:active {
  background-color: var(--black-10pct);
  opacity: 0.8;
}

.btn-lg-primary-dark:active {
  background-color: var(--white-80pct);
  opacity: 0.8;
}

.btn-lg-secondary-dark:active {
  background-color: var(--white-8pct);
  opacity: 0.8;
}

.btn-lg-primary:disabled {
  background-color: var(--gray-10);
  color: var(--white);
  cursor: not-allowed;
}

.btn-lg-secondary:disabled {
  background-color: var(--black-7pct);
  color: var(--gray-10);
  cursor: not-allowed;
}

.btn-lg-primary-dark:disabled {
  background-color: var(--white);
  color: var(--gray-10);
  cursor: not-allowed;
}

.btn-lg-secondary-dark:disabled {
  background-color: var(--white-10pct);
  color: var(--white);
  cursor: not-allowed;
}

/* Large Button Arrow Animation - From Framer Component */
.btn-arrow-container {
  flex: none;
  position: relative;
  width: 15px;
  height: var(--sizing-12);
  overflow: visible;
}

.btn-arrow-head {
  flex: none;
  position: absolute;
  width: 15px;
  height: var(--sizing-12);
  left: -3px;
  top: calc(50% - 6px);
  transition: left var(--duration-slower) var(--ease-spring);
}

.btn-arrow-line {
  flex: none;
  position: absolute;
  width: 15px;
  height: var(--sizing-12);
  left: -1px;
  top: calc(50% - 6px);
  opacity: 0;
  transition: var(--transition-opacity);
}

.btn-lg-primary:hover .btn-arrow-head,
.btn-lg-secondary:hover .btn-arrow-head,
.btn-lg-primary-dark:hover .btn-arrow-head,
.btn-lg-secondary-dark:hover .btn-arrow-head {
  left: -1px;
}

.btn-lg-primary:hover .btn-arrow-line,
.btn-lg-secondary:hover .btn-arrow-line,
.btn-lg-primary-dark:hover .btn-arrow-line,
.btn-lg-secondary-dark:hover .btn-arrow-line {
  opacity: 1;
  right: 0;
}

.btn-lg-primary:active .btn-arrow-head,
.btn-lg-secondary:active .btn-arrow-head,
.btn-lg-primary-dark:active .btn-arrow-head,
.btn-lg-secondary-dark:active .btn-arrow-head {
  left: -1px;
}

.btn-lg-primary:active .btn-arrow-line,
.btn-lg-secondary:active .btn-arrow-line,
.btn-lg-primary-dark:active .btn-arrow-line,
.btn-lg-secondary-dark:active .btn-arrow-line {
  opacity: 1;
  right: 0;
}

/* Tertiary Button (Text + Arrow) */
.btn-tertiary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  background: none;
  border: none;
  padding: 2px 0;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: var(--weight-medium);
  line-height: 16px;
  color: var(--gray-10);
  font-feature-settings: 'ss01' on, 'ss02' on;
  transition: opacity var(--duration-fast) var(--ease-smooth);
}

.btn-tertiary-dark {
  color: var(--white);
}

.btn-tertiary .btn-arrow {
  flex-shrink: 0;
  stroke: currentColor;
  transition: transform var(--duration-fast) var(--ease-smooth);
}

.btn-tertiary:hover {
  opacity: 0.7;
}

.btn-tertiary:hover .btn-arrow {
  transform: translateX(2px);
}

.btn-tertiary:active {
  opacity: 0.5;
}

/* Small Buttons (28px height) */
.btn-sm-primary,
.btn-sm-secondary,
.btn-sm-primary-dark,
.btn-sm-secondary-dark {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  align-content: center;
  flex-wrap: nowrap;
  gap: var(--space-3);
  height: 28px;
  padding: var(--space-6) var(--space-8) var(--space-6) var(--space-12);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: var(--weight-medium);
  line-height: 14px;
  border-radius: var(--radius-40);
  cursor: pointer;
  transition: background-color 0.4s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.4s cubic-bezier(0.2, 0, 0.2, 1);
  border: none;
  overflow: visible;
  box-sizing: border-box;
  white-space: pre;
  text-decoration: none;
}

.btn-sm-primary {
  background-color: var(--gray-10);
  color: var(--white);
}

.btn-sm-secondary {
  background-color: var(--black-7pct);
  color: var(--gray-10);
}

.btn-sm-primary-dark {
  background-color: var(--white);
  color: var(--gray-10);
}

.btn-sm-secondary-dark {
  background-color: var(--white-10pct);
  color: var(--white);
}

.btn-sm-primary:hover {
  background-color: var(--gray-08);
}

.btn-sm-secondary:hover {
  background-color: var(--black-20pct);
}

.btn-sm-primary-dark:hover {
  background-color: var(--white-70pct);
}

.btn-sm-secondary-dark:hover {
  background-color: var(--white-20pct);
}

.btn-sm-primary:active {
  background-color: var(--gray-07);
}

.btn-sm-secondary:active {
  background-color: var(--gray-04);
}

.btn-sm-primary-dark:active {
  background-color: var(--gray-04);
}

.btn-sm-secondary-dark:active {
  background-color: var(--white-30pct);
}

.btn-sm-primary:disabled {
  background-color: var(--gray-10);
  color: var(--white);
  cursor: not-allowed;
}

.btn-sm-secondary:disabled {
  background-color: var(--black-7pct);
  color: var(--gray-10);
  cursor: not-allowed;
}

.btn-sm-primary-dark:disabled {
  background-color: var(--white);
  color: var(--gray-10);
  cursor: not-allowed;
}

.btn-sm-secondary-dark:disabled {
  background-color: var(--white-10pct);
  color: var(--white);
  cursor: not-allowed;
}

/* Small Button Arrow Animation */
.btn-arrow-container-sm {
  display: flex;
  align-items: center;
  gap: 0;
  position: relative;
  width: 6.65px;
  top: 1px;
}

.btn-arrow-line-sm {
  position: absolute;
  left: 0;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.btn-arrow-head-sm {
  position: absolute;
  right: 0;
  transition: none;
}

.btn-sm-primary:hover .btn-arrow-line-sm,
.btn-sm-secondary:hover .btn-arrow-line-sm,
.btn-sm-primary-dark:hover .btn-arrow-line-sm,
.btn-sm-secondary-dark:hover .btn-arrow-line-sm {
  opacity: 1;
  transform: scaleX(1);
}

.btn-sm-primary:hover .btn-arrow-head-sm,
.btn-sm-secondary:hover .btn-arrow-head-sm,
.btn-sm-primary-dark:hover .btn-arrow-head-sm,
.btn-sm-secondary-dark:hover .btn-arrow-head-sm {
  transform: translateX(1.5px);
}

/* Tertiary Buttons (text + arrow) - From Framer Component */
.btn-tertiary-lg,
.btn-tertiary-sm,
.btn-tertiary-lg-dark,
.btn-tertiary-sm-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  padding: 0;
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  line-height: 16px;
  background: none;
  border: none;
  border-radius: 100px;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.4s cubic-bezier(0.2, 0, 0.2, 1);
  overflow: visible;
  white-space: pre;
}

.btn-tertiary-lg,
.btn-tertiary-lg-dark {
  font-size: var(--font-size-base);
  gap: var(--space-2);
}

.btn-tertiary-sm,
.btn-tertiary-sm-dark {
  font-size: 12px;
  gap: var(--space-2);
}

.btn-tertiary-lg {
  color: var(--gray-10);
}

.btn-tertiary-sm {
  color: var(--gray-10);
}

.btn-tertiary-lg-dark {
  color: var(--white);
}

.btn-tertiary-sm-dark {
  color: var(--white);
}

.btn-tertiary-lg:hover,
.btn-tertiary-sm:hover,
.btn-tertiary-lg-dark:hover,
.btn-tertiary-sm-dark:hover {
  opacity: 1;
}

.btn-tertiary-lg:active,
.btn-tertiary-sm:active,
.btn-tertiary-lg-dark:active,
.btn-tertiary-sm-dark:active {
  opacity: 0.8;
}

.btn-tertiary-lg:disabled,
.btn-tertiary-sm:disabled {
  color: var(--gray-10);
  cursor: not-allowed;
}

.btn-tertiary-lg-dark:disabled,
.btn-tertiary-sm-dark:disabled {
  color: var(--white);
  cursor: not-allowed;
}

/* Tertiary Button Arrow Container */
.btn-tertiary-arrow-container {
  flex: none;
  position: relative;
  width: 15px;
  height: var(--sizing-12);
  overflow: visible;
}

.btn-tertiary-arrow-container .btn-arrow-head {
  flex: none;
  position: absolute;
  width: 15px;
  height: var(--sizing-12);
  left: -3px;
  top: calc(50% - 6px);
  transition: left 0.4s cubic-bezier(0.2, 0, 0.2, 1);
}

.btn-tertiary-arrow-container .btn-arrow-line {
  flex: none;
  position: absolute;
  width: 15px;
  height: var(--sizing-12);
  left: -1px;
  top: calc(50% - 6px);
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.2, 0, 0.2, 1);
}

.btn-tertiary-lg:hover .btn-tertiary-arrow-container .btn-arrow-head,
.btn-tertiary-sm:hover .btn-tertiary-arrow-container .btn-arrow-head,
.btn-tertiary-lg-dark:hover .btn-tertiary-arrow-container .btn-arrow-head,
.btn-tertiary-sm-dark:hover .btn-tertiary-arrow-container .btn-arrow-head {
  left: -1px;
}

.btn-tertiary-lg:hover .btn-tertiary-arrow-container .btn-arrow-line,
.btn-tertiary-sm:hover .btn-tertiary-arrow-container .btn-arrow-line,
.btn-tertiary-lg-dark:hover .btn-tertiary-arrow-container .btn-arrow-line,
.btn-tertiary-sm-dark:hover .btn-tertiary-arrow-container .btn-arrow-line {
  opacity: 1;
  right: 0;
}

.btn-tertiary-lg:active .btn-tertiary-arrow-container .btn-arrow-head,
.btn-tertiary-sm:active .btn-tertiary-arrow-container .btn-arrow-head,
.btn-tertiary-lg-dark:active .btn-tertiary-arrow-container .btn-arrow-head,
.btn-tertiary-sm-dark:active .btn-tertiary-arrow-container .btn-arrow-head {
  left: -1px;
}

.btn-tertiary-lg:active .btn-tertiary-arrow-container .btn-arrow-line,
.btn-tertiary-sm:active .btn-tertiary-arrow-container .btn-arrow-line,
.btn-tertiary-lg-dark:active .btn-tertiary-arrow-container .btn-arrow-line,
.btn-tertiary-sm-dark:active .btn-tertiary-arrow-container .btn-arrow-line {
  opacity: 1;
  right: 0;
}

/* Tertiary Button Small Arrow Container */
.btn-tertiary-arrow-container-sm {
  display: flex;
  align-items: center;
  gap: 0;
  position: relative;
  width: 6.65px;
  top: 1px;
}

.btn-tertiary-arrow-container-sm .btn-arrow-line-sm {
  position: absolute;
  left: 0;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.btn-tertiary-arrow-container-sm .btn-arrow-head-sm {
  position: absolute;
  right: 0;
  transition: none;
}

.btn-tertiary-sm:hover .btn-tertiary-arrow-container-sm .btn-arrow-line-sm,
.btn-tertiary-sm-dark:hover .btn-tertiary-arrow-container-sm .btn-arrow-line-sm {
  opacity: 1;
  transform: scaleX(1);
}

.btn-tertiary-sm:hover .btn-tertiary-arrow-container-sm .btn-arrow-head-sm,
.btn-tertiary-sm-dark:hover .btn-tertiary-arrow-container-sm .btn-arrow-head-sm {
  transform: translateX(1.5px);
}

.btn-tertiary-sm:active .btn-tertiary-arrow-container-sm .btn-arrow-line-sm,
.btn-tertiary-sm-dark:active .btn-tertiary-arrow-container-sm .btn-arrow-line-sm {
  opacity: 1;
  transform: scaleX(1);
}

.btn-tertiary-sm:active .btn-tertiary-arrow-container-sm .btn-arrow-head-sm,
.btn-tertiary-sm-dark:active .btn-tertiary-arrow-container-sm .btn-arrow-head-sm {
  transform: translateX(1.5px);
}



/* Tags */
.tag-lg,
.tag-sm {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  border: 1px solid;
  border-radius: var(--radius-4);
  white-space: nowrap;
}

.tag-lg { height: 31px; padding: 0 12px; font-size: var(--caption-lg-14-size); letter-spacing: var(--caption-lg-14-letter-spacing); line-height: 1; }
.tag-sm { height: 25px; padding: 0 8px;  font-size: var(--caption-sm-12-size); letter-spacing: var(--caption-sm-12-letter-spacing); line-height: 1; }

.tag-purple  { background: var(--purple-06-10pct);  border-color: var(--purple-06-50pct);  color: var(--purple-09); }
.tag-pool    { background: var(--pool-06-10pct);    border-color: var(--pool-06-50pct);    color: var(--pool-09); }
.tag-mint    { background: var(--mint-06-10pct);    border-color: var(--mint-06-50pct);    color: var(--mint-09); }
.tag-lava    { background: var(--lava-06-10pct);    border-color: var(--lava-06-50pct);    color: var(--lava-09); }
.tag-peach   { background: var(--peach-06-10pct);   border-color: var(--peach-06-50pct);   color: var(--peach-09); }
.tag-mustard { background: var(--mustard-06-10pct); border-color: var(--mustard-06-50pct); color: var(--mustard-09); }
.tag-grass   { background: var(--grass-06-10pct);   border-color: var(--grass-06-50pct);   color: var(--grass-09); }

.tag-purple.tag-dark  { background: var(--purple-06-20pct);  border-color: var(--purple-05);  color: var(--purple-02); }
.tag-pool.tag-dark    { background: var(--pool-06-20pct);    border-color: var(--pool-06);    color: var(--pool-02); }
.tag-mint.tag-dark    { background: var(--mint-06-20pct);    border-color: var(--mint-06);    color: var(--mint-02); }
.tag-lava.tag-dark    { background: var(--lava-06-20pct);    border-color: var(--lava-06);    color: var(--lava-02); }
.tag-peach.tag-dark   { background: var(--peach-06-20pct);   border-color: var(--peach-06);   color: var(--peach-02); }
.tag-mustard.tag-dark { background: var(--mustard-06-20pct); border-color: var(--mustard-06); color: var(--mustard-02); }
.tag-grass.tag-dark   { background: var(--grass-06-20pct);   border-color: var(--grass-06);   color: var(--grass-02); }

/* Card demos — extend .card base, add flex layout */
.demo-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-8);
  flex: 1;
}

.demo-card-lg {
  border-radius: var(--radius-16);
  flex: none;
  width: 100%;
}

.demo-card-lg .block-title {
  font-size: var(--heading-md-36-size);
  line-height: var(--heading-md-36-line-height);
  letter-spacing: var(--heading-md-36-letter-spacing);
}

.comp-canvas-dark .demo-card {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
}

.comp-canvas-dark .block-title {
  color: var(--purple-03);
}

.comp-canvas-dark .demo-card p {
  color: var(--white-70pct);
}

.comp-row-cards {
  align-items: stretch;
  gap: var(--space-16);
}

/* Subsection note spacing */
.subsection-note p + p {
  margin-top: var(--space-8);
}