/**
 * tokens.css
 * Design system variables — aligned with HyperFly reference aesthetic.
 * Clean, minimal, premium. 7px radius, subtle borders, restrained shadows.
 */

:root {
  /* Colors */
  --ink: #0A0A0D;
  --ink-rgb: 10, 10, 13;
  --ink-soft: #121215;
  --line-dark: rgba(255, 255, 255, 0.08);
  --blue: #2F5EFF;
  --blue-rgb: 47, 94, 255;
  --blue-dark: #1E46D6;
  --blue-dark-rgb: 30, 70, 214;
  --sky: #5EA1FF;
  --sky-rgb: 94, 161, 255;
  --white: #FFFFFF;
  --white-rgb: 255, 255, 255;
  --gradient-primary: linear-gradient(90deg, var(--blue-dark) 0%, var(--blue) 100%);
  --gradient-accent: linear-gradient(90deg, var(--blue) 0%, var(--sky) 100%);
  --paper: #F4F7FB;
  --paper-alt: #EAF0FA;
  --ink-text: #0F172A;
  --slate: #64748B;
  --slate-light: #94A3B8;
  --line: #EFEFEF;

  /* Light section tokens */
  --surface-light: #FFFFFF;
  --surface-light-alt: #F3F4F8;
  --text-on-light: #566879;
  --heading-on-light: #030D17;
  --border-on-light: #EFEFEF;
  --shadow-on-light: 0px 10px 60px 0px rgba(193, 193, 193, 0.25);

  /* HyperFly reference tokens */
  --hyperfly-font: 'Inter', sans-serif;
  --hyperfly-heading-font: 'Sora', sans-serif;
  --hyperfly-gray: #F3F4F8;
  --hyperfly-border-color: #EFEFEF;
  --hyperfly-bdr-radius: 7px;

  /* Typography Fonts */
  --font-display: 'Sora', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* Typography Scale */
  --font-size-hero: clamp(2.25rem, 5vw + 1rem, 4.25rem);
  --font-size-h2: clamp(1.85rem, 4vw + 1rem, 3rem);
  --font-size-h3: clamp(1.35rem, 1.8vw + 1rem, 1.85rem);
  --font-size-body-lg: 1.125rem;
  --font-size-body: 1rem;
  --font-size-sm: 0.875rem;
  --font-size-xs: 0.7rem;

  /* Layout and Spacing — matching HyperFly reference breakpoints */
  --max-width: 1200px;
  --max-width-lg: 1320px;
  --padding-inline-mobile: 15px;
  --padding-inline-desktop: 15px;
  --section-padding: clamp(4rem, 8vw, 7.5rem);
  --section-padding-tablet: clamp(3.5rem, 6vw, 5rem);
  --section-padding-mobile: clamp(2.5rem, 5vw, 3.5rem);

  /* Reference Breakpoints (HyperFly / Bootstrap 5 standard) */
  --breakpoint-xs: 0px;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-xxl: 1400px;

  /* Borders and Shadows — minimal, restrained */
  --radius-sm: 6px;
  --radius-md: 7px;
  --radius-lg: 12px;
  --radius-round: 50%;
  
  --shadow-sm: 0 2px 8px rgba(10, 15, 29, 0.04);
  --shadow-md: 0 8px 30px rgba(10, 15, 29, 0.06);
  --shadow-lg: 0 16px 40px rgba(10, 15, 29, 0.12);
  --shadow-blue: 0 8px 24px rgba(47, 94, 255, 0.25);

  /* Transitions */
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}