/* ═══════════════════════════════════════════════════════════════
   SAASKART — GLOBAL DESIGN SYSTEM v3.0
   Brand: Light theme, Navy #1B2A4A + Red #E8352A
   Font: Inter (matches saaskart.co)
═══════════════════════════════════════════════════════════════ */

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

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ── Background scale — LIGHT THEME ── */
  --bg:       #FFFFFF;
  --bg2:      #F4F6FA;
  --bg3:      #EBEEf5;
  --bg4:      #EAECF2;

  /* Surface overlays */
  --surface:  rgba(27, 42, 74, 0.05);
  --surface2: rgba(27, 42, 74, 0.08);
  --surface3: rgba(27, 42, 74, 0.10);

  /* Borders */
  --border:   rgba(27, 42, 74, 0.12);
  --border2:  rgba(27, 42, 74, 0.20);
  --border3:  rgba(27, 42, 74, 0.28);

  /* Text scale */
  --text:     #0F1A2E;
  --text2:    #2D3748;
  --text3:    #4A5568;
  --text4:    #6B7280;
  --text-inv: #FFFFFF;

  /* ── Brand: RED (primary CTA) ── */
  --red:         #E8352A;
  --red-hover:   #D12E24;
  --red-light:   #FF5249;
  --red-dim:     rgba(232, 53, 42, 0.10);
  --red-glow:    rgba(232, 53, 42, 0.20);

  /* ── Brand: NAVY (primary text / headings) ── */
  --navy:        #1B2A4A;
  --navy-hover:  #243662;
  --navy-dim:    rgba(27, 42, 74, 0.08);

  /* ── Accent colors ── */
  --cyan:        #0891B2;
  --cyan-dim:    rgba(8, 145, 178, 0.10);
  --violet:      #7C3AED;
  --violet2:     #8B5CF6;
  --violet-dim:  rgba(124, 58, 237, 0.10);
  --amber:       #D97706;
  --amber-dim:   rgba(217, 119, 6, 0.10);
  --green:       #059669;
  --green-dim:   rgba(5, 150, 105, 0.10);
  --pink:        #DB2777;
  --blue:        #2563EB;
  --blue-dim:    rgba(37, 99, 235, 0.10);

  /* ── Gradients — Navy → Red brand ── */
  --grad1:      linear-gradient(135deg, #E8352A, #FF6B35);
  --grad2:      linear-gradient(135deg, #1B2A4A, #2D4A7A);
  --grad3:      linear-gradient(135deg, #E8352A, #D97706);
  --grad4:      linear-gradient(135deg, #0891B2, #2563EB);
  --grad-hero:  linear-gradient(135deg, #1B2A4A 0%, #2D4A7A 50%, #E8352A 100%);
  --grad-radial: radial-gradient(ellipse, rgba(232,53,42,.08) 0%, transparent 70%);

  /* Typography */
  --font-body:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:  'JetBrains Mono', 'Fira Code', monospace;

  /* Border radii */
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* Shadows — light theme */
  --shadow-sm:  0 1px 4px rgba(27,42,74,0.08), 0 2px 8px rgba(27,42,74,0.04);
  --shadow-md:  0 4px 16px rgba(27,42,74,0.10), 0 8px 32px rgba(27,42,74,0.06);
  --shadow-lg:  0 8px 32px rgba(27,42,74,0.12), 0 20px 60px rgba(27,42,74,0.08);
  --shadow-xl:  0 16px 48px rgba(27,42,74,0.14), 0 36px 90px rgba(27,42,74,0.08);
  --shadow-red: 0 4px 20px rgba(232,53,42,0.25);

  /* Transitions */
  --transition: all 0.2s ease;
  --transition-slow: all 0.35s ease;

  /* Spacing */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 5rem;

  /* Layout */
  --container-max: 1200px;
  --nav-height: 68px;
}

/* ── Base ── */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb { background: var(--border3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text3); }

/* ── Selection ── */
::selection { background: rgba(232, 53, 42, 0.15); color: var(--text); }

/* ── Focus ── */
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: var(--radius-sm); }

/* ── Base elements ── */
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul, ol { list-style: none; }
button { font-family: var(--font-body); }
input, textarea, select { font-family: var(--font-body); }

/* ── Gradient text ── */
.grad-text  { background: var(--grad1); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.grad-text2 { background: var(--grad2); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.grad-text3 { background: var(--grad3); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.grad-text4 { background: linear-gradient(135deg, #E8352A, #1B2A4A); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.red-text   { color: var(--red); }
.navy-text  { color: var(--navy); }

/* ── Mono ── */
.mono { font-family: var(--font-mono); }

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