/* frontend/css/base.css
   CSS reset, CSS variables (:root + .dark), fonts, body defaults
   Primary: Teal #0d9488 / #14b8a6 | Background: #0a0f1e (dark default)
*/

/* ─── Google Fonts ────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap');

/* ─── CSS Reset ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
img, video { max-width: 100%; display: block; }
ul, ol { list-style: none; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, textarea, select { font-family: inherit; font-size: inherit; }
table { border-collapse: collapse; }

/* ─── Design Tokens — Dark Mode (default) ────────────────────────────────── */
:root {
  /* Brand */
  --c-primary:        #14b8a6;
  --c-primary-dark:   #0d9488;
  --c-primary-dim:    #0f766e;
  --c-accent:         #5eead4;

  /* Surfaces */
  --c-bg:             #0a0f1e;
  --c-surface:        #111827;
  --c-surface-2:      #1a2235;
  --c-surface-3:      #1e2d40;
  --c-border:         #1e3048;
  --c-border-light:   #2a3f5f;

  /* Text */
  --c-text:           #e2e8f0;
  --c-text-muted:     #94a3b8;
  --c-text-subtle:    #64748b;

  /* Status */
  --c-success:        #10b981;
  --c-warning:        #f59e0b;
  --c-error:          #ef4444;
  --c-info:           #3b82f6;

  /* Status backgrounds */
  --c-success-bg:     rgba(16,185,129,0.12);
  --c-warning-bg:     rgba(245,158,11,0.12);
  --c-error-bg:       rgba(239,68,68,0.12);
  --c-info-bg:        rgba(59,130,246,0.12);

  /* Shadows */
  --shadow-sm:        0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:        0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg:        0 8px 32px rgba(0,0,0,0.5);
  --shadow-teal:      0 4px 24px rgba(20,184,166,0.15);

  /* Radius */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-full: 9999px;

  /* Spacing */
  --sp-1:  4px;  --sp-2:  8px;  --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px;  --sp-10:40px;
  --sp-12:48px;  --sp-16:64px;  --sp-20:80px;

  /* Typography */
  --font-body:    'Inter', system-ui, sans-serif;
  --font-display: 'Manrope', sans-serif;

  /* Layout */
  --max-w:      1200px;
  --nav-h:      70px;
  --transition: 200ms ease;
}

/* ─── Light Mode overrides ───────────────────────────────────────────────── */
.light {
  --c-bg:           #f8fafc;
  --c-surface:      #ffffff;
  --c-surface-2:    #f1f5f9;
  --c-surface-3:    #e2e8f0;
  --c-border:       #e2e8f0;
  --c-border-light: #cbd5e1;
  --c-text:         #0f172a;
  --c-text-muted:   #475569;
  --c-text-subtle:  #94a3b8;
  --shadow-sm:      0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:      0 4px 16px rgba(0,0,0,0.1);
  --shadow-lg:      0 8px 32px rgba(0,0,0,0.12);
}

/* ─── Body defaults ──────────────────────────────────────────────────────── */
body {
  font-family: var(--font-body);
  background-color: var(--c-bg);
  color: var(--c-text);
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ─── Typography scale ───────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); line-height: 1.25; font-weight: 700; }
h1 { font-size: clamp(2rem, 5vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.1rem; }
p  { color: var(--c-text-muted); line-height: 1.7; }

/* ─── Utility: container ─────────────────────────────────────────────────── */
.container {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--sp-6);
}

/* ─── Utility: visually hidden ───────────────────────────────────────────── */
.sr-only {
  position: absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ─── Utility: flex helpers ──────────────────────────────────────────────── */
.flex        { display: flex; }
.flex-col    { flex-direction: column; }
.items-center{ align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.gap-2  { gap: var(--sp-2); }
.gap-4  { gap: var(--sp-4); }
.gap-6  { gap: var(--sp-6); }
.gap-8  { gap: var(--sp-8); }
.flex-wrap { flex-wrap: wrap; }
.flex-1    { flex: 1; }

/* ─── Utility: grid helpers ──────────────────────────────────────────────── */
.grid { display: grid; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ─── Utility: text helpers ──────────────────────────────────────────────── */
.text-primary { color: var(--c-primary); }
.text-muted   { color: var(--c-text-muted); }
.text-center  { text-align: center; }
.font-bold    { font-weight: 700; }
.font-display { font-family: var(--font-display); }

/* ─── Utility: spacing ───────────────────────────────────────────────────── */
.mt-auto { margin-top: auto; }
.mb-2  { margin-bottom: var(--sp-2); }
.mb-4  { margin-bottom: var(--sp-4); }
.mb-6  { margin-bottom: var(--sp-6); }
.mb-8  { margin-bottom: var(--sp-8); }

/* ─── Teal gradient text ─────────────────────────────────────────────────── */
.gradient-text {
  background: linear-gradient(135deg, var(--c-primary), var(--c-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─── Section padding ────────────────────────────────────────────────────── */
.section { padding-block: var(--sp-20); }
.section-sm { padding-block: var(--sp-12); }

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .hide-mobile { display: none !important; }
}
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}