/* Font Family */
body {
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
    font-size: 15px;
    background-color: #ffffff;
    color: #111827;
  }
  
  /* Dark Mode Styles */
  .dark body {
    background-color: #111827;
    color: #f3f4f6;
  }
  
  /* Color Variables */
  :root {
    /* Light Theme */
    --background: #ffffff;
    --foreground: #111827;
    --primary: #111827;
    --primary-foreground: #f9fafb;
    --secondary: #f3f4f6;
    --secondary-foreground: #111827;
    --border: #e5e7eb;
    --card: #ffffff;
    --card-foreground: #111827;
    --destructive: #ef4444;
    --destructive-foreground: #f9fafb;
    --radius: 0.5rem;

    --color-primary:   #111827; /* example blue */
    --color-secondary: #ffed4a; /* example yellow */
    --color-gray-100:  #f7fafc;
    --color-gray-900:  #1a202c;
  
    /* Border radius (Tailwind default uses --radius-*) */
    --radius-sm: 0.125rem;
    --radius-md: 0.375rem;
    --radius-lg: 1rem;
  
    /* Font family (Tailwind default sans stack) */
    --font-sans: ui-sans-serif, system-ui, sans-serif, 
                 "Apple Color Emoji", "Segoe UI Emoji", 
                 "Segoe UI Symbol", "Noto Color Emoji";
  }
  
  
  .dark {
    /* Dark Theme */
    --background: #111827;
    --foreground: #f3f4f6;
    --primary: #111827;
    --primary-foreground: #1f2937;
    --secondary: #1f2937;
    --secondary-foreground: #f3f4f6;
    --border: #1f2937;
    --card: #111827;
    --card-foreground: #f3f4f6;
    --destructive: #7f1d1d;
    --destructive-foreground: #f9fafb;
  }
  
  /* Base Styles */
  * {
    border-color: var(--border);
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  
  /* Utility Classes */
  .text-balance {
    text-wrap: balance;
  }
  
  /* Animations */
  @keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  
  @keyframes scaleIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
  }
  
  .animate-fadeInUp {
    animation: fadeInUp 0.5s ease-out forwards;
  }
  
  .animate-fadeIn {
    animation: fadeIn 0.3s ease-out forwards;
  }
  
  .animate-scaleIn {
    animation: scaleIn 0.3s ease-out forwards;
  }
  
  /* Custom Colors */
  .bg-navy-50 { background-color: #f0f4fa; }
  .bg-navy-100 { background-color: #dce3f1; }
  .bg-navy-200 { background-color: #bccce5; }
  .bg-navy-300 { background-color: #111827; }
  .bg-navy-400 { background-color: #111827; }
  .bg-navy-500 { background-color: #111827; }
  .bg-navy-600 { background-color: #111827; }
  .bg-navy-700 { background-color: #111827; }
  .bg-navy-800 { background-color: #111827; }
  .bg-navy-900 { background-color: #172038; }
  .bg-navy-950 { background-color: #0d1220; }

  /* ============================= */
/*   Base reset & typography    */
/* ============================= */
/* Reset margins/padding and use border-box (like Tailwind Preflight):contentReference[oaicite:14]{index=14}:contentReference[oaicite:15]{index=15} */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  /* Base html/body styles */
  html {
    font-family: var(--font-sans);
    line-height: 1.5;
    /* (Additional base styles like font-size or color-scheme could go here) */
  }
  body {
    margin: 0;
    color: var(--color-gray-900);
    background-color: #fff;
  }
  
  /* Headings inherit size/weight (Tailwind Preflight does this too) */
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  
  /* ============================= */
  /*   Animations & Keyframes     */
  /* ============================= */
  @keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }
  .animate-fadeIn {
    animation: fadeIn 0.3s ease-out both;
  }
  
  /* ============================= */
  /*   Utility-like Classes       */
  /* ============================= */
  /* Balanced text wrap (Tailwind's text-balance):contentReference[oaicite:16]{index=16} */
  .text-balance {
    text-wrap: balance;
  }
  
  /* Color utilities */
  .text-primary {
    color: var(--color-primary);
  }
  .bg-secondary {
    background-color: var(--color-secondary);
  }