/* ============================================================
   Launch Potato — Design Tokens (v1)
   CSS custom properties. Consume the semantic vars (e.g.
   var(--surface-base-dark)); primitives exist to be referenced.
   ============================================================ */

:root {
  /* ---------- Color primitives ---------- */
  --color-dark-900: #012233;
  --color-dark-800: #1a3847;
  --color-dark-500: #677a84;
  --color-dark-200: #b3bdc1;
  --color-bone-500: #f6f2e7;
  --color-parchment-500: #fdfff4;
  --color-parchment-400: #fefff8;
  --color-parchment-300: #fefffb;
  --color-parchment-50: #fffffe;
  --color-denim-900: #344a7b;
  --color-denim-blue900: #021253;
  --color-splash-surface: #f4f9fb;
  --color-splash-blue: #c0d6eb;
  --color-neon-900: #ddfe55;
  --color-gray-500: #c6c0ca;
  --color-gray-neutral: #cccccc;
  --color-white-warm: #f6f4f0;
  --color-feedback-danger-solid: #c8482f;
  --color-feedback-danger-surface: #f7e7e2;
  --color-feedback-danger-text: #9e3320;
  --color-feedback-success-solid: #2f7d4f;
  --color-feedback-success-surface: #e5f0e9;
  --color-feedback-success-text: #246340;
  --color-feedback-warning-solid: #d9a441;
  --color-feedback-warning-surface: #faf1dc;
  --color-feedback-warning-text: #875312;

  /* ---------- Surface (semantic) ---------- */
  --surface-base-dark: var(--color-dark-900);
  --surface-base-light: var(--color-bone-500);
  --surface-card-dark: var(--color-dark-900);
  --surface-card-light: var(--color-parchment-500);        /* first card layer */
  --surface-card-light-raised: var(--color-parchment-300); /* stacks on card-light */
  --surface-tile: var(--color-bone-500);
  --surface-nav: rgba(1, 34, 51, 0.9);
  --surface-overlay-soft: rgba(246, 242, 231, 0.08);
  --surface-info: var(--color-splash-blue);
  --surface-info-subtle: var(--color-splash-surface);

  /* ---------- Text (semantic) ---------- */
  --text-on-dark: var(--color-bone-500);
  --text-on-dark-muted: rgba(253, 255, 244, 0.7);
  --text-on-light: var(--color-dark-900);
  --text-on-light-secondary: var(--color-dark-500);
  --text-on-info: var(--color-denim-blue900);
  --text-legal: var(--color-dark-200);

  /* ---------- Accent ---------- */
  --accent-default: var(--color-neon-900);
  --accent-on-accent: var(--color-dark-900);
  --accent-secondary: var(--color-splash-blue);
  --accent-secondary-surface: var(--color-splash-surface);
  --accent-on-secondary: var(--color-denim-blue900);

  /* ---------- Border color ---------- */
  --border-color-dark: var(--color-dark-800);
  --border-color-hairline: var(--color-dark-200);

  /* ---------- Feedback (status) ----------
     Roles: solid (fill/strong border), surface (subtle bg + *-text),
     text (accessible text/icon on light), on-solid (text on solid fill). */
  --feedback-danger-solid: var(--color-feedback-danger-solid);
  --feedback-danger-surface: var(--color-feedback-danger-surface);
  --feedback-danger-text: var(--color-feedback-danger-text);
  --feedback-danger-on-solid: var(--color-bone-500);
  --feedback-success-solid: var(--color-feedback-success-solid);
  --feedback-success-surface: var(--color-feedback-success-surface);
  --feedback-success-text: var(--color-feedback-success-text);
  --feedback-success-on-solid: var(--color-bone-500);
  --feedback-warning-solid: var(--color-feedback-warning-solid);
  --feedback-warning-surface: var(--color-feedback-warning-surface);
  --feedback-warning-text: var(--color-feedback-warning-text);
  --feedback-warning-on-solid: var(--color-dark-900);

  /* ---------- Gradient ---------- */
  --gradient-denim-band: linear-gradient(
    171deg,
    rgba(52, 74, 123, 0.2) 8%,
    #344a7b 53%,
    rgba(52, 74, 123, 0.2) 98%
  );

  /* ---------- Font families ---------- */
  --font-display: "Space Grotesk", sans-serif;
  --font-body: "Albert Sans", sans-serif;

  /* ---------- Font weights ---------- */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* ---------- Spacing scale (8px base) ---------- */
  --space-0: 0px;
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 36px;
  --space-7: 40px;
  --space-8: 48px;
  --space-9: 56px;
  --space-10: 64px;
  --space-12: 128px;

  /* ---------- Spacing (semantic) ---------- */
  --space-page-margin: var(--space-9);
  --space-page-margin-sm: var(--space-4);
  --space-section-gap: var(--space-12); /* normalized to scale (128px) */
  --space-subsection-gap: var(--space-10);
  --space-grid-gutter: var(--space-4);
  --space-card-padding: var(--space-8);
  --space-card-padding-sm: var(--space-5);
  --space-button-pad-x: var(--space-5);
  --space-button-pad-y: var(--space-4);
  --space-stack-eyebrow: var(--space-3);
  --space-stack-heading: var(--space-4);
  --space-stat-gap: var(--space-2);

  /* ---------- Radius ---------- */
  --radius-none: 0px;
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-lg: 40px;
  --radius-pill: 9999px;
  --radius-circle: 96px;

  /* ---------- Radius (semantic) ---------- */
  --radius-tile: var(--radius-xs);
  --radius-container: var(--radius-sm);
  --radius-card: var(--radius-lg);
  --radius-button: var(--radius-lg);
  --radius-image-mask: var(--radius-sm);

  /* ---------- Border width ---------- */
  --border-width-none: 0px;
  --border-width-hairline: 1px;

  /* ---------- Elevation (flat system) ---------- */
  --elevation-flat: none;
  --elevation-nav-blur: blur(7px);
  --elevation-overlay-blend: color-dodge;
  --shadow-none: 0 0 0 0 transparent;

  /* ---------- Motion ---------- */
  --motion-duration-instant: 100ms;
  --motion-duration-fast: 200ms;
  --motion-duration-base: 320ms;
  --motion-duration-slow: 600ms;
  --motion-duration-count: 1600ms;
  --motion-duration-ambient: 8000ms;

  --motion-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --motion-ease-decelerate: cubic-bezier(0, 0, 0, 1);
  --motion-ease-accelerate: cubic-bezier(0.3, 0, 1, 1);
  --motion-ease-launch: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================================
   Typography utility classes (optional convenience)
   ============================================================ */

.text-display-xxl { font-family: var(--font-display); font-size: 132px; font-weight: var(--font-weight-medium); line-height: 1.1; letter-spacing: -3px; }
.text-display     { font-family: var(--font-display); font-size: 72px;  font-weight: var(--font-weight-medium); line-height: 1;   letter-spacing: -3px; }
.text-h1          { font-family: var(--font-display); font-size: 56px;  font-weight: var(--font-weight-medium); line-height: 1.1; letter-spacing: -3px; }
.text-h2          { font-family: var(--font-display); font-size: 44px;  font-weight: var(--font-weight-medium); line-height: 1.1; letter-spacing: -3px; }
.text-h3          { font-family: var(--font-display); font-size: 36px;  font-weight: var(--font-weight-regular); line-height: 1.1; letter-spacing: -3px; }
.text-h4          { font-family: var(--font-display); font-size: 28px;  font-weight: var(--font-weight-regular); line-height: 1.1; letter-spacing: -3px; }
.text-stat-xxl    { font-family: var(--font-display); font-size: 132px; font-weight: var(--font-weight-light); line-height: 0.9; letter-spacing: -2px; }
.text-stat        { font-family: var(--font-display); font-size: 92px;  font-weight: var(--font-weight-light); line-height: 0.9; letter-spacing: -2px; }
.text-stat-mobile { font-family: var(--font-display); font-size: 64px;  font-weight: var(--font-weight-light); line-height: 0.9; letter-spacing: -2px; }
.text-eyebrow     { font-family: var(--font-display); font-size: 14px;  font-weight: var(--font-weight-bold); line-height: 1; letter-spacing: 10px; text-transform: uppercase; }
.text-callout     { font-family: var(--font-display); font-size: 14px;  font-weight: var(--font-weight-medium); line-height: 1; letter-spacing: 0; }
.text-cta         { font-family: var(--font-display); font-size: 18px;  font-weight: var(--font-weight-bold); line-height: 1; letter-spacing: 0; text-transform: uppercase; }
.text-subtitle    { font-family: var(--font-body); font-size: 20px; font-weight: var(--font-weight-medium); line-height: 1.2; letter-spacing: 0; }
.text-body-lg     { font-family: var(--font-body); font-size: 18px; font-weight: var(--font-weight-regular); line-height: 1.5; letter-spacing: 0; }
.text-body        { font-family: var(--font-body); font-size: 16px; font-weight: var(--font-weight-regular); line-height: 1.3; letter-spacing: 0; }
.text-body-sm     { font-family: var(--font-body); font-size: 14px; font-weight: var(--font-weight-regular); line-height: 1.3; letter-spacing: 0; }

/* Reduced-motion guard for the ambient/count animations */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-duration-count: 0ms;
    --motion-duration-ambient: 0ms;
  }
}