/* ==========================================================================
   Medusa Creative Studio — Core Tokens
   Deep-ocean dark-first palette • jellyfish luminescence • soft radii
   ========================================================================== */

/* ---------- Fonts (Google Font fallbacks — see README for substitutions) --- */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@300;400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ============================================================
     COLOR SYSTEM — Deep Ocean
     The site's universe is underwater. Near-black navy as the void,
     jellyfish cyan + iris violet + bioluminescent mint as life.
     ============================================================ */

  /* Backgrounds — darkest to lightest */
  --bg-void:      #030617;  /* body / deepest */
  --bg-trench:    #070b22;  /* section alt */
  --bg-abyss:     #0c1230;  /* elevated surfaces */
  --bg-current:   #141a3d;  /* cards, wells */
  --bg-shallow:   #1e2654;  /* borders, dividers-as-fills */

  /* Foregrounds */
  --fg-1: #f5f8ff;  /* primary text on dark */
  --fg-2: #c7cee6;  /* secondary */
  --fg-3: #8891b5;  /* tertiary / meta */
  --fg-4: #5b6389;  /* quaternary / placeholders */
  --fg-5: #363d63;  /* nearly disabled */

  /* Borders */
  --border-hairline:  rgba(255, 255, 255, 0.06);
  --border-soft:      rgba(255, 255, 255, 0.10);
  --border-strong:    rgba(255, 255, 255, 0.18);

  /* Brand — the three jellyfish lights */
  --cyan-100: #e4f7ff;
  --cyan-200: #bfeaff;
  --cyan-300: #8ed7ff;
  --cyan-400: #4ac3ff;  /* primary brand */
  --cyan-500: #1aa8ff;
  --cyan-600: #0085d6;
  --cyan-700: #00649f;

  --iris-100: #ece8ff;
  --iris-200: #d4ccff;
  --iris-300: #b0a3ff;
  --iris-400: #8a7cff;  /* secondary brand */
  --iris-500: #6b5cf0;
  --iris-600: #4e3fcc;
  --iris-700: #372a99;

  --mint-100: #d8fff6;
  --mint-200: #a8fce9;
  --mint-300: #6df2d6;
  --mint-400: #18e6c8;  /* accent — bioluminescent */
  --mint-500: #0ac4a7;
  --mint-600: #069080;

  /* Contrast / signal — bright pops for CTAs, pull-quote bgs, feature washes */
  --pop-electric:  #00c2ff;  /* electric cyan — the signal color */
  --pop-cobalt:    #0057ff;
  --pop-ice:       #7df9ff;
  --pop-deep-blue: #2540c8;
  --pop-surface:   #e4f7ff;

  /* Semantic */
  --color-bg:         var(--bg-void);
  --color-surface:    var(--bg-abyss);
  --color-surface-2:  var(--bg-current);
  --color-fg:         var(--fg-1);
  --color-muted:      var(--fg-3);
  --color-primary:    var(--cyan-400);
  --color-secondary:  var(--iris-400);
  --color-accent:     var(--mint-400);
  --color-link:       var(--cyan-300);
  --color-link-hover: var(--cyan-100);

  --color-success: #3adf8f;
  --color-warning: #ffc34a;
  --color-danger:  #ff5c7a;

  /* Brand gradients — used for glows, headings, auras */
  --grad-aurora:   linear-gradient(135deg, #4ac3ff 0%, #8a7cff 55%, #18e6c8 100%);
  --grad-deepsea:  linear-gradient(180deg, #030617 0%, #0c1230 60%, #141a3d 100%);
  --grad-signal:   linear-gradient(120deg, #00c2ff 0%, #0057ff 70%, #8a7cff 130%);
  --grad-bloom:    radial-gradient(60% 60% at 50% 40%, rgba(74,195,255,0.55) 0%, rgba(138,124,255,0.25) 45%, transparent 75%);
  --grad-caustic:  conic-gradient(from 90deg at 50% 50%, rgba(74,195,255,0.2), rgba(138,124,255,0.1), rgba(24,230,200,0.18), rgba(74,195,255,0.2));

  /* ============================================================
     TYPOGRAPHY
     - Display: Barlow Condensed (condensed sans) — matches wordmark
     - Body:    Inter — neutral, highly legible, great SR-Latin
     - Mono:    JetBrains Mono — technical accents
     ============================================================ */
  --font-display: 'Barlow Condensed', 'Oswald', 'Impact', sans-serif;
  --font-body:    'Inter', 'Helvetica Neue', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale (1.250 major-third, tuned) */
  --fs-xs:   0.75rem;   /* 12 */
  --fs-sm:   0.875rem;  /* 14 */
  --fs-base: 1rem;      /* 16 */
  --fs-md:   1.125rem;  /* 18 */
  --fs-lg:   1.375rem;  /* 22 */
  --fs-xl:   1.75rem;   /* 28 */
  --fs-2xl:  2.25rem;   /* 36 */
  --fs-3xl:  3rem;      /* 48 */
  --fs-4xl:  4rem;      /* 64 */
  --fs-5xl:  5.5rem;    /* 88 */
  --fs-6xl:  7.5rem;    /* 120 */
  --fs-display: clamp(3.5rem, 9vw, 8.5rem);

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

  /* Line-heights */
  --lh-tight:   0.92;
  --lh-display: 1.02;
  --lh-snug:    1.2;
  --lh-base:    1.55;
  --lh-relaxed: 1.7;

  /* Letter-spacing */
  --ls-tight:  -0.03em;
  --ls-display:-0.02em;
  --ls-base:    0;
  --ls-wide:    0.04em;
  --ls-kicker:  0.22em;  /* uppercase kickers */

  /* ============================================================
     SPACING — 4pt base
     ============================================================ */
  --s-0: 0;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;
  --s-32: 128px;
  --s-40: 160px;

  /* ============================================================
     RADII — soft, 8–16 personality
     ============================================================ */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-2xl: 28px;
  --r-pill: 999px;

  /* ============================================================
     SHADOWS + GLOWS — light doesn't work underwater the same way.
     We use inner luminance + outer bloom more than drop shadow.
     ============================================================ */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3), 0 0 0 1px var(--border-hairline);
  --shadow-md: 0 8px 24px rgba(3,6,23,0.55), 0 0 0 1px var(--border-soft);
  --shadow-lg: 0 24px 60px rgba(3,6,23,0.7), 0 0 0 1px var(--border-soft);

  --glow-cyan:  0 0 40px rgba(74,195,255,0.35), 0 0 80px rgba(74,195,255,0.15);
  --glow-iris:  0 0 40px rgba(138,124,255,0.4),  0 0 80px rgba(138,124,255,0.18);
  --glow-mint:  0 0 40px rgba(24,230,200,0.35),  0 0 80px rgba(24,230,200,0.15);

  --inset-top:    inset 0 1px 0 rgba(255,255,255,0.08);
  --inset-glow:   inset 0 0 60px rgba(74,195,255,0.08);

  /* ============================================================
     MOTION — animation-intensity: 10. Long, gliding, never abrupt.
     ============================================================ */
  --ease-glide:  cubic-bezier(0.22, 1, 0.36, 1);   /* primary — easeOutQuint */
  --ease-drift:  cubic-bezier(0.6, 0.01, 0.4, 1);  /* lateral floats */
  --ease-pulse:  cubic-bezier(0.4, 0, 0.6, 1);     /* bioluminescent pulses */
  --ease-bounce: cubic-bezier(0.68, -0.3, 0.32, 1.4);

  --dur-instant: 120ms;
  --dur-quick:   240ms;
  --dur-base:    480ms;
  --dur-slow:    800ms;
  --dur-glide:   1200ms;
  --dur-drift:   6000ms;   /* ambient jellyfish float */
  --dur-pulse:   3200ms;   /* bioluminescent breathing */

  /* ============================================================
     Z-INDEX
     ============================================================ */
  --z-caustics: 1;
  --z-content:  10;
  --z-overlay:  100;
  --z-modal:    1000;
  --z-toast:    2000;
}

/* ==========================================================================
   SEMANTIC ELEMENT STYLES
   ========================================================================== */
html, body {
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display);
  color: var(--color-fg);
  text-wrap: balance;
}

h1 { font-size: var(--fs-display); font-weight: var(--fw-light); line-height: var(--lh-tight); }
h2 { font-size: clamp(2.5rem, 5vw, var(--fs-4xl)); font-weight: var(--fw-light); }
h3 { font-size: var(--fs-2xl); font-weight: var(--fw-regular); }
h4 { font-size: var(--fs-xl); font-weight: var(--fw-medium); }

p {
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  text-wrap: pretty;
  max-width: 62ch;
}

small, .kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-kicker);
  color: var(--fg-3);
  font-weight: var(--fw-medium);
}

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

a {
  color: var(--color-link);
  text-decoration: none;
  transition: color var(--dur-quick) var(--ease-glide);
}
a:hover { color: var(--color-link-hover); }

hr {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-strong), transparent);
  margin: var(--s-10) 0;
}

::selection {
  background: var(--iris-400);
  color: var(--fg-1);
}

/* Utility reset for the display faces — use for hero titles */
.display {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  text-transform: lowercase;
}

/* Gradient text — jellyfish aurora */
.text-aurora {
  background: var(--grad-aurora);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Ambient grain overlay (attach to body::after if you want) */
.noise {
  position: relative;
}
.noise::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.9  0 0 0 0 0.92  0 0 0 0 1  0 0 0 0.18 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.5;
  mix-blend-mode: overlay;
  z-index: var(--z-overlay);
}

/* Dot grid texture */
.dotgrid {
  background-image: radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* Soft button defaults */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--dur-quick) var(--ease-glide),
              box-shadow var(--dur-base) var(--ease-glide),
              background var(--dur-quick) var(--ease-glide),
              color var(--dur-quick) var(--ease-glide);
}
.btn-primary {
  background: var(--cyan-400);
  color: var(--bg-void);
  box-shadow: var(--glow-cyan);
}
.btn-primary:hover { background: var(--cyan-300); box-shadow: 0 0 60px rgba(74,195,255,0.6); }
.btn-primary:active { transform: translateY(1px) scale(0.99); }

.btn-ghost {
  background: transparent;
  color: var(--fg-1);
  border-color: var(--border-strong);
}
.btn-ghost:hover { background: rgba(255,255,255,0.04); border-color: var(--cyan-400); color: var(--cyan-200); }