/* static/css/base.css */

/* ——————————————————————————————————————————————
   CSS VARIABLES: Color Palette, Typography, Spacing
   —————————————————————————————————————————————— */
:root {
  /* —— Primary Colors —— */
  --primary-900: #1e3a8a;
  --primary-800: #1e40af;
  --primary-700: #1d4ed8;
  --primary-600: #2563eb;
  --primary-500: #3b82f6;
  --primary-100: #dbeafe;

  /* —— Neutrals —— */
  --neutral-950: #0f172a;
  --neutral-900: #1e293b;
  --neutral-800: #334155;
  --neutral-700: #475569;
  --neutral-600: #64748b;
  --neutral-500: #94a3b8;
  --neutral-200: #e2e8f0;
  --neutral-100: #f1f5f9;
  --neutral-50 : #f8fafc;

  /* —— Accent States —— */
  --success: #10b981;
  --warning: #f59e0b;
  --danger : #ef4444;

  /* —— Typography —— */
  --font-heading: 'Industry', sans-serif;
  --font-body   : 'Inter', sans-serif;
  --font-mono   : 'JetBrains Mono', monospace;

  /* —— Spacing Scale —— */
  --space-1 : 0.25rem;  /* 4px */
  --space-2 : 0.5rem;   /* 8px */
  --space-3 : 0.75rem;  /* 12px */
  --space-4 : 1rem;     /* 16px */
  --space-6 : 1.5rem;   /* 24px */
  --space-8 : 2rem;     /* 32px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 7rem;     /* 64px */
  
  
  --icon-size-sm: 4rem;  
  --icon-size-md: 6rem;    
  --icon-size-lg: 8rem;  

  /* —— Layout Gaps —— */
  --gap-card   : var(--space-4);  /* 16px */
  --gap-section: var(--space-8);  /* 32px */
}

/* ——————————————————————————————————————————————
   GLOBAL RESET & BASE LAYOUT
   —————————————————————————————————————————————— */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-size: 100%;           /* 16px */
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  background-color: var(--neutral-950);
  color: var(--neutral-50);
}

main {
  flex: 1;
}

/* —— Utility Classes (optional) —— */
.text-center { text-align: center; }
.mb-4        { margin-bottom: var(--space-4); }
.p-4         { padding: var(--space-4); }
.hidden      { display: none; }
/* Add more as you discover common patterns… */

/* Flash message styling */
.flash-container {
  margin: var(--space-4) auto;
  width: 80%;
}

.flash {
  padding: var(--space-2) var(--space-4);
  border-radius: 4px;
  margin-bottom: var(--space-2);
}

.flash.success { background-color: var(--success); color: #fff; }
.flash.warning { background-color: var(--warning); color: #000; }
.flash.danger  { background-color: var(--danger);  color: #fff; }
.flash.info    { background-color: var(--neutral-600); color: #fff; }

.flash-container.hide {
  opacity: 0;
}

/* ——————————————————————————————————————————————
   MOBILE-ONLY STYLES (max-width: 767px)
   —————————————————————————————————————————————— */
@media (max-width: 767px) {
  html {
    -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape */
  }
  
  body {
    min-height: -webkit-fill-available; /* iOS viewport fix */
    overflow-x: hidden; /* Prevent horizontal scroll */
  }
  
  main {
    overflow-x: hidden;
  }
  
  /* Touch-friendly tap targets */
  a, button {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* Responsive images */
  img {
    max-width: 100%;
    height: auto;
  }
  
  /* Mobile flash messages */
  .flash-container {
    position: fixed;
    top: 60px; /* Below mobile header */
    left: 0;
    right: 0;
    width: 100%;
    z-index: 100;
    padding: 0 var(--space-4);
    margin: 0;
  }
  
  .flash {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    animation: slideIn 0.3s ease-out;
  }
  
  @keyframes slideIn {
    from {
      transform: translateY(-100%);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
  
  /* Form elements - prevent zoom on iOS */
  input, textarea, select, button {
    font-size: 16px;
  }
  
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  textarea,
  select {
    width: 100%;
    padding: var(--space-3);
  }
  
  /* Responsive tables */
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
  
  /* Hide desktop-only elements */
  .hide-mobile {
    display: none !important;
  }
}

/* Show mobile-only elements on mobile */
@media (min-width: 768px) {
  .hide-desktop {
    display: none !important;
  }
}