/* FitCraft AI — design tokens (mirrors the bunny.net "orbital relay" style reference) */

@font-face {
  font-family: 'Rubik Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url(../fonts/rubik-latin-ext-wght-normal.woff2) format('woff2-variations'), url(../fonts/rubik-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Rubik Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url(../fonts/rubik-latin-wght-normal.woff2) format('woff2-variations'), url(../fonts/rubik-latin-wght-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;

  /* Colors */
  --color-cloud-canvas: #e1f2ff;
  --color-ice-surface: #eff8ff;
  --color-white-surface: #ffffff;
  --color-mist-divider: #d3e2f1;
  --color-graphite: #666666;
  --color-edge-navy: #183d6d;
  --color-launch-bay: #051e38;
  --color-network-deep: #022e57;
  --color-signal-blue: #8bb3da;
  --color-signal-orange: #fd8d32;
  --color-coral-launch: #ff7a53;
  --gradient-coral-launch: linear-gradient(180deg, #ff7a53, #ffa84a);
  --color-comet-spectrum: #ff2a64;
  --gradient-comet-spectrum: linear-gradient(85.19deg, #ff2a64 -133.27%, #ffaf48 105.93%);

  /* Derived (not in the reference; used for accessible variants only) */
  --color-on-coral: #ffffff;           /* text on the Coral Launch gradient; reference = white (low contrast), swap to #3b1304 for AA */
  --color-orange-text: #b4470a;        /* Signal Orange darkened to pass 4.5:1 on white/ice for small text */
  --color-focus: #183d6d;
  --color-focus-on-dark: #ffcf5a;

  /* Typography */
  --font-rubik: 'Rubik Variable', 'Rubik', 'Arial Rounded MT Bold', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Nirmala UI', 'Noto Sans Devanagari', Roboto, Arial, sans-serif;

  --text-caption: 14px;
  --leading-caption: 22px;
  --text-body: 18px;
  --leading-body: 1.5;
  --text-card-title: 20px;
  --leading-card-title: 26px;
  --text-rating: 28px;
  --text-section-heading: 45px;
  --leading-section-heading: 54px;
  --text-promo-heading: 45px;
  --leading-promo-heading: 58.5px;
  --text-hero-display: 54px;
  --leading-hero-display: 64.8px;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-5: 5px;
  --spacing-6: 6px;
  --spacing-10: 10px;
  --spacing-15: 15px;
  --spacing-18: 18px;
  --spacing-20: 20px;
  --spacing-21: 21px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-30: 30px;
  --spacing-32: 32px;
  --spacing-38: 38px;
  --spacing-80: 80px;
  --spacing-90: 90px;
  --spacing-143: 143px;

  /* Layout */
  --page-max-width: 1140px;
  --page-gutter: 20px;
  --section-gap: 32px;
  --card-padding: 30px;
  --element-gap: 15px;

  /* Radius */
  --radius-buttons: 6px;
  --radius-cards: 10px;
  --radius-hero: 20px;
  --radius-images: 20px;
  --radius-navigation: 20px;
  --radius-pills: 9999px;

  /* Shadows */
  --shadow-xl: 0 6px 40px 0 rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 11px 0 rgb(212, 211, 221);
  --shadow-hero: 0 30px 80px -20px rgba(5, 30, 56, 0.45);
}

@media (max-width: 760px) {
  :root {
    --text-section-heading: 32px;
    --leading-section-heading: 40px;
    --text-promo-heading: 32px;
    --leading-promo-heading: 42px;
    --text-hero-display: 38px;
    --leading-hero-display: 46px;
    --text-body: 17px;
    --page-gutter: 16px;
  }
}