/* Design tokens + base styles ported from src/index.css */






/* ==========================================================
   Venture North PITCH 2026 - Design System
   Brand: Teal accent + dark navy backgrounds + arrow motif
   Fonts: Montserrat (display) / Open Sans (body)
   ========================================================== */

@layer base {
  :root {
    /* Brand core */
    --background: 220 45% 6%;            /* deep navy-black */
    --foreground: 0 0% 98%;

    --surface: 220 40% 9%;               /* card/section dark */
    --surface-elevated: 220 35% 12%;
    --surface-light: 0 0% 98%;
    --surface-light-foreground: 220 45% 8%;

    --card: 220 40% 9%;
    --card-foreground: 0 0% 98%;

    --popover: 220 40% 10%;
    --popover-foreground: 0 0% 98%;

    /* Teal - primary brand accent (RGB 0,179,152 ≈ HSL 171 100% 35%) */
    --primary: 171 100% 35%;
    --primary-foreground: 220 45% 6%;
    --primary-glow: 171 80% 45%;

    /* Sky-blue arrow accent */
    --brand-blue: 199 85% 60%;
    /* Bright green arrow accent */
    --brand-green: 130 78% 65%;
    /* Soft teal-mint */
    --brand-mint: 165 70% 70%;

    --secondary: 220 30% 16%;
    --secondary-foreground: 0 0% 98%;

    --muted: 220 25% 18%;
    --muted-foreground: 220 12% 70%;

    --accent: 171 100% 35%;
    --accent-foreground: 220 45% 6%;

    --destructive: 0 75% 55%;
    --destructive-foreground: 0 0% 98%;

    --border: 220 25% 18%;
    --input: 220 25% 18%;
    --ring: 171 100% 40%;

    --radius: 0.625rem;

    /* Gradients */
    --gradient-hero: linear-gradient(135deg, hsl(220 50% 4%) 0%, hsl(200 60% 10%) 60%, hsl(171 70% 18%) 100%);
    --gradient-teal: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--primary-glow)) 100%);
    --gradient-overlay: linear-gradient(180deg, hsl(220 50% 4% / 0.4) 0%, hsl(220 50% 4% / 0.92) 100%);
    --gradient-section: linear-gradient(180deg, hsl(220 45% 6%) 0%, hsl(220 40% 8%) 100%);

    /* Shadows */
    --shadow-glow: 0 0 60px -10px hsl(var(--primary) / 0.55);
    --shadow-card: 0 24px 60px -20px hsl(220 80% 2% / 0.6);
    --shadow-cta: 0 18px 40px -12px hsl(var(--primary) / 0.55);

    /* Motion */
    --transition-base: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-spring: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Sidebar (unused but valid) */
    --sidebar-background: 220 40% 9%;
    --sidebar-foreground: 0 0% 98%;
    --sidebar-primary: 171 100% 35%;
    --sidebar-primary-foreground: 220 45% 6%;
    --sidebar-accent: 220 30% 16%;
    --sidebar-accent-foreground: 0 0% 98%;
    --sidebar-border: 220 25% 18%;
    --sidebar-ring: 171 100% 40%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  html { scroll-behavior: smooth; }
  body {
    @apply bg-background text-foreground font-body antialiased;
    font-feature-settings: "ss01", "cv11";
  }
  h1, h2, h3, h4, h5, h6 {
    @apply font-display;
    letter-spacing: -0.02em;
  }
  ::selection {
    background-color: hsl(var(--primary) / 0.4);
    color: hsl(var(--foreground));
  }
}

@layer components {
  .container-page {
    @apply mx-auto w-full max-w-7xl px-5 sm:px-6 md:px-10;
  }
  .eyebrow {
    @apply inline-flex items-center gap-2 text-xs font-display font-semibold tracking-[0.18em] uppercase text-primary;
  }
  .heading-display {
    @apply font-display font-black uppercase leading-[0.95] tracking-tight;
  }
  .arrow-bg {
    background-image: radial-gradient(circle at 20% 10%, hsl(var(--primary) / 0.12), transparent 40%),
                      radial-gradient(circle at 80% 90%, hsl(var(--brand-blue) / 0.10), transparent 45%);
  }

  /* Light section - inverts foreground tokens to dark so child components
     using semantic tokens (text-foreground, text-muted-foreground, border, etc.)
     automatically render correctly on a white background. */
  .section-light {
    --background: 0 0% 100%;
    --foreground: 220 45% 8%;
    --surface: 210 25% 97%;
    --surface-elevated: 0 0% 100%;
    --card: 0 0% 100%;
    --card-foreground: 220 45% 8%;
    --muted: 210 20% 94%;
    --muted-foreground: 220 15% 38%;
    --secondary: 210 20% 94%;
    --secondary-foreground: 220 45% 8%;
    --border: 220 15% 88%;
    --input: 220 15% 88%;
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
  }
}


/* Smooth scroll fallback */
html { scroll-behavior: smooth; }