/* Global Styles */
/* Add your global CSS here */

/* ==========================================
   CSS VARIABLES - THEME SYSTEM
========================================== */

:root {

  /* ==========================================
     BRAND COLORS
  ========================================== */

  /* Brand palette — kept in sync with assets/scss/_variables.scss
     ($blue, $blue-bright, $accent, $accent-2, $accent-dark). The SCSS tokens
     are the source of truth for compiled styles; these mirror them so any
     global/inline usage stays on-brand and the two systems don't diverge. */
  --color-primary: #213164;        /* $blue */
  --color-primary-light: #2563EB;  /* $blue-bright */
  --color-primary-soft: #3B82F6;

  --color-secondary: #F59E0B;       /* $accent */
  --color-secondary-light: #FDC816; /* $accent-2 */
  --color-secondary-dark: #D97706;  /* $accent-dark */

  /* ==========================================
     DARK MODE PALETTE — mirrors the SCSS dark-section tokens
  ========================================== */

  --color-dark: #0b1428;            /* $blue-deep */
  --color-dark-2: #0f1c3a;          /* $blue-section */
  --color-dark-3: #070d1a;          /* $blue-section-deep */
  --color-dark-4: #1F2937;

  /* ==========================================
     LIGHT PALETTE
  ========================================== */

  --color-white: #FFFFFF;
  --color-light: #F8FAFC;
  --color-light-2: #F1F5F9;
  --color-light-3: #E2E8F0;

  /* ==========================================
     TEXT COLORS
  ========================================== */

  --text-heading: #0b1428;
  --text-body: #475569;
  --text-muted: #64748B;
  --text-light: #94A3B8;
  --text-white: #FFFFFF;

  /* ==========================================
     BORDER COLORS
  ========================================== */

  --border-color: #E2E8F0;
  --border-color-dark: rgba(255,255,255,0.08);

  /* ==========================================
     AI GLOW COLORS
  ========================================== */

  --glow-blue: #60A5FA;
  --glow-orange: #FDBA74;

  /* ==========================================
     SECTION BACKGROUNDS
  ========================================== */

  --section-dark: #0b1428;
  --section-dark-alt: #0f1c3a;

  --section-light: #FFFFFF;
  --section-light-alt: #F8FAFC;

  /* ==========================================
     GRADIENTS
  ========================================== */

  --gradient-primary:
    linear-gradient(
      135deg,
      #081120 0%,
      #172554 50%,
      #2563EB 100%
    );

  --gradient-accent:
    linear-gradient(
      135deg,
      #2563EB 0%,
      #F59E0B 100%
    );

  --gradient-dark:
    linear-gradient(
      180deg,
      #081120 0%,
      #0B1220 100%
    );

  /* ==========================================
     SHADOWS
  ========================================== */

  --shadow-sm:
    0 2px 8px rgba(15, 23, 42, 0.08);

  --shadow-md:
    0 8px 24px rgba(15, 23, 42, 0.12);

  --shadow-lg:
    0 16px 48px rgba(15, 23, 42, 0.16);

  --shadow-xl:
    0 24px 80px rgba(15, 23, 42, 0.24);

  /* ==========================================
     GLASSMORPHISM
  ========================================== */

  --glass-bg:
    rgba(255,255,255,0.08);

  --glass-border:
    rgba(255,255,255,0.12);

  --glass-blur:
    blur(20px);

  /* ==========================================
     BORDER RADIUS
  ========================================== */

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 30px;
  --radius-full: 999px;

  /* ==========================================
     FONTS
  ========================================== */

  --font-heading: "Plus Jakarta Sans", sans-serif;
  --font-body: "Inter", sans-serif;

  /* ==========================================
     FONT SIZES
  ========================================== */

  --fs-display: clamp(72px, 8vw, 120px);
  --fs-h1: clamp(56px, 6vw, 90px);
  --fs-h2: clamp(42px, 5vw, 72px);
  --fs-h3: clamp(32px, 4vw, 48px);
  --fs-h4: 28px;

  --fs-body-lg: 20px;
  --fs-body: 18px;
  --fs-body-sm: 16px;

  /* ==========================================
     SPACING
  ========================================== */

  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 40px;
  --space-xl: 60px;
  --space-2xl: 80px;
  --space-3xl: 120px;
  --space-4xl: 160px;

}

/* ==========================================
   BASE STYLES
========================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* Kill the grey/blue flash mobile browsers paint over tapped elements
     (links, buttons, anything with a click handler). Our own :hover/:active
     and :focus-visible states provide the intended tap feedback. */
  -webkit-tap-highlight-color: transparent;
}

html {
  scroll-behavior: smooth;
  /* Never allow sideways scroll: decorative, full-bleed visuals (hero AI core,
     section glows) can extend past the viewport on narrow phones. Clipping the
     X axis keeps every page perfectly centered with no rightward drift, while
     still allowing position: sticky/normal vertical scroll. */
  overflow-x: clip;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--text-body);
  background-color: var(--color-white);
  overflow-x: clip;
}

/* ==========================================
   FIXED HEADER OFFSET
   The header is fixed + transparent over the hero. Pages that lead with a
   full-bleed dark hero (.has-hero on <body>) sit beneath it; all other pages
   add top padding on <main> so content clears the floating header.
========================================== */
main { padding-top: 96px; }
body.has-hero main { padding-top: 0; }
/* The home hero (.hero) is styled in assets/css/hero.css (compiled from SCSS). */