/* ============================================================
   OCTOCLOAK · Design Tokens
   Dark-first. Camouflage / advanced tech / hacking aesthetic.
   ============================================================ */

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

:root {
  /* ---------- BRAND CORE (from logo gradient) ---------- */
  --oc-violet-50:  #F2EBFF;
  --oc-violet-100: #DCC9FF;
  --oc-violet-200: #B89AFF;
  --oc-violet-300: #9166FF;
  --oc-violet-400: #6E37FF;   /* primary action */
  --oc-violet-500: #5712F0;   /* brand violet */
  --oc-violet-600: #3D08C2;
  --oc-violet-700: #2A0596;
  --oc-violet-800: #1A0470;
  --oc-violet-900: #0E0247;

  --oc-magenta:    #B14BFF;   /* eye-glow accent */
  --oc-cyan:       #5BE9FF;   /* terminal / data accent */
  --oc-success:    #2BD67B;
  --oc-warn:       #FFB547;
  --oc-danger:     #FF5470;

  /* ---------- INK / SURFACES (dark theme) ---------- */
  --oc-ink-0:   #000000;        /* deepest black, used in logo bg */
  --oc-ink-1:   #06040D;        /* page bg */
  --oc-ink-2:   #0B0817;        /* surface */
  --oc-ink-3:   #110D24;        /* elevated surface */
  --oc-ink-4:   #1A1433;        /* card */
  --oc-ink-5:   #241C45;        /* hover */
  --oc-ink-6:   #322758;        /* border-strong */

  --oc-line-1:  rgba(255,255,255,0.06);
  --oc-line-2:  rgba(255,255,255,0.10);
  --oc-line-3:  rgba(145, 102, 255, 0.22);   /* violet hairline */

  /* ---------- TEXT ---------- */
  --oc-fg-1: #F4F1FF;     /* primary text */
  --oc-fg-2: #B9B0D9;     /* secondary text */
  --oc-fg-3: #7B709E;     /* tertiary / meta */
  --oc-fg-4: #4A4170;     /* disabled */
  --oc-fg-onviolet: #FFFFFF;

  /* ---------- SEMANTIC ---------- */
  --oc-bg:          var(--oc-ink-1);
  --oc-bg-elevated: var(--oc-ink-3);
  --oc-card:        var(--oc-ink-4);
  --oc-card-hover:  var(--oc-ink-5);
  --oc-border:      var(--oc-line-2);
  --oc-border-strong: var(--oc-ink-6);
  --oc-accent:      var(--oc-violet-400);
  --oc-accent-hover: var(--oc-violet-300);

  /* ---------- GRADIENTS (signature) ---------- */
  --oc-grad-brand:    linear-gradient(135deg, #2A0596 0%, #5712F0 45%, #B14BFF 100%);
  --oc-grad-brand-h:  linear-gradient(90deg, #FFFFFF 0%, #DCC9FF 35%, #6E37FF 70%, #2A0596 100%);
  --oc-grad-stealth:  radial-gradient(ellipse at 50% 0%, rgba(110,55,255,0.25) 0%, rgba(110,55,255,0) 60%), linear-gradient(180deg, #06040D 0%, #000000 100%);
  --oc-grad-glow:     radial-gradient(circle at 50% 50%, rgba(177,75,255,0.45) 0%, rgba(110,55,255,0.15) 35%, rgba(0,0,0,0) 70%);
  --oc-grad-camouflage: repeating-linear-gradient(135deg, rgba(110,55,255,0.04) 0px, rgba(110,55,255,0.04) 2px, transparent 2px, transparent 6px);

  /* ---------- SHADOW / GLOW ---------- */
  --oc-shadow-1: 0 1px 2px rgba(0,0,0,0.6);
  --oc-shadow-2: 0 8px 24px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.04) inset;
  --oc-shadow-3: 0 24px 60px rgba(0,0,0,0.7), 0 1px 0 rgba(255,255,255,0.05) inset;
  --oc-glow-violet: 0 0 0 1px rgba(110,55,255,0.5), 0 0 24px rgba(110,55,255,0.45), 0 0 64px rgba(110,55,255,0.25);
  --oc-glow-magenta: 0 0 24px rgba(177,75,255,0.55), 0 0 64px rgba(177,75,255,0.25);
  --oc-glow-cyan: 0 0 16px rgba(91,233,255,0.45);

  /* ---------- RADIUS ---------- */
  --oc-r-xs: 4px;
  --oc-r-sm: 6px;
  --oc-r-md: 10px;
  --oc-r-lg: 14px;
  --oc-r-xl: 20px;
  --oc-r-2xl: 28px;
  --oc-r-pill: 999px;

  /* ---------- SPACING (4-pt) ---------- */
  --oc-s-1: 4px;
  --oc-s-2: 8px;
  --oc-s-3: 12px;
  --oc-s-4: 16px;
  --oc-s-5: 24px;
  --oc-s-6: 32px;
  --oc-s-7: 48px;
  --oc-s-8: 64px;
  --oc-s-9: 96px;

  /* ---------- TYPE ---------- */
  --oc-font-display: "Manrope", "Inter", system-ui, sans-serif;
  --oc-font-body:    "Space Grotesk", "Inter", system-ui, sans-serif;
  --oc-font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---------- MOTION ---------- */
  --oc-ease:         cubic-bezier(0.22, 1, 0.36, 1);
  --oc-ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --oc-dur-1: 120ms;
  --oc-dur-2: 200ms;
  --oc-dur-3: 360ms;
  --oc-dur-4: 600ms;
}

/* ============================================================
   BASE
   ============================================================ */
html, body {
  background: var(--oc-bg);
  color: var(--oc-fg-1);
  font-family: var(--oc-font-body);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   TYPOGRAPHY SCALE
   Display: Manrope 700–800 — used for h1–h2, hero
   Body:    Space Grotesk 400–500 — paragraphs
   Mono:    JetBrains Mono — code / labels / tags
   ============================================================ */
.oc-eyebrow,
.oc-h1, .oc-h2, .oc-h3, .oc-h4 {
  font-family: var(--oc-font-display);
  color: var(--oc-fg-1);
  letter-spacing: -0.02em;
}

.oc-display {
  font-family: var(--oc-font-display);
  font-weight: 800;
  font-size: clamp(48px, 7vw, 96px);
  line-height: 0.95;
  letter-spacing: -0.035em;
}

.oc-h1 { font-weight: 800; font-size: 56px; line-height: 1.05; letter-spacing: -0.03em; }
.oc-h2 { font-weight: 700; font-size: 40px; line-height: 1.1;  letter-spacing: -0.025em; }
.oc-h3 { font-weight: 700; font-size: 28px; line-height: 1.2;  letter-spacing: -0.02em; }
.oc-h4 { font-weight: 600; font-size: 20px; line-height: 1.3;  letter-spacing: -0.01em; }

.oc-body-lg { font-size: 18px; line-height: 1.55; color: var(--oc-fg-2); font-weight: 400; }
.oc-body    { font-size: 16px; line-height: 1.55; color: var(--oc-fg-2); font-weight: 400; }
.oc-body-sm { font-size: 14px; line-height: 1.5;  color: var(--oc-fg-2); font-weight: 400; }
.oc-caption { font-size: 12px; line-height: 1.4;  color: var(--oc-fg-3); font-weight: 500; }

.oc-eyebrow {
  font-family: var(--oc-font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--oc-violet-300);
}

.oc-mono   { font-family: var(--oc-font-mono); font-size: 13px; color: var(--oc-fg-2); }

/* Signature: split-uppercase title ("octo" ghosted, "CLOAK" solid) */
.oc-split-title {
  font-family: var(--oc-font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.oc-split-title .ghost {
  color: transparent;
  -webkit-text-stroke: 1px rgba(244, 241, 255, 0.18);
}
.oc-split-title .solid {
  background: var(--oc-grad-brand-h);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Gradient text utility */
.oc-grad-text {
  background: var(--oc-grad-brand-h);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}