/* =========================================================
   2BeAware — Foundations (Colors & Type)
   Theme: Cyber Retro Terminal — Navy Dark
   ========================================================= */

/* ---------- Fonts ---------------------------------------- */
@font-face { font-family:"Poppins"; font-style:normal; font-weight:100;
  src:url("fonts/Poppins-Thin.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"Poppins"; font-style:italic; font-weight:100;
  src:url("fonts/Poppins-ThinItalic.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"Poppins"; font-style:normal; font-weight:300;
  src:url("fonts/Poppins-Light.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"Poppins"; font-style:italic; font-weight:300;
  src:url("fonts/Poppins-LightItalic.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"Poppins"; font-style:normal; font-weight:400;
  src:url("fonts/Poppins-Regular.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"Poppins"; font-style:italic; font-weight:400;
  src:url("fonts/Poppins-Italic.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"Poppins"; font-style:normal; font-weight:500;
  src:url("fonts/Poppins-Medium.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"Poppins"; font-style:italic; font-weight:500;
  src:url("fonts/Poppins-MediumItalic.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"Poppins"; font-style:normal; font-weight:600;
  src:url("fonts/Poppins-Bold.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"Poppins"; font-style:italic; font-weight:600;
  src:url("fonts/Poppins-SemiBoldItalic.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"Poppins"; font-style:normal; font-weight:700;
  src:url("fonts/Poppins-Bold.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"Poppins"; font-style:italic; font-weight:700;
  src:url("fonts/Poppins-BoldItalic.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"Poppins"; font-style:italic; font-weight:800;
  src:url("fonts/Poppins-ExtraBoldItalic.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"Poppins"; font-style:normal; font-weight:900;
  src:url("fonts/Poppins-Black.ttf") format("truetype"); font-display:swap; }

/* =========================================================
   Design Tokens
   ========================================================= */
:root {

  /* ── Brand palette (unchanged — sampled from logo) ──── */
  --brand-cyan-100: #E4F8FE;
  --brand-cyan-200: #B7ECF8;
  --brand-cyan-300: #7EDDF2;
  --brand-cyan-400: #3DD3F0;
  --brand-cyan-500: #1FB6E0;
  --brand-cyan-600: #0E8FBF;
  --brand-cyan-700: #0A6E94;

  --brand-navy-100: #DCE3F5;
  --brand-navy-200: #A8B5DC;
  --brand-navy-300: #5A6EAD;
  --brand-navy-400: #2B3F86;
  --brand-navy-500: #15276A;
  --brand-navy-600: #0E1C52;
  --brand-navy-700: #0B1A4A;
  --brand-navy-800: #060F30;
  --brand-navy-900: #030717;

  /* ── Dark Navy Backgrounds ────────────────────────────── */
  --bg:              #0C1A2E;   /* main page background        */
  --bg-soft:         #09172A;   /* alt section background      */
  --bg-elev:         #112238;   /* elevated: cards, panels     */
  --bg-panel:        #112238;   /* panel background            */
  --bg-panel-alt:    #162C47;   /* hover state for panels      */
  --bg-overlay:      #09172A;   /* dark section overlay        */
  --bg-terminal:     #07111F;   /* terminal chrome / topbar    */
  --bg-ink:          #07111F;   /* footer bg                   */
  --bg-ink-soft:     #0D1628;   /* footer secondary            */

  --white: #FFFFFF;

  /* ── Text — light on dark ─────────────────────────────── */
  --ink-900:          #E8F2FC;
  --ink-800:          #D8E6F2;   /* primary text               */
  --ink-700:          #C4D4E8;
  --ink-600:          #8499BF;   /* secondary text             */
  --ink-500:          #5A7099;   /* tertiary / captions        */
  --ink-400:          #3E5470;
  --ink-on-dark:      #D8E6F2;   /* primary on dark            */
  --ink-on-dark-soft: #8499BF;   /* secondary on dark          */

  /* ── Terminal accent colors ───────────────────────────── */
  --terminal-green:       #39FF8A;
  --terminal-green-dim:   rgba(57, 255, 138, 0.65);
  --terminal-green-glow:  rgba(57, 255, 138, 0.12);
  --terminal-amber:       #F5A623;
  --terminal-amber-dim:   rgba(245, 166, 35, 0.60);

  /* ── Semantic state ───────────────────────────────────── */
  --success:    #39FF8A;
  --success-bg: rgba(57, 255, 138, 0.10);
  --warn:       #F5A623;
  --warn-bg:    rgba(245, 166, 35, 0.10);
  --danger:     #FF4E4E;
  --danger-bg:  rgba(255, 78, 78, 0.10);
  --info:       var(--brand-cyan-500);
  --info-bg:    rgba(31, 182, 224, 0.10);

  /* ── Foreground aliases ───────────────────────────────── */
  --fg1: var(--ink-800);
  --fg2: var(--ink-600);
  --fg3: var(--ink-500);
  --fg-on-dark: var(--ink-on-dark);
  --accent: var(--brand-cyan-500);
  --accent-strong: var(--brand-cyan-400);

  /* ── Borders ──────────────────────────────────────────── */
  --border-100:       rgba(31, 182, 224, 0.08);
  --border-200:       rgba(31, 182, 224, 0.15);
  --border-300:       rgba(31, 182, 224, 0.22);
  --border-strong:    rgba(31, 182, 224, 0.50);
  --border-panel:     rgba(255, 255, 255, 0.055);
  --border-terminal:  1px solid rgba(31, 182, 224, 0.22);

  /* ── Typography families ──────────────────────────────── */
  --font-display:  "Poppins", "Helvetica Neue", system-ui, sans-serif;
  --font-body:     "Poppins", "Helvetica Neue", system-ui, sans-serif;
  --font-mono:     "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
  --font-terminal: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  /* ── Type scale ───────────────────────────────────────── */
  --fs-display:  clamp(48px, 6vw, 88px);
  --fs-h1:       clamp(36px, 4vw, 56px);
  --fs-h2:       clamp(28px, 3vw, 40px);
  --fs-h3:       clamp(22px, 2vw, 28px);
  --fs-h4:       20px;
  --fs-eyebrow:  12px;
  --fs-body-lg:  18px;
  --fs-body:     16px;
  --fs-small:    14px;
  --fs-caption:  12px;

  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-normal: 1.5;
  --lh-loose:  1.7;

  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-caps:    0.10em;

  /* ── Spacing ──────────────────────────────────────────── */
  --space-1:   4px;   --space-2:   8px;   --space-3:  12px;
  --space-4:  16px;   --space-5:  24px;   --space-6:  32px;
  --space-7:  48px;   --space-8:  64px;   --space-9:  96px;
  --space-10: 128px;

  /* ── Radii ────────────────────────────────────────────── */
  --radius-xs:   3px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  /* ── Borders width ────────────────────────────────────── */
  --bw-1: 1px; --bw-2: 2px; --bw-3: 3px;

  /* ── Shadows ──────────────────────────────────────────── */
  --shadow-xs:    0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-sm:    0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-md:    0 10px 30px -8px rgba(0, 0, 0, 0.50);
  --shadow-lg:    0 24px 60px -20px rgba(0, 0, 0, 0.60);
  --shadow-panel: 0 4px 32px rgba(0, 0, 0, 0.45), 0 1px 4px rgba(0, 0, 0, 0.30);
  --shadow-inner: inset 0 0 0 1px rgba(31, 182, 224, 0.08);
  --shadow-cyan:  0 0 28px rgba(31, 182, 224, 0.28), 0 0 8px rgba(31, 182, 224, 0.16);
  --glow-cyan:    0 0 28px rgba(31, 182, 224, 0.28), 0 0 8px rgba(31, 182, 224, 0.16);
  --glow-green:   0 0 16px rgba(57, 255, 138, 0.30);

  /* ── Gradients ────────────────────────────────────────── */
  --grad-brand:    linear-gradient(135deg, #3DD3F0 0%, #1FB6E0 50%, #15276A 100%);
  --grad-cyan:     linear-gradient(135deg, #7EDDF2 0%, #1FB6E0 100%);
  --grad-navy:     linear-gradient(160deg, #0C1A2E 0%, #07111F 100%);
  --grad-hero-bg:  #0C1A2E;
  --grad-shield:   linear-gradient(180deg, #3DD3F0 0%, #15276A 100%);

  /* ── Motion ───────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    140ms;
  --dur-base:    220ms;
  --dur-slow:    420ms;
}

/* =========================================================
   Animations
   ========================================================= */
@keyframes blink    { 0%,100%{opacity:1} 50%{opacity:0} }
@keyframes pulse-dot{ 0%,100%{opacity:1;box-shadow:0 0 8px var(--terminal-green)}50%{opacity:.5;box-shadow:none} }
@keyframes fade-up  { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* =========================================================
   Base reset
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg1);
  background: var(--bg);
  background-image: radial-gradient(rgba(31, 182, 224, 0.055) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border-200); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--brand-cyan-600); }
::selection { background: rgba(31, 182, 224, 0.28); color: var(--ink-800); }

/* =========================================================
   Semantic typography
   ========================================================= */
h1, .h1 {
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--fs-h1); line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight); color: var(--ink-800);
  margin: 0 0 var(--space-4);
}
h2, .h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-h2); line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight); color: var(--ink-800);
  margin: 0 0 var(--space-4);
}
h3, .h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-h3); line-height: var(--lh-snug);
  color: var(--ink-800); margin: 0 0 var(--space-3);
}
h4, .h4 {
  font-family: var(--font-body); font-weight: 600;
  font-size: var(--fs-h4); line-height: var(--lh-snug);
  color: var(--ink-800); margin: 0 0 var(--space-2);
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-terminal); font-weight: 700;
  font-size: var(--fs-eyebrow); text-transform: uppercase;
  letter-spacing: var(--tracking-caps); color: var(--brand-cyan-500);
  margin: 0 0 var(--space-3);
}
.eyebrow::before { content: '>'; color: var(--brand-cyan-400); }

.lead {
  font-family: var(--font-body); font-size: var(--fs-body-lg);
  line-height: var(--lh-loose); color: var(--fg2);
}

p { margin: 0 0 var(--space-4); color: var(--fg1); line-height: var(--lh-loose); }
small, .caption { font-size: var(--fs-caption); color: var(--fg3); }

code, pre, .mono {
  font-family: var(--font-mono); font-size: 0.93em;
}

a {
  color: var(--brand-cyan-500); text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--brand-cyan-300); }