/* ==========================================================================
   SmartBee Design System — Colors + Typography
   Brand: SmartBee (smartbee.net.br) — São Joaquim da Barra, SP, Brazil
   Positioning: Cybersecurity · AI · Autonomous Systems · Cloud & On-prem Infra
   Aesthetic: Dark, technological, point-cloud, scan-line, tactical-HUD
   ========================================================================== */

/* -----------------------------------------------------------
   Webfonts (Google Fonts fallback — see README for substitution note)
   ----------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@300;400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap");

:root {
  /* ============================================================
     COLORS — "Hive Grid" palette
     Dark cyber-tactical base + SmartBee cyan + honey amber accent
     ============================================================ */

  /* Core neutrals (deep space / obsidian) */
  --sb-black:        #03060B;  /* Absolute black, page base */
  --sb-obsidian:     #080D16;  /* Panel base */
  --sb-ink:          #0E1522;  /* Elevated surface */
  --sb-slate-900:    #141C2E;  /* Card bg */
  --sb-slate-800:    #1C2540;  /* Input / divider bg */
  --sb-slate-700:    #2A3655;  /* Hairline border */
  --sb-slate-600:    #3B4A73;  /* Muted outline */
  --sb-slate-500:    #55678F;  /* Disabled text */
  --sb-slate-400:    #7C8BAE;  /* Secondary text */
  --sb-slate-300:    #A8B2CC;  /* Body text on dark */
  --sb-slate-200:    #D0D6E6;  /* Light caption */
  --sb-slate-100:    #E8EBF3;  /* Light text */
  --sb-white:        #F5F7FC;  /* Pure foreground on dark */

  /* BRAND — SmartBee Cyan (from existing logo) */
  --sb-cyan-50:      #E6F9FF;
  --sb-cyan-100:     #BEEFFF;
  --sb-cyan-200:     #7EE1FF;
  --sb-cyan-300:     #3CCFFF;
  --sb-cyan-400:     #00BDEF;  /* ← logo core */
  --sb-cyan-500:     #00A6D4;  /* Primary */
  --sb-cyan-600:     #0088B2;
  --sb-cyan-700:     #006A8C;
  --sb-cyan-800:     #004B63;
  --sb-cyan-900:     #00303F;

  /* BRAND — Hive Amber (bee / honey) */
  --sb-amber-50:     #FFF7E0;
  --sb-amber-100:    #FFEBAD;
  --sb-amber-200:    #FFDA6E;
  --sb-amber-300:    #FFC837;
  --sb-amber-400:    #FFB400;  /* ← bee core */
  --sb-amber-500:    #E29700;
  --sb-amber-600:    #B97800;
  --sb-amber-700:    #8A5800;
  --sb-amber-800:    #5C3A00;
  --sb-amber-900:    #2E1D00;

  /* Tactical / signal colors */
  --sb-lime:         #A8FF35;  /* Live data / green ops */
  --sb-lime-glow:    #6DFF00;
  --sb-magenta:      #FF3CAB;  /* Anomaly highlight */
  --sb-violet:       #7B5BFF;  /* AI model accent */
  --sb-red:          #FF4D5E;  /* Critical / breach */
  --sb-orange:       #FF8A3C;  /* Warn */

  /* Semantic — status */
  --sb-success:      #35E08A;
  --sb-warning:      var(--sb-amber-400);
  --sb-danger:       var(--sb-red);
  --sb-info:         var(--sb-cyan-400);

  /* Foreground tokens (dark mode is DEFAULT) */
  --fg-1:            var(--sb-white);     /* Primary text */
  --fg-2:            var(--sb-slate-300); /* Body text */
  --fg-3:            var(--sb-slate-400); /* Muted */
  --fg-4:            var(--sb-slate-500); /* Disabled */
  --fg-brand:        var(--sb-cyan-400);
  --fg-accent:       var(--sb-amber-400);
  --fg-inverse:      var(--sb-black);

  /* Background tokens */
  --bg-0:            var(--sb-black);
  --bg-1:            var(--sb-obsidian);
  --bg-2:            var(--sb-ink);
  --bg-3:            var(--sb-slate-900);
  --bg-4:            var(--sb-slate-800);
  --bg-glass:        rgba(14, 21, 34, 0.55);
  --bg-glass-strong: rgba(14, 21, 34, 0.78);

  /* Borders */
  --border-hairline: rgba(124, 139, 174, 0.14);
  --border-1:        rgba(124, 139, 174, 0.22);
  --border-2:        rgba(0, 189, 239, 0.28);     /* cyan hairline */
  --border-strong:   rgba(0, 189, 239, 0.55);
  --border-amber:    rgba(255, 180, 0, 0.45);

  /* Gradients & glows */
  --grad-cyber:      linear-gradient(135deg, #00BDEF 0%, #7B5BFF 100%);
  --grad-hive:       linear-gradient(135deg, #00BDEF 0%, #FFB400 100%);
  --grad-scan:       linear-gradient(180deg, rgba(0,189,239,0) 0%, rgba(0,189,239,0.14) 50%, rgba(0,189,239,0) 100%);
  --grad-vignette:   radial-gradient(ellipse at center, rgba(0,189,239,0.10) 0%, rgba(3,6,11,0) 65%);
  --grad-mesh:       radial-gradient(at 18% 20%, rgba(0,189,239,0.22) 0px, transparent 45%),
                     radial-gradient(at 82% 30%, rgba(123,91,255,0.18) 0px, transparent 50%),
                     radial-gradient(at 60% 85%, rgba(255,180,0,0.12) 0px, transparent 55%);

  --glow-cyan-sm:    0 0 12px rgba(0, 189, 239, 0.35);
  --glow-cyan-md:    0 0 24px rgba(0, 189, 239, 0.45), 0 0 2px rgba(0, 189, 239, 0.9);
  --glow-cyan-lg:    0 0 60px rgba(0, 189, 239, 0.35), 0 0 16px rgba(0, 189, 239, 0.55);
  --glow-amber-md:   0 0 24px rgba(255, 180, 0, 0.45), 0 0 2px rgba(255, 180, 0, 0.9);
  --glow-violet-md:  0 0 24px rgba(123, 91, 255, 0.45);

  /* Shadows (layered, subtle — the glow does the work) */
  --shadow-xs:       0 1px 0 rgba(0,0,0,0.4);
  --shadow-sm:       0 2px 6px rgba(0,0,0,0.35);
  --shadow-md:       0 12px 32px rgba(0,0,0,0.45), 0 2px 4px rgba(0,0,0,0.25);
  --shadow-lg:       0 24px 60px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.3);
  --shadow-inset:    inset 0 1px 0 rgba(255,255,255,0.04), inset 0 0 0 1px rgba(124,139,174,0.08);

  /* ============================================================
     TYPOGRAPHY
     Display: Space Grotesk (geometric, wide, techy)
     UI + Body: Inter (inherited from original site)
     Mono / Data / HUD: JetBrains Mono
     ============================================================ */

  --font-display:   "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-body:      "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-mono:      "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale — fluid-ish but with explicit px for consistency */
  --fs-display-xl:  clamp(56px, 7vw, 104px);  /* Hero */
  --fs-display-lg:  clamp(44px, 5.2vw, 72px);
  --fs-display-md:  clamp(36px, 4vw, 56px);
  --fs-h1:          40px;
  --fs-h2:          32px;
  --fs-h3:          24px;
  --fs-h4:          20px;
  --fs-h5:          16px;
  --fs-body-lg:     18px;
  --fs-body:        15px;
  --fs-body-sm:     13px;
  --fs-caption:     12px;
  --fs-micro:       11px;   /* HUD labels / kickers */

  /* Line heights */
  --lh-tight:       1.04;
  --lh-snug:        1.15;
  --lh-normal:      1.45;
  --lh-relaxed:     1.6;

  /* Weights */
  --fw-light:       300;
  --fw-regular:     400;
  --fw-medium:      500;
  --fw-semi:        600;
  --fw-bold:        700;
  --fw-black:       800;

  /* Letter spacing */
  --ls-display:     -0.02em;
  --ls-tight:       -0.01em;
  --ls-normal:      0;
  --ls-wide:        0.04em;
  --ls-kicker:      0.18em;  /* ALL-CAPS HUD kickers */

  /* ============================================================
     SPACING / RADII / MOTION
     ============================================================ */
  --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;
  --sp-24: 96px;
  --sp-32: 128px;

  --radius-xs:  2px;
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  20px;
  --radius-pill: 999px;

  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-snap:  cubic-bezier(0.2, 0.9, 0.3, 1.4);

  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 520ms;
  --dur-5: 800ms;
}

/* ============================================================
   SEMANTIC ELEMENT DEFAULTS
   ============================================================ */
html, body {
  background: var(--bg-0);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--fg-1);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-snug);
  font-weight: var(--fw-semi);
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); font-weight: var(--fw-bold); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); font-weight: var(--fw-semi); line-height: var(--lh-tight); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); text-transform: uppercase; letter-spacing: var(--ls-wide); font-family: var(--font-mono); font-weight: var(--fw-medium); }
h6 { font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: var(--ls-kicker); font-family: var(--font-mono); color: var(--fg-brand); }

p  { color: var(--fg-2); font-size: var(--fs-body); line-height: var(--lh-relaxed); margin: 0 0 var(--sp-4); text-wrap: pretty; }
small, .caption { font-size: var(--fs-caption); color: var(--fg-3); }
code, kbd, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  letter-spacing: 0;
}
code {
  background: var(--bg-3);
  border: 1px solid var(--border-hairline);
  color: var(--sb-cyan-300);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

/* Display / hero */
.display-xl { font-family: var(--font-display); font-size: var(--fs-display-xl); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: var(--ls-display); }
.display-lg { font-family: var(--font-display); font-size: var(--fs-display-lg); font-weight: var(--fw-semi); line-height: var(--lh-tight); letter-spacing: var(--ls-display); }
.display-md { font-family: var(--font-display); font-size: var(--fs-display-md); font-weight: var(--fw-semi); line-height: var(--lh-snug);  letter-spacing: var(--ls-tight); }

/* HUD kicker — small-caps monospace tag used throughout the brand */
.kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--fg-brand);
  font-weight: var(--fw-medium);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.kicker::before {
  content: "";
  width: 18px; height: 1px;
  background: currentColor;
  display: inline-block;
  opacity: 0.7;
}

/* Links */
a {
  color: var(--fg-brand);
  text-decoration: none;
  transition: color var(--dur-2) var(--ease-out);
}
a:hover { color: var(--sb-cyan-300); }

/* Selection */
::selection { background: var(--sb-cyan-400); color: var(--sb-black); }