/* =========================================================
   Smart Marketing Fusion — Design Tokens
   Premium dark-first AI/automation aesthetic.
   Inspired by Stripe, Linear, Vercel, OpenAI.
   ========================================================= */

/* ---------- Webfonts (Google Fonts: Geist + Geist Mono) ----------
   Geist is Vercel's typeface — the closest free, clean,
   tech-premium sans available. If brand mandates a custom
   typeface, swap @font-face below. */
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800&family=Geist+Mono:wght@400;500;600&display=swap");

:root {
  /* ============ CORE BRAND ============ */
  --smf-deep:      #041E35;   /* Brand deep navy — primary background */
  --smf-cyan:      #0DD3E1;   /* Brand cyan — primary accent */
  --smf-cyan-hi:   #00E5FF;   /* Hi-vis cyan — focus / glow / hover */

  /* ============ NEUTRAL SCALE (dark-first) ============ */
  --bg-0:  #020B16;   /* Deepest — page background under everything */
  --bg-1:  #041E35;   /* Brand deep — main surface */
  --bg-2:  #0A2A45;   /* Elevated surface (cards on canvas) */
  --bg-3:  #103654;   /* Hover / pressed surface */
  --bg-4:  #16456A;   /* Top-tier elevation */

  --line-1: rgba(255,255,255,0.06);   /* Hairline */
  --line-2: rgba(255,255,255,0.10);   /* Standard border */
  --line-3: rgba(13,211,225,0.24);    /* Cyan accent border */
  --line-focus: #00E5FF;              /* Focus ring */

  /* ============ FOREGROUND ============ */
  --fg-1:  #F4FBFF;   /* Primary text — near-white with a hint of cyan */
  --fg-2:  #BFD3E2;   /* Secondary text */
  --fg-3:  #7E97AB;   /* Tertiary / muted */
  --fg-4:  #4A6378;   /* Disabled / placeholder */
  --fg-on-cyan: #021018;  /* Text used on cyan fills */

  /* ============ SEMANTIC ============ */
  --success:  #34D399;
  --warning:  #FBBF24;
  --danger:   #FB7185;
  --info:     var(--smf-cyan);

  --success-bg: rgba(52,211,153,0.12);
  --warning-bg: rgba(251,191,36,0.12);
  --danger-bg:  rgba(251,113,133,0.14);
  --info-bg:    rgba(13,211,225,0.12);

  /* ============ GLOW / ELEVATION ============
     Used very sparingly. Glow is the brand's signature treatment. */
  --glow-cyan-sm: 0 0 0 1px rgba(13,211,225,0.35), 0 0 18px -2px rgba(13,211,225,0.45);
  --glow-cyan-md: 0 0 0 1px rgba(13,211,225,0.45), 0 0 36px -4px rgba(0,229,255,0.55);
  --glow-cyan-lg: 0 0 0 1px rgba(13,211,225,0.55), 0 12px 80px -10px rgba(0,229,255,0.55);

  --shadow-1: 0 1px 0 rgba(255,255,255,0.04) inset, 0 1px 2px rgba(0,0,0,0.35);
  --shadow-2: 0 1px 0 rgba(255,255,255,0.05) inset, 0 8px 24px -6px rgba(0,0,0,0.55);
  --shadow-3: 0 1px 0 rgba(255,255,255,0.06) inset, 0 24px 64px -12px rgba(0,0,0,0.7);

  /* ============ RADII ============ */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-2xl: 36px;
  --radius-pill: 999px;

  /* ============ SPACING (4pt scale) ============ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 56px;
  --space-10: 72px;
  --space-11: 96px;
  --space-12: 128px;

  /* ============ TYPE FAMILIES ============ */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "JetBrains Mono", "Menlo", monospace;

  /* ============ TYPE SCALE (clamp-responsive) ============ */
  --fs-display-1: clamp(48px, 7.2vw, 96px);  /* Hero on landing */
  --fs-display-2: clamp(40px, 5.5vw, 72px);
  --fs-h1: clamp(34px, 4vw, 56px);
  --fs-h2: clamp(28px, 3vw, 40px);
  --fs-h3: clamp(22px, 2vw, 28px);
  --fs-h4: 20px;
  --fs-h5: 17px;
  --fs-body-lg: 18px;
  --fs-body: 16px;
  --fs-body-sm: 14px;
  --fs-caption: 13px;
  --fs-micro: 11px;     /* eyebrows, labels */

  /* line-heights */
  --lh-tight: 1.04;
  --lh-snug: 1.18;
  --lh-normal: 1.45;
  --lh-relaxed: 1.6;

  /* tracking */
  --tr-display: -0.025em;
  --tr-tight: -0.015em;
  --tr-normal: 0em;
  --tr-eyebrow: 0.14em;

  /* ============ MOTION ============ */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;

  /* ============ LAYOUT ============ */
  --container: 1200px;
  --container-wide: 1400px;
  --nav-h: 64px;
}

/* =========================================================
   Base resets + type roles
   ========================================================= */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg-0);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.h-display-1, h1.display, .display-1 {
  font-family: var(--font-display);
  font-size: var(--fs-display-1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
  font-weight: 600;
  margin: 0;
}
.h-display-2, .display-2 {
  font-family: var(--font-display);
  font-size: var(--fs-display-2);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
  font-weight: 600;
  margin: 0;
}
h1, .h1 { font-family: var(--font-display); font-size: var(--fs-h1); line-height: var(--lh-snug); letter-spacing: var(--tr-tight); font-weight: 600; margin: 0; }
h2, .h2 { font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: var(--tr-tight); font-weight: 600; margin: 0; }
h3, .h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); letter-spacing: -0.01em; font-weight: 600; margin: 0; }
h4, .h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); font-weight: 600; margin: 0; }
h5, .h5 { font-size: var(--fs-h5); line-height: var(--lh-snug); font-weight: 600; margin: 0; }

p, .body  { font-size: var(--fs-body); line-height: var(--lh-relaxed); color: var(--fg-2); margin: 0; }
.body-lg  { font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); color: var(--fg-2); }
.body-sm  { font-size: var(--fs-body-sm); line-height: var(--lh-normal); color: var(--fg-2); }
.caption  { font-size: var(--fs-caption); color: var(--fg-3); }
.eyebrow {
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--tr-eyebrow);
  font-weight: 600;
  color: var(--smf-cyan);
}
code, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--fg-1);
}

/* Cyan gradient text — used sparingly on accents */
.text-gradient-cyan {
  background: linear-gradient(180deg, #E6FCFF 0%, #00E5FF 60%, #0DD3E1 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Subtle grid background — brand motif for hero / dashboard canvas */
.bg-grid {
  background-image:
    linear-gradient(rgba(13,211,225,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13,211,225,0.06) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: -1px -1px;
}
.bg-radial-cyan {
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(0,229,255,0.18), transparent 60%),
    var(--bg-1);
}