/* ============================================================
   Boostra Design System — Colors & Type
   ============================================================ */

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

:root {
  --boostra-blue:        #2563eb;
  --boostra-blue-600:    #1d4ed8;
  --boostra-blue-700:    #1e40af;
  --boostra-blue-50:     #f0f9ff;
  --boostra-blue-100:    #e0f2fe;

  --boostra-slate-900:   #1e293b;
  --boostra-slate-700:   #334155;
  --boostra-slate-600:   #475569;
  --boostra-slate-500:   #64748b;
  --boostra-slate-400:   #94a3b8;
  --boostra-slate-300:   #cbd5e1;
  --boostra-slate-200:   #e2e8f0;
  --boostra-slate-100:   #f8fafc;
  --boostra-white:       #ffffff;

  --boostra-gradient-logo: linear-gradient(135deg, #2563eb 0%, #14b8a6 55%, #22c55e 100%);
  --boostra-gradient-hero: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  --boostra-gradient-cta:  linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);

  --boostra-success:     #198754;
  --boostra-danger:      #e74c3c;
  --boostra-warning:     #f59e0b;

  --bg:                  var(--boostra-white);
  --bg-soft:             var(--boostra-slate-100);
  --bg-hero:             var(--boostra-gradient-hero);
  --bg-cta:              var(--boostra-gradient-cta);
  --bg-dark:             var(--boostra-slate-900);

  --fg1:                 var(--boostra-slate-900);
  --fg2:                 var(--boostra-slate-500);
  --fg3:                 var(--boostra-slate-400);
  --fg-on-dark:          var(--boostra-white);
  --fg-on-brand:         var(--boostra-white);

  --accent:              var(--boostra-blue);
  --accent-hover:        var(--boostra-blue-600);
  --accent-pressed:      var(--boostra-blue-700);
  --accent-tint:         rgba(37, 99, 235, 0.10);
  --accent-tint-soft:    rgba(37, 99, 235, 0.05);
  --focus-ring:          rgba(37, 99, 235, 0.25);

  --border:              var(--boostra-slate-200);
  --border-strong:       var(--boostra-slate-300);

  --font-sans:    'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --fs-display:    3.2rem;
  --fs-h1:         2.5rem;
  --fs-h2:         2rem;
  --fs-h3:         1.7rem;
  --fs-h4:         1.5rem;
  --fs-lead:       1.25rem;
  --fs-body:       1rem;
  --fs-sm:         0.9rem;
  --fs-xs:         0.8rem;
  --fs-micro:      0.75rem;

  --lh-tight:   1.2;
  --lh-snug:    1.4;
  --lh-base:    1.6;
  --lh-loose:   1.8;

  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-8:  3rem;
  --space-10: 5rem;
  --space-12: 6rem;

  --radius-xs:     0.25rem;
  --radius-sm:     0.5rem;
  --radius-md:     1rem;
  --radius-pill:   999px;
  --radius-circle: 50%;

  --shadow-nav:         0 2px 15px rgba(0, 0, 0, 0.10);
  --shadow-card:        0 10px 25px rgba(0, 0, 0, 0.05);
  --shadow-card-hover:  0 15px 35px rgba(0, 0, 0, 0.10);

  --t-fast:    0.2s;
  --t-base:    0.3s ease;
  --lift-y:    -5px;

  --container-max: 1140px;
  --nav-height:    76px;
}

:root {
  --boostra-teal-50:   #f0fdfa;
  --boostra-teal-100:  #ccfbf1;
  --boostra-teal-300:  #5eead4;
  --boostra-teal-500:  #14b8a6;
  --boostra-teal-600:  #0d9488;
  --boostra-teal-700:  #0f766e;

  --boostra-green-50:  #f0fdf4;
  --boostra-green-100: #dcfce7;
  --boostra-green-300: #86efac;
  --boostra-green-500: #22c55e;
  --boostra-green-600: #16a34a;
  --boostra-green-700: #15803d;

  --boostra-amber-50:  #fffbeb;
  --boostra-amber-100: #fef3c7;
  --boostra-amber-500: #f59e0b;
  --boostra-amber-600: #d97706;
  --boostra-amber-700: #b45309;

  --boostra-navy-900:  #0f172a;
  --boostra-navy-800:  #1e2a44;
  --boostra-navy-700:  #243453;

  --accent-2:          var(--boostra-teal-500);
  --accent-2-soft:     var(--boostra-teal-50);
  --growth:            var(--boostra-green-500);
  --growth-soft:       var(--boostra-green-50);
  --warm:              var(--boostra-amber-500);
  --warm-soft:         var(--boostra-amber-50);
  --premium:           var(--boostra-navy-900);
  --premium-soft:      var(--boostra-navy-800);

  --boostra-gradient-mesh-soft:
    radial-gradient(at 20% 0%, #dbeafe 0px, transparent 50%),
    radial-gradient(at 80% 0%, #ccfbf1 0px, transparent 50%),
    radial-gradient(at 50% 80%, #dcfce7 0px, transparent 45%),
    #f8fafc;
  --boostra-gradient-mesh-bold:
    radial-gradient(at 0% 0%, #2563eb 0px, transparent 55%),
    radial-gradient(at 100% 0%, #14b8a6 0px, transparent 55%),
    radial-gradient(at 60% 100%, #22c55e 0px, transparent 50%),
    #0f172a;
  --boostra-gradient-premium:
    linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%);
  --boostra-gradient-growth:
    linear-gradient(135deg, #14b8a6 0%, #22c55e 100%);

  --pattern-dots-slate:
    radial-gradient(circle at 1px 1px, #cbd5e1 1px, transparent 0);
  --pattern-dots-size: 18px 18px;

  --pattern-chevrons:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'><path d='M0 36 L24 12 L48 36' fill='none' stroke='%232563eb' stroke-opacity='.08' stroke-width='2'/><path d='M0 48 L24 24 L48 48' fill='none' stroke='%232563eb' stroke-opacity='.06' stroke-width='2'/></svg>");

  --surface-glass:        rgba(255, 255, 255, 0.72);
  --surface-glass-border: 1px solid rgba(255, 255, 255, 0.50);
  --backdrop-blur:        saturate(160%) blur(14px);
}

html { font-family: var(--font-sans); color: var(--fg1); }

body {
  font-family: var(--font-sans);
  color: var(--fg1);
  line-height: var(--lh-base);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  color: var(--fg1);
  line-height: var(--lh-tight);
  margin: 0 0 var(--space-5);
}

h1 { font-size: var(--fs-display); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); font-weight: var(--weight-semibold); }
h5 { font-size: var(--fs-body); font-weight: var(--weight-semibold); }

p { margin: 0 0 var(--space-4); }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }

::selection { background: var(--accent); color: var(--fg-on-brand); }