/* CarBrain Design Tokens
 * Source: CarBrain Visual Identity Guidelines (042326)
 */

@import url('https://fonts.googleapis.com/css2?family=Paytone+One&family=Nunito+Sans:wght@400;600;700;800;900&display=swap');

:root {
  /* ─────────── Core Palette ─────────── */
  --cb-deep-blue: #002147;       /* Primary */
  --cb-light-blue: #00BBEA;      /* Secondary */
  --cb-lime: #CBFF00;            /* Tertiary */
  --cb-white: #FFFFFF;
  --cb-gray: #1E2939;            /* Neutral dark */

  /* ─────────── Tints & Shades ─────────── */
  /* Deep Blue scale */
  --cb-deep-blue-500: #002147;
  --cb-deep-blue-400: #2E5478;
  --cb-deep-blue-300: #B6D2F0;
  --cb-deep-blue-200: #DEEEFF;

  /* Light Blue scale */
  --cb-light-blue-500: #00BBEA;
  --cb-light-blue-400: #00C6EF;
  --cb-light-blue-300: #8EEBFF;
  --cb-light-blue-200: #C1F4FF;

  /* Lime scale */
  --cb-lime-500: #CBFF00;
  --cb-lime-200: #E0FF80;
  --cb-lime-100: #EEFFB3;
  --cb-lime-50:  #F9FFE0;

  /* ─────────── Signature Gradient ─────────── */
  --cb-gradient: linear-gradient(90deg, #00BBEA 0%, #CBFF00 100%);
  --cb-gradient-diag: linear-gradient(135deg, #00BBEA 0%, #CBFF00 100%);

  /* ─────────── Semantic Surface / Text ─────────── */
  --cb-bg: #FFFFFF;
  --cb-bg-alt: #F4F8FC;          /* off-white wash, derived */
  --cb-bg-dark: #002147;
  --cb-bg-darker: #001530;       /* slightly deeper than primary */

  --cb-fg-1: #002147;            /* primary text on light */
  --cb-fg-2: #1E2939;            /* secondary text on light */
  --cb-fg-3: #5A6675;            /* tertiary / supporting */
  --cb-fg-muted: #8A95A4;        /* captions */

  --cb-fg-on-dark-1: #FFFFFF;
  --cb-fg-on-dark-2: #B6D2F0;
  --cb-fg-on-dark-3: #8EAFD4;

  --cb-border: #E2E8F0;
  --cb-border-strong: #B6D2F0;
  --cb-border-dark: rgba(255,255,255,0.12);

  --cb-link: #00BBEA;
  --cb-link-hover: #00C6EF;

  /* ─────────── Type ─────────── */
  --cb-font-display: 'Paytone One', system-ui, sans-serif;
  --cb-font-body: 'Nunito Sans', system-ui, sans-serif;

  /* Hierarchy from guidelines */
  --cb-title-size: 96px;        /* 107% lh */
  --cb-section-size: 60px;      /* 112% */
  --cb-subhead-1-size: 48px;    /* 117% */
  --cb-subhead-2-size: 36px;    /* 122% */
  --cb-body-1-size: 30px;       /* 153% */
  --cb-body-2-size: 24px;       /* 158% */
  --cb-body-3-size: 20px;       /* 160% */
  --cb-link-size: 36px;         /* 150% */

  /* ─────────── Spacing ─────────── */
  --cb-space-1: 4px;
  --cb-space-2: 8px;
  --cb-space-3: 12px;
  --cb-space-4: 16px;
  --cb-space-5: 24px;
  --cb-space-6: 32px;
  --cb-space-7: 48px;
  --cb-space-8: 64px;
  --cb-space-9: 96px;
  --cb-space-10: 128px;

  /* ─────────── Radius ─────────── */
  --cb-radius-xs: 4px;
  --cb-radius-sm: 8px;
  --cb-radius-md: 12px;
  --cb-radius-lg: 20px;
  --cb-radius-xl: 28px;
  --cb-radius-pill: 999px;

  /* ─────────── Shadow ─────────── */
  --cb-shadow-sm: 0 1px 2px rgba(0, 33, 71, 0.06), 0 1px 1px rgba(0, 33, 71, 0.04);
  --cb-shadow-md: 0 4px 12px rgba(0, 33, 71, 0.08), 0 2px 4px rgba(0, 33, 71, 0.04);
  --cb-shadow-lg: 0 12px 32px rgba(0, 33, 71, 0.12), 0 4px 8px rgba(0, 33, 71, 0.05);
  --cb-shadow-glow: 0 0 0 4px rgba(0, 187, 234, 0.18);
  --cb-shadow-lime-glow: 0 0 0 4px rgba(203, 255, 0, 0.30);

  /* ─────────── Motion ─────────── */
  --cb-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --cb-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --cb-dur-fast: 120ms;
  --cb-dur-base: 200ms;
  --cb-dur-slow: 360ms;
}

/* ─────────── Semantic / Element Styles ─────────── */
html, body {
  font-family: var(--cb-font-body);
  color: var(--cb-fg-1);
  background: var(--cb-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.cb-title {
  font-family: var(--cb-font-display);
  font-size: var(--cb-title-size);
  line-height: 107%;
  letter-spacing: -0.01em;
  color: var(--cb-deep-blue);
}
.cb-section {
  font-family: var(--cb-font-display);
  font-size: var(--cb-section-size);
  line-height: 112%;
  color: var(--cb-deep-blue);
}
.cb-subhead-1 {
  font-family: var(--cb-font-display);
  font-size: var(--cb-subhead-1-size);
  line-height: 117%;
  color: var(--cb-deep-blue);
}
.cb-subhead-2 {
  font-family: var(--cb-font-display);
  font-size: var(--cb-subhead-2-size);
  line-height: 122%;
  color: var(--cb-deep-blue);
}
.cb-body-1 {
  font-family: var(--cb-font-body);
  font-size: var(--cb-body-1-size);
  line-height: 153%;
  font-weight: 400;
}
.cb-body-2 {
  font-family: var(--cb-font-body);
  font-size: var(--cb-body-2-size);
  line-height: 158%;
  font-weight: 400;
}
.cb-body-3 {
  font-family: var(--cb-font-body);
  font-size: var(--cb-body-3-size);
  line-height: 160%;
  font-weight: 400;
}
.cb-link {
  font-family: var(--cb-font-body);
  font-size: var(--cb-link-size);
  line-height: 150%;
  font-weight: 700;
  color: var(--cb-link);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color var(--cb-dur-base) var(--cb-ease-out);
}
.cb-link:hover { color: var(--cb-light-blue-400); }

/* gradient text helper */
.cb-text-gradient {
  background: var(--cb-gradient);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}