@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
 
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
 
    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;
 
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
 
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
 
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
 
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
 
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
    
    /* Premium Custom Colors */
    --navy-dark: #001226;    
    --navy: #001f3f;         
    --navy-light: #0a2b52;   
    
    --gold: #d4af37;         
    --gold-light: #e6c86e;   
    --gold-dark: #aa8c2c;    

    --gold-premium: 46 65% 52%; 
    --gold-premium-hover: 46 65% 58%; 
    
    --slate-900: #0f172a;
    --slate-800: #1e293b;

    --ag-header-h: 96px;
    
    /* Standardized Border Radius */
    --radius-card: 18px;
    --radius-input: 14px;
    --radius-pill: 9999px;
    
    /* Typography Tokens */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --tracking-tight: -0.02em;
    --tracking-normal: -0.01em;
    --tracking-wide: 0.025em;

    /* =========================================
       TASK 2: UNIFIED DESIGN TOKEN SYSTEM
       ========================================= */
    
    /* SPACING TOKENS (Mobile Default) */
    --page-padding-x: 1rem;
    --page-padding-y: 2rem;
    
    --section-padding-top: 4rem;
    --section-padding-bottom: 4rem;
    --section-margin-bottom: 2rem;
    
    --hero-top-padding: 7rem;
    --hero-bottom-padding: 8rem;
    
    --spacing-headline-to-subheading: 2.5rem;
    --spacing-subheading-to-paragraph: 2rem;
    --spacing-paragraph-to-cta: 2.5rem;
    --spacing-section-gap: 4rem;
    --hero-content-gap: 2rem;
    
    --button-padding-x: 1.5rem;
    --button-padding-y: 0.875rem;
    --button-margin-top: 2rem;
    
    /* LAYOUT TOKENS */
    --content-max-width: 56rem; /* 4xl */
    --hero-height: 85vh;
    --card-padding: 1.5rem;
    
    /* TYPOGRAPHY RHYTHM */
    --line-height-tight: 1.15;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* Exact Dark Palette Colors for Homepage Sections */
    --color-medium-blue: 205 81% 21%; /* #0a3d62 */
    --color-deep-navy: 210 100% 12%;  /* #001f3f */
    --color-slate: 222 47% 11%;       /* #0f172a */
    --color-charcoal: 220 9% 13%;     /* #1e2024 */
    --color-steel-blue: 204 68% 22%;  /* #123f5d */
  }

  /* RESPONSIVE BREAKPOINTS */
  @media (min-width: 640px) {
    :root {
      --page-padding-x: 1.5rem;
      --button-padding-x: 2rem;
      --button-padding-y: 1rem;
    }
  }

  @media (min-width: 768px) {
    :root {
      --page-padding-x: 2rem;
      --page-padding-y: 4rem;
      
      --section-padding-top: 6rem;
      --section-padding-bottom: 6rem;
      --section-margin-bottom: 4rem;
      
      --hero-top-padding: 9rem;
      --hero-bottom-padding: 11rem;
      --hero-height: 100vh;
      
      --spacing-headline-to-subheading: 4rem;
      --spacing-subheading-to-paragraph: 2.5rem;
      --spacing-paragraph-to-cta: 3.5rem;
      --spacing-section-gap: 6rem;
      --hero-content-gap: 3rem;
      
      --card-padding: 2.5rem;
    }
  }

  @media (min-width: 1024px) {
    :root {
      --hero-top-padding: 10rem;
      --spacing-headline-to-subheading: 7rem;
    }
  }

  html {
    scroll-behavior: smooth;
  }

  * {
    @apply border-border;
  }

  body {
    @apply bg-slate-900 text-white antialiased;
    font-family: var(--font-sans);
    letter-spacing: var(--tracking-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  input,
  textarea,
  select,
  button,
  label {
    font-family: var(--font-sans);
  }

  h1, h2, h3 {
    font-family: var(--font-sans);
    letter-spacing: var(--tracking-tight);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
  }

  h4, h5, h6 {
    font-family: var(--font-sans);
    font-weight: var(--font-weight-semibold);
  }

  p {
    line-height: var(--line-height-relaxed);
  }

  .heading {
    font-family: var(--font-sans);
    letter-spacing: var(--tracking-tight);
  }
}

@layer utilities {
  .font-playfair {
    font-family: 'Playfair Display', serif;
  }
  
  .font-inter {
    font-family: 'Inter', sans-serif;
  }
  
  .font-system-sans {
    font-family: var(--font-sans);
  }

  .text-gold {
    color: var(--gold);
  }
  
  .bg-navy {
    background-color: var(--navy);
  }

  .bg-gold {
    background-color: var(--gold);
  }

  /* Exact Dark Palette Custom Utilities */
  .bg-medium-blue {
    background-color: hsl(var(--color-medium-blue));
  }
  
  .bg-deep-navy {
    background-color: hsl(var(--color-deep-navy));
  }

  .bg-slate {
    background-color: hsl(var(--color-slate));
  }

  .bg-charcoal {
    background-color: hsl(var(--color-charcoal));
  }

  .bg-steel-blue {
    background-color: hsl(var(--color-steel-blue));
  }

  .bg-gradient-premium {
    background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 100%);
  }
  
  .bg-gradient-gold {
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
  }

  /* Semantic Section Backgrounds (kept for backward compatibility if needed elsewhere) */
  .bg-section-services {
    background: linear-gradient(180deg, hsl(222 47% 12%) 0%, hsl(222 47% 9%) 100%);
  }

  .bg-section-journey {
    background: linear-gradient(135deg, hsl(217 33% 15%) 0%, hsl(217 33% 19%) 100%);
  }

  .bg-section-trust {
    background: linear-gradient(180deg, hsl(215 25% 17%) 0%, hsl(215 25% 14%) 100%);
  }

  .bg-section-washington {
    background: radial-gradient(circle at center top, hsl(225 40% 12%) 0%, hsl(225 50% 8%) 100%);
  }

  .bg-section-cta {
    background: linear-gradient(180deg, hsl(215 20% 19%) 0%, hsl(215 20% 23%) 100%);
  }

  /* Layout & Spacing Classes based on tokens */
  .hero-padding {
    padding-top: var(--hero-top-padding);
    padding-bottom: var(--hero-bottom-padding);
  }
  
  .section-padding {
    padding-top: var(--section-padding-top);
    padding-bottom: var(--section-padding-bottom);
  }

  .content-width {
    max-width: var(--content-max-width);
  }

  /* Typography Rhythm Classes */
  .gap-headline {
    margin-bottom: var(--spacing-headline-to-subheading);
  }
  
  .gap-subheading {
    margin-bottom: var(--spacing-subheading-to-paragraph);
  }
  
  .gap-paragraph {
    margin-bottom: var(--spacing-paragraph-to-cta);
  }

  .gap-section {
    margin-bottom: var(--spacing-section-gap);
  }

  .premium-leading-tight {
    line-height: var(--line-height-tight);
  }

  .premium-leading-normal {
    line-height: var(--line-height-normal);
  }

  .premium-leading-relaxed {
    line-height: var(--line-height-relaxed);
  }

  .btn-premium-padding {
    padding: var(--button-padding-y) var(--button-padding-x);
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .ag-hero-kicker {
    margin-top: calc(var(--ag-header-h) + env(safe-area-inset-top) + 8px);
  }
  :root {
    --ag-header-h: var(--ag-header-h, 88px);
  }
  .ag-hero {
    padding-top: calc(var(--ag-header-h) + env(safe-area-inset-top) + 28px) !important;
  }
  .ag-hero .ag-hero-kicker {
    position: relative !important;
    top: 26px !important;
    z-index: 10;
  }
  .ag-hero h1 {
    margin-top: 12px !important;
  }
  .ag-hero .bg-center {
    background-position: center 40% !important;
  }
}

/* REFINEMENT: Improve text readability and visual polish */
h1, h2, h3 {
  letter-spacing: -0.02em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

p, .text-inter {
  line-height: 1.7;
  letter-spacing: -0.01em;
}