/* ELT Learn — design tokens ported from the "ELT Design System" Claude Design project. */
:root {
  /* ---- Base palette ---- */
  --cyan-50:  #EAFAFD;
  --cyan-200: #7FE0F2;
  --cyan-400: #35C1DE;
  --cyan-600: #0E8CA8;
  --cyan-900: #0A2230;

  --navy-900: #161B30;
  --navy-800: #1E2440;
  --navy-700: #292F50;
  --navy-600: #3C4458;
  --navy-400: #5A6276;
  --navy-300: #6B7388;
  --navy-200: #7C87A6;
  --navy-100: #9AA1B2;

  --white:    #FFFFFF;
  --gray-50:  #F6F8FA;
  --gray-100: #E7EEF4;
  --gray-200: #EDF0F4;
  --gray-300: #E3E8EF;
  --gray-400: #D6DEE8;
  --gray-500: #C3CCE2;
  --gray-600: #D6DEF0;

  /* ---- Semantic aliases ---- */
  --color-brand-primary:        var(--cyan-400);
  --color-brand-primary-text:   var(--cyan-900);
  --color-brand-primary-hover-shadow: rgba(53, 193, 222, .85);
  --color-brand-ink:            var(--navy-700);
  --color-brand-ink-deep:       var(--navy-800);
  --color-brand-ink-deepest:    var(--navy-900);

  --text-heading:        var(--navy-700);
  --text-heading-inverse: var(--white);
  --text-body:           var(--navy-600);
  --text-body-muted:     var(--navy-400);
  --text-caption:        var(--navy-300);
  --text-caption-inverse: var(--navy-200);
  --text-eyebrow:        var(--navy-100);
  --text-eyebrow-inverse: var(--cyan-200);
  --text-link:           var(--cyan-600);
  --text-on-dark:        var(--white);
  --text-on-dark-muted:  var(--gray-500);

  --surface-page:        var(--white);
  --surface-alt:         var(--gray-50);
  --surface-card:        var(--gray-50);
  --surface-card-inverse: var(--white);
  --surface-dark:        var(--navy-700);
  --surface-darker:      var(--navy-800);
  --surface-darkest:     var(--navy-900);
  --surface-chip:        var(--gray-100);

  --border-default:      var(--gray-300);
  --border-subtle:       var(--gray-200);
  --border-hover:        var(--cyan-400);

  --cta-bg:               var(--cyan-400);
  --cta-text:             var(--cyan-900);
  --cta-dark-bg:          var(--navy-700);
  --cta-dark-bg-hover:    var(--navy-800);
  --cta-dark-text:        var(--white);

  /* ---- Font families ---- */
  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-body: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;

  /* ---- Display / heading scale ---- */
  --text-display-xl: 600 52px/1.1 var(--font-display);
  --text-display-lg: 600 38px/1.15 var(--font-display);
  --text-display-md: 600 36px/1.12 var(--font-display);
  --text-display-sm: 600 34px/1.2 var(--font-display);
  --text-display-stat: 600 48px/1 var(--font-display);
  --text-display-quote: 500 26px/1.45 var(--font-display);

  /* ---- Body scale ---- */
  --text-eyebrow-token: 700 12px/1.4 var(--font-body);
  --text-eyebrow-loose: 600 12px/1.4 var(--font-body);
  --text-lede: 400 18px/1.65 var(--font-body);
  --text-card-title: 700 27px/1.3 var(--font-body);
  --text-card-title-sm: 700 19px/1.3 var(--font-body);
  --text-feature-title: 700 18px/1.3 var(--font-body);
  --text-faq-title: 700 17px/1.3 var(--font-body);
  --text-body-lg: 400 17px/1.6 var(--font-body);
  --text-body-md: 400 16px/1.5 var(--font-body);
  --text-body-sm: 400 15px/1.55 var(--font-body);
  --text-nav: 500 15px/1.4 var(--font-body);
  --text-link-token: 700 15px/1.4 var(--font-body);
  --text-button: 700 14px/1.2 var(--font-body);
  --text-button-lg: 700 16px/1.2 var(--font-body);
  --text-caption-token: 500 14px/1.4 var(--font-body);
  --text-fine: 400 13px/1.4 var(--font-body);

  --letter-spacing-eyebrow: .2em;
  --letter-spacing-eyebrow-loose: .18em;
  --letter-spacing-tight: -.01em;
  --letter-spacing-wide: .04em;

  /* ---- Spacing scale ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 14px;
  --space-5: 16px;
  --space-6: 18px;
  --space-7: 20px;
  --space-8: 24px;
  --space-9: 28px;
  --space-10: 32px;
  --space-11: 36px;
  --space-12: 40px;
  --space-14: 48px;
  --space-16: 56px;
  --space-18: 64px;
  --space-20: 72px;
  --space-22: 78px;
  --space-24: 96px;

  --container-max: 1320px;
  --page-gutter: 48px;

  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 9px;
  --radius-xl: 14px;
  --radius-2xl: 16px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* ---- Borders ---- */
  --border-hairline: 1px solid var(--border-default);
  --border-hairline-subtle: 1px solid var(--border-subtle);

  /* ---- Shadows (hover only, never at rest) ---- */
  --shadow-card-hover: 0 26px 52px -28px rgba(20, 28, 55, .5);
  --shadow-card-hover-sm: 0 22px 44px -26px rgba(20, 28, 55, .5);
  --shadow-tile-hover: 0 14px 30px -18px rgba(20, 28, 55, .5);
  --shadow-pill-hover: 0 12px 26px -16px rgba(20, 28, 55, .5);
  --shadow-cta-hover: 0 10px 24px -10px rgba(53, 193, 222, .8);
  --shadow-cta-hover-lg: 0 16px 34px -12px rgba(53, 193, 222, .85);
  --shadow-cta-dark-hover: 0 14px 30px -12px rgba(41, 47, 80, .7);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(.22, .61, .36, 1);
  --duration-fast: .2s;
  --duration-base: .3s;
  --duration-slow: .5s;
  --duration-photo: .6s;

  --transition-hover: transform var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
  --transition-card: transform var(--duration-base) ease, box-shadow var(--duration-base) ease, border-color var(--duration-base) ease;
  --transition-link: gap .25s ease;
  --transition-photo: transform var(--duration-photo) var(--ease-standard);

  --lift-sm: translateY(-2px);
  --lift-md: translateY(-3px);
  --lift-card: translateY(-5px);
  --lift-card-lg: translateY(-6px);
}

@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/HankenGrotesk-Variable-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/Newsreader-Variable-latin.woff2') format('woff2');
}