/**
 * Tipsy Design Tokens — Responsive Foundation
 * FROZEN spec: docs/RESPONSIVE_FOUNDATION.md
 * Mobile-first · min-width only
 */
:root {
  /* Color — Scheme B (Phase B: magenta editorial dark) */
  --tipsy-bg: #0a0a0e;
  --tipsy-surface: #111116;
  --tipsy-surface-hover: #17171d;
  --tipsy-text: #f5f5f7;
  --tipsy-secondary: #a1a1aa;
  --tipsy-muted: #71717a;

  /* Brand system — SSOT for interactive accent */
  --brand-primary: #f02d78;
  --brand-primary-hover: #ff3d8d;
  --brand-primary-soft: rgba(240, 45, 120, 0.14);
  --brand-primary-muted: rgba(240, 45, 120, 0.08);
  --brand-secondary: #9b4dff;
  --brand-gradient-start: #f02d78;
  --brand-gradient-end: #b15cff;

  /* Rating — warm gold semantic (Hero verified · Card reuse in UX-2C) */
  --tipsy-rating: #fbbf24;

  --tipsy-accent: var(--brand-primary);
  --tipsy-accent-soft: var(--brand-primary-soft);
  --tipsy-border: #2a2a32;

  /* Homepage rhythm — consumed via .tipsy-layout--home (not global section-gap) */
  --tipsy-home-section-gap: var(--space-5);
  --tipsy-home-section-head-gap: var(--space-3);
  --tipsy-home-grid-gap-x: var(--space-3);
  --tipsy-home-grid-gap-y: var(--space-3);
  --tipsy-home-gutter: var(--space-4);

  /* Product Language — spacing (FROZEN: docs/PRODUCT_LANGUAGE.md) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Product Language — radius (Visual Polish v1 — frozen) */
  --tipsy-radius-sm: 8px;
  --tipsy-radius-md: 12px;
  --tipsy-radius-lg: 16px;
  --tipsy-radius-xl: 24px;
  --tipsy-radius-card: var(--tipsy-radius-lg);   /* 16 */
  --tipsy-radius-btn: var(--tipsy-radius-md);     /* 12 */
  --tipsy-radius-input: var(--tipsy-radius-md);   /* 12 */
  --tipsy-radius-dialog: 20px;

  /* Visual Polish — typography scale */
  --tipsy-type-h1: 30px;
  --tipsy-type-h1-lh: 1.15;
  --tipsy-type-h2: 24px;
  --tipsy-type-h2-lh: 1.2;
  --tipsy-type-h3: 20px;
  --tipsy-type-h3-lh: 1.25;
  --tipsy-type-card-title: 18px;
  --tipsy-type-card-title-lh: 1.3;
  --tipsy-type-caption: 12px;
  --tipsy-type-caption-lh: 1.4;

  /* Visual Polish — icon sizes */
  --tipsy-icon-sm: 16px;
  --tipsy-icon-md: 20px;
  --tipsy-icon-lg: 24px;

  /* Visual Polish — control geometry */
  --tipsy-control-h: 52px;
  --tipsy-btn-h: 48px;
  --tipsy-icon-btn-size: 40px;

  /* Visual Polish — surfaces */
  --tipsy-surface-secondary: #1a1a21;
  --tipsy-surface-elevated: var(--tipsy-surface-hover);

  /* Visual Polish — section rhythm */
  --tipsy-section-head-gap: var(--space-4);
  --tipsy-card-gap: var(--space-4);

  /* Visual Polish — empty state rhythm */
  --tipsy-empty-icon-gap: var(--space-5);
  --tipsy-empty-title-gap: var(--space-3);
  --tipsy-empty-desc-gap: var(--space-5);

  /* Visual Polish — form rhythm */
  --tipsy-form-field-gap: var(--space-3);
  --tipsy-form-submit-gap: var(--space-4);

  /* Layout System — page shell rhythm */
  --tipsy-page-section-gap: var(--space-6);
  --tipsy-page-head-gap: var(--space-6);
  --tipsy-page-block-gap: var(--space-5);
  --tipsy-footer-pad-y: var(--space-5);
  --tipsy-footer-brand-gap: var(--space-3);
  --tipsy-footer-cluster-gap: var(--space-4);
  --tipsy-footer-meta-gap: var(--space-5);

  /* Auth form vertical rhythm */
  --tipsy-auth-title-gap: var(--space-6);
  --tipsy-auth-label-gap: var(--space-2);
  --tipsy-auth-field-gap: 20px;
  --tipsy-auth-submit-gap: var(--space-5);
  --tipsy-auth-foot-gap: 20px;

  /* Product Language — shadow (surface · hover · modal) */
  --tipsy-shadow-surface: 0 2px 8px rgba(0, 0, 0, 0.24);
  --tipsy-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.32);
  --tipsy-shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.48);
  --tipsy-shadow-card: var(--tipsy-shadow-surface);
  --tipsy-shadow-none: none;
  --tipsy-shadow-focus: 0 0 0 3px var(--tipsy-accent-soft);

  /* Product Language — motion */
  --tipsy-motion-duration: 200ms;
  --tipsy-motion-ease: ease-out;

  /* Product Language — elevation */
  --tipsy-elev-0-bg: var(--tipsy-bg);
  --tipsy-elev-1-bg: var(--tipsy-surface);
  --tipsy-elev-2-bg: var(--tipsy-surface-hover);
  --tipsy-elev-3-bg: var(--tipsy-surface);

  /* Breakpoint tokens (reference) */
  --bp-xxs: 390px;
  --bp-xs: 480px;
  --bp-mobile: 768px;
  --bp-tablet: 1024px;
  --bp-sm: 1280px;
  --bp-md: 1440px;
  --bp-lg: 1600px;
  --bp-xl: 1920px;

  /* Layout System — Theme Design System (new-track pages only; see layout/layout-system.css) */
  --layout-max-width: 1200px;
  --layout-padding-mobile: 20px;
  --layout-padding-tablet: 32px;
  --layout-padding-desktop: 48px;
  --layout-padding-inline: var(--layout-padding-mobile);
  --layout-section-gap: 40px;
  --layout-stack-gap: 24px;
  --layout-header-body-gap: 32px;
  --layout-card-gap: 24px;
  --layout-grid-gap: 24px;
  --layout-grid-inset: 0px;
  --layout-surface-radius: 20px;
  --layout-card-padding: 24px;
  --layout-hero-padding: var(--layout-card-padding);
  --layout-tab-height: 68px;
  --layout-user-grid-cols: 3;

  /* Defaults — mobile base (<480) · LEGACY shell (frozen pages) */
  --tipsy-viewport-max: none;
  --tipsy-container-max: 100%;
  --tipsy-gutter: var(--space-4);
  --tipsy-grid-cols: 2;
  --tipsy-grid-gap: var(--space-3);
  --tipsy-section-gap: var(--space-6);
  --tipsy-block-gap: var(--space-4);
  --tipsy-page-section-gap: var(--space-6);
  --tipsy-card-gap: var(--space-4);
  --tipsy-radius-card: var(--tipsy-radius-lg);

  --tipsy-type-hero: 26px;
  --tipsy-type-hero-lh: 1.1;
  --tipsy-type-title: var(--tipsy-type-h3);
  --tipsy-type-title-lh: var(--tipsy-type-h3-lh);
  --tipsy-type-body: 15px;
  --tipsy-type-body-lh: 1.5;
  --tipsy-type-meta: var(--tipsy-type-caption);
  --tipsy-type-meta-lh: var(--tipsy-type-caption-lh);

  --tipsy-header-h: 64px;

  --tipsy-user-container-max: 100%;
  --tipsy-user-page-pad-y: 24px;
  --tipsy-user-page-pad-bottom: 40px;

  /* Poster Card — thumb cap (legacy) */
  --tipsy-poster-max-h: 200px;
}

@media (max-width: 767px) {
  :root {
    --tipsy-header-h: 56px;
  }
}

@media (max-width: 359px) {
  :root {
    --tipsy-home-gutter: var(--space-3);
  }
}

/* 390 — phone-sm (base already covers) */

@media (min-width: 480px) {
  :root {
    --tipsy-gutter: 16px;
    --tipsy-grid-gap: 16px;
    --tipsy-type-meta: 13px;
    --tipsy-type-meta-lh: 1.4;
  }
}

@media (min-width: 768px) {
  :root {
    --tipsy-gutter: 24px;
    --tipsy-grid-cols: 3;
    --tipsy-grid-gap: 20px;
    --tipsy-section-gap: 48px;
    --tipsy-home-section-gap: var(--space-6);
    --tipsy-home-grid-gap-x: var(--space-4);
    --tipsy-home-grid-gap-y: var(--space-4);
    --tipsy-home-gutter: 20px;
    --tipsy-block-gap: 24px;
    --tipsy-type-hero: 30px;
    --tipsy-type-title: var(--tipsy-type-card-title);
    --tipsy-type-title-lh: var(--tipsy-type-card-title-lh);
    --tipsy-type-meta: 14px;
    --tipsy-poster-max-h: 240px;
  }
}

@media (min-width: 1024px) {
  :root {
    --tipsy-footer-pad-y: var(--space-6);
    --tipsy-footer-meta-gap: var(--space-6);
    --tipsy-gutter: 32px;
    --tipsy-container-max: 1180px;
    --tipsy-user-container-max: 1080px;
    --tipsy-user-page-pad-y: 48px;
    --tipsy-user-page-pad-bottom: 64px;
    --tipsy-grid-cols: 4;
    --tipsy-grid-gap: 24px;
    --tipsy-section-gap: 64px;
    --tipsy-home-section-gap: 36px;
    --tipsy-home-grid-gap-x: 20px;
    --tipsy-home-grid-gap-y: var(--space-5);
    --tipsy-home-gutter: 24px;
    --tipsy-block-gap: 32px;
    --tipsy-type-title: var(--tipsy-type-h3);
    --tipsy-type-title-lh: var(--tipsy-type-h3-lh);
    --tipsy-poster-max-h: 260px;
  }
}

@media (min-width: 1280px) {
  :root {
    --tipsy-container-max: 1440px;
    --tipsy-grid-cols: 5;
    --tipsy-type-hero: 36px;
    --tipsy-poster-max-h: 280px;
    --tipsy-home-gutter: var(--space-6);
  }
}

@media (min-width: 1600px) {
  :root {
    --tipsy-container-max: 1560px;
    --tipsy-grid-cols: 5;
    --tipsy-type-hero: 44px;
    --tipsy-poster-max-h: 320px;
  }
}

@media (min-width: 1920px) {
  :root {
    --tipsy-viewport-max: none;
    --tipsy-container-max: 1560px;
    --tipsy-grid-cols: 5;
    --tipsy-type-hero: 48px;
  }
}