/* ============================================================
   Prince Channer Design System — Colors & Type
   Dark, glassmorphic, multi-accent — mirrors zsaehybo.gensparkclaw.com
   with warmer first-person voice from princes-ux-portfolio.webflow.io
   ============================================================ */

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

:root {
  /* ---------- Color: Surfaces (dark slate) ---------- */
  --ink:           #020617;          /* deepest — page bg */
  --night:         #0f172a;          /* card / panel base */
  --night-2:       #1e293b;          /* lifted card */
  --night-3:       #334155;          /* hover / borders strong */
  --rule:          rgba(148,163,184,0.18);   /* hairline border */
  --rule-strong:   rgba(148,163,184,0.32);

  /* ---------- Color: Text on dark ---------- */
  --fg1:           #f1f5f9;          /* slate-100 — primary */
  --fg2:           #cbd5e1;          /* slate-300 — body */
  --fg3:           #94a3b8;          /* slate-400 — meta */
  --fg4:           #64748b;          /* slate-500 — disabled */

  /* ---------- Color: Accent palette (four-way) ---------- */
  --cyan:          #22d3ee;
  --cyan-soft:     #67e8f9;
  --cyan-ink:      #0e7490;
  --violet:        #a78bfa;
  --violet-soft:   #c4b5fd;
  --violet-ink:    #6d28d9;
  --emerald:       #34d399;
  --emerald-soft:  #6ee7b7;
  --emerald-ink:   #047857;
  --amber:         #fbbf24;
  --amber-soft:    #fcd34d;
  --amber-ink:     #b45309;

  /* ---------- Primary alias (VIOLET-LED system) ---------- */
  --primary:       var(--violet);          /* default primary across all components */
  --primary-soft:  var(--violet-soft);
  --primary-deep:  var(--violet-ink);

  /* ---------- Semantic accent roles ---------- */
  --accent-federal: var(--violet);   /* Federal AI/ML + cybersecurity */
  --accent-ux:      var(--cyan);     /* UX research */
  --accent-build:   var(--emerald);  /* TradeNav / side projects */
  --accent-honor:   var(--amber);    /* Military / Recognition / Curious */

  /* ---------- Gradient (used sparingly, signature moment) ---------- */
  --gradient-text: linear-gradient(90deg, #c4b5fd 0%, #a78bfa 35%, #67e8f9 70%, #34d399 100%);
  --gradient-stripe: linear-gradient(180deg, #a78bfa 0%, #67e8f9 50%, #34d399 100%);

  /* ---------- Color: Body radial glow (the signature backdrop, violet-led) ---------- */
  --bg-radial:
    radial-gradient(circle at 12% 8%,  rgba(167,139,250,.20), transparent 36rem),
    radial-gradient(circle at 88% 4%,  rgba(124,58,237,.18),  transparent 32rem),
    radial-gradient(circle at 50% 60%, rgba(196,181,253,.10), transparent 44rem),
    #0a0418;

  /* ---------- Glass card recipe ---------- */
  --glass-bg:      linear-gradient(180deg, rgba(15,23,42,.78), rgba(15,23,42,.48));
  --glass-border:  1px solid rgba(148,163,184,.18);
  --glass-blur:    blur(18px);

  /* ---------- Type families ---------- */
  --font-display:  'Space Grotesk', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-sans:     'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:     ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---------- Type scale (display) ---------- */
  --t-hero:    clamp(48px, 8vw, 128px);
  --t-h1:      clamp(40px, 6vw, 96px);
  --t-h2:      clamp(32px, 4.5vw, 64px);
  --t-h3:      28px;
  --t-h4:      20px;
  --t-body:    16px;
  --t-body-lg: 18px;
  --t-small:   14px;
  --t-micro:   12px;

  --lh-tight:  0.95;
  --lh-snug:   1.15;
  --lh-body:   1.7;
  --lh-loose:  1.85;

  /* ---------- Spacing (4px base, generous) ---------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  /* ---------- Radii (chunky, modern) ---------- */
  --r-1: 8px;   /* small */
  --r-2: 12px;  /* default */
  --r-3: 16px;  /* card-2xl */
  --r-4: 24px;  /* card-3xl */
  --r-5: 32px;  /* hero card */
  --r-pill: 999px;

  /* ---------- Glow shadows (the signature lift) ---------- */
  --glow-cyan:    0 0 60px rgba(34, 211, 238, 0.18);
  --glow-violet:  0 0 60px rgba(167, 139, 250, 0.18);
  --glow-emerald: 0 0 60px rgba(52, 211, 153, 0.18);
  --glow-amber:   0 0 60px rgba(251, 191, 36, 0.18);
  --shadow-card:  0 8px 24px rgba(0,0,0,0.30), 0 2px 8px rgba(0,0,0,0.18);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 150ms;
  --dur-med:  300ms;
  --dur-slow: 700ms;

  /* ---------- Grid background pattern ---------- */
  --grid-bg:
    linear-gradient(rgba(148,163,184,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,163,184,.08) 1px, transparent 1px);
  --grid-size: 42px 42px;
}

/* ============================================================
   Base + semantic type
   ============================================================ */

html, body {
  background: var(--bg-radial);
  color: var(--fg1);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  color-scheme: dark;
}
body { selection-background-color: var(--cyan-soft); }
::selection { background: var(--cyan-soft); color: var(--ink); }

.t-hero, h1.hero {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-hero);
  line-height: var(--lh-tight);
  letter-spacing: -0.06em;
  color: #fff;
}

.t-h1, h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-h1);
  line-height: 1.0;
  letter-spacing: -0.05em;
  color: #fff;
}

.t-h2, h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-h2);
  line-height: var(--lh-snug);
  letter-spacing: -0.04em;
  color: #fff;
}

.t-h3, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-h3);
  line-height: var(--lh-snug);
  letter-spacing: -0.02em;
  color: #fff;
}

.t-h4, h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--t-h4);
  line-height: var(--lh-snug);
  color: #fff;
}

.t-body, p {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--fg2);
}

.t-body-lg { font-size: var(--t-body-lg); line-height: var(--lh-body); color: var(--fg2); }
.t-small   { font-size: var(--t-small); line-height: var(--lh-body); color: var(--fg3); }
.t-micro   { font-size: var(--t-micro); line-height: var(--lh-snug); color: var(--fg3); }

/* Eyebrow — uppercase tracked colored label */
.t-eyebrow {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--cyan);
}
.t-eyebrow--violet  { color: var(--violet); }
.t-eyebrow--emerald { color: var(--emerald); }
.t-eyebrow--amber   { color: var(--amber); }

/* Gradient signature text — use on name / hero accents only */
.t-gradient {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Glass card recipe — applicable directly */
.glass {
  background: var(--glass-bg);
  border: var(--glass-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: var(--r-4);
}

/* Chip — small status / metadata pill */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--rule-strong);
  background: rgba(15,23,42,0.62);
  color: var(--fg2);
}

/* Reveal-on-scroll utility */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal.visible { opacity: 1; transform: translateY(0); }