/* ==========================================================================
   The One Solution — Design Tokens v1
   Source: builddocs/uiuxnote.txt
   ========================================================================== */

:root {
  /* ---- Color ---- */
  --color-white: #FFFFFF;
  --color-black: #111111;
  --color-pitch-black: #000000;   /* dark full-bleed sections */

  --color-gray-900: #1F1F1F;
  --color-gray-700: #4A4A4A;
  --color-gray-500: #777777;
  --color-gray-300: #D6D6D6;
  --color-gray-200: #E8E8E8;
  --color-gray-100: #F5F5F5;
  --color-gray-50: #FAFAFA;

  /* Brand accent colors */
  --color-brand-blue: #2566B7;
  --color-brand-orange: #FCAD0C;
  --color-brand-red: #CC190C;

  /* ---- Fonts ---- */
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  /* ---- Type scale (desktop) ---- */
  --fs-hero: 88px;
  --fs-h1: 64px;
  --fs-h2: 48px;
  --fs-h3: 32px;
  --fs-h4: 24px;
  --fs-body-xl: 22px;
  --fs-body: 17px;
  --fs-small: 15px;
  --fs-label: 13px;
  --fs-button: 15px;

  --lh-hero: 0.98;
  --lh-h1: 1.05;
  --lh-h2: 1.10;
  --lh-h3: 1.15;
  --lh-h4: 1.20;
  --lh-body-xl: 1.50;
  --lh-body: 1.60;
  --lh-small: 1.55;
  --lh-label: 1.30;

  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---- Container & grid ---- */
  --container-max: 1360px;
  --container-pad: 48px;
  --grid-columns: 12;
  --grid-gap: 32px;

  /* ---- Spacing scale (4px base) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;
  --space-9: 64px;
  --space-10: 80px;
  --space-11: 96px;
  --space-12: 120px;
  --space-13: 160px;
  --space-14: 200px;

  /* ---- Section rhythm ---- */
  --section-standard: 120px;
  --section-major: 160px;
  --bleed-pad: 120px;           /* internal padding for full-bleed with text */
  --bleed-min-height: 80vh;

  /* ---- Radius ---- */
  --radius-sharp: 0px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* ---- Header ---- */
  --header-height: 80px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 160ms;
  --duration-base: 320ms;
  --duration-slow: 800ms;
}

/* ---- Tablet ---- */
@media (max-width: 1024px) {
  :root {
    --fs-hero: 68px;
    --fs-h1: 52px;
    --fs-h2: 42px;
    --fs-h3: 28px;
    --fs-h4: 22px;
    --fs-body-xl: 20px;

    --container-pad: 32px;
    --grid-gap: 24px;

    --section-standard: 96px;
    --section-major: 128px;
    --bleed-pad: 96px;
    --bleed-min-height: 70vh;

    --header-height: 72px;
  }
}

/* ---- Mobile ---- */
@media (max-width: 640px) {
  :root {
    --fs-hero: 48px;
    --fs-h1: 40px;
    --fs-h2: 34px;
    --fs-h3: 26px;
    --fs-h4: 21px;
    --fs-body-xl: 19px;
    --fs-body: 16px;
    --fs-small: 14px;
    --fs-label: 12px;

    --container-pad: 20px;
    --grid-gap: 16px;

    --section-standard: 72px;
    --section-major: 96px;
    --bleed-pad: 64px;
    --bleed-min-height: 65vh;

    --header-height: 64px;
  }
}