/* =============================================================
   RickyPark Holdings — Core Tokens
   AI-native ecosystem · investor-facing · dark futuristic
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;600&family=Instrument+Serif:ital@0;1&display=swap');

/* Local brand font ---------------------------------------------------- */
@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/SpaceGrotesk-Light.ttf") format("truetype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/SpaceGrotesk-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/SpaceGrotesk-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/SpaceGrotesk-SemiBold.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/SpaceGrotesk-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* ---- Type families -------------------------------------------------- */
  --font-display: "Instrument Serif", "Times New Roman", serif;             /* editorial accents */
  --font-sans:    "Space Grotesk", ui-sans-serif, system-ui, sans-serif;    /* all UI + body */
  --font-mono:    "Geist Mono", ui-monospace, "JetBrains Mono", monospace;

  /* ---- Type scale ----------------------------------------------------- */
  --fs-eyebrow:   12px;   /* uppercase labels */
  --fs-micro:     13px;
  --fs-body:      16px;
  --fs-body-lg:   18px;
  --fs-lead:      21px;
  --fs-h4:        22px;
  --fs-h3:        30px;
  --fs-h2:        44px;
  --fs-h1:        64px;
  --fs-display:   96px;   /* cinematic hero */

  --lh-tight:     1.04;
  --lh-snug:      1.18;
  --lh-normal:    1.5;
  --lh-loose:     1.65;

  --tracking-wide: 0.14em;     /* eyebrows */
  --tracking-tight: -0.025em;  /* big display */
  --tracking-tighter: -0.04em; /* mega display */

  /* ---- Foundational palette (raw) ------------------------------------ */
  --ink-000: #FFFFFF;
  --ink-100: #F4F6FB;
  --ink-200: #D8DCE6;
  --ink-300: #9CA3B8;
  --ink-400: #6B7390;
  --ink-500: #565E76;
  --ink-600: #3A4159;
  --ink-700: #232A3F;
  --ink-800: #141828;
  --ink-900: #0B0D17;
  --ink-950: #06070C;
  --ink-999: #020308;

  /* electric primary — "signal cyan" */
  --cyan-100: #D6FBFF;
  --cyan-300: #9DF1FF;
  --cyan-400: #67E8F9;
  --cyan-500: #22D3EE;
  --cyan-600: #0FB5CC;

  /* violet — autonomous / web3 */
  --violet-300: #C4B5FD;
  --violet-400: #A78BFA;
  --violet-500: #8B5CF6;
  --violet-600: #7C3AED;

  /* warm editorial — used very sparingly (serif accents, premium hints) */
  --warm-300: #FCE2A8;
  --warm-400: #F5C572;
  --warm-500: #E0A552;

  /* signals */
  --sig-live:   #4ADE80;   /* Live / In Development */
  --sig-dev:    #60A5FA;   /* Under Development */
  --sig-proto:  #F59E0B;   /* Prototype */
  --sig-danger: #F87171;

  /* ---- Semantic surfaces --------------------------------------------- */
  --bg-base:       var(--ink-950);
  --bg-canvas:     var(--ink-999);
  --bg-raised:     #0E111E;
  --bg-sunken:     #04050A;

  /* glass — for cards layered above the neural background */
  --glass-1:       rgba(255, 255, 255, 0.025);
  --glass-2:       rgba(255, 255, 255, 0.045);
  --glass-3:       rgba(255, 255, 255, 0.07);
  --glass-hover:   rgba(255, 255, 255, 0.06);

  --border-soft:   rgba(255, 255, 255, 0.06);
  --border-default:rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.18);
  --border-accent: rgba(103, 232, 249, 0.35);

  /* ---- Semantic foreground ------------------------------------------- */
  --fg-1:  var(--ink-100);    /* primary text */
  --fg-2:  var(--ink-300);    /* secondary, body */
  --fg-3:  var(--ink-400);    /* tertiary, labels */
  --fg-4:  var(--ink-500);    /* quaternary, hints */
  --fg-onAccent: var(--ink-950);

  --accent:        var(--cyan-400);
  --accent-strong: var(--cyan-500);
  --accent-alt:    var(--violet-400);
  --accent-warm:   var(--warm-400);

  /* ---- Premium gradients --------------------------------------------- */
  --grad-aurora: linear-gradient(135deg, #67E8F9 0%, #A78BFA 55%, #F0ABFC 100%);
  --grad-plasma: radial-gradient(ellipse at 50% 0%, rgba(103,232,249,0.22) 0%, rgba(167,139,250,0.10) 35%, rgba(6,7,12,0) 70%);
  --grad-mesh:   radial-gradient(60% 80% at 20% 10%, rgba(103,232,249,0.18) 0%, transparent 60%),
                 radial-gradient(50% 70% at 90% 30%, rgba(167,139,250,0.22) 0%, transparent 65%),
                 radial-gradient(80% 60% at 50% 100%, rgba(34,211,238,0.10) 0%, transparent 70%);
  --grad-text:   linear-gradient(180deg, #FFFFFF 0%, #B9C2D9 100%);
  --grad-text-aurora: linear-gradient(110deg, #FFFFFF 0%, #9DF1FF 38%, #C4B5FD 68%, #FFFFFF 100%);
  --grad-card:   linear-gradient(160deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.015) 100%);
  --grad-divider: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);

  /* ---- Elevation & glow ---------------------------------------------- */
  --shadow-sm:   0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:   0 8px 24px rgba(0,0,0,0.35), 0 2px 4px rgba(0,0,0,0.4);
  --shadow-lg:   0 24px 60px rgba(0,0,0,0.55), 0 4px 12px rgba(0,0,0,0.45);
  --shadow-xl:   0 40px 100px rgba(0,0,0,0.70);

  --glow-cyan:   0 0 0 1px rgba(103,232,249,0.35), 0 0 40px rgba(34,211,238,0.25);
  --glow-violet: 0 0 0 1px rgba(167,139,250,0.30), 0 0 50px rgba(139,92,246,0.30);
  --glow-soft:   0 0 80px rgba(103,232,249,0.10);

  --inset-hairline: inset 0 1px 0 rgba(255,255,255,0.07);

  /* ---- Radii ---------------------------------------------------------- */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  20px;
  --r-2xl: 28px;
  --r-pill: 999px;

  /* ---- Spacing (4pt) -------------------------------------------------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 56px;
  --s-10: 72px;
  --s-11: 96px;
  --s-12: 128px;

  /* ---- Motion --------------------------------------------------------- */
  --ease-out-soft:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
  --ease-elastic:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:  140ms;
  --dur-base:  280ms;
  --dur-slow:  520ms;
  --dur-cine:  900ms;
}

/* =============================================================
   Semantic element styles
   ============================================================= */

html, body {
  background: var(--bg-base);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--fg-3);
}

.h1, h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 500;
  color: var(--fg-1);
}

.h2, h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 500;
  color: var(--fg-1);
}

.h3, h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: -0.018em;
  font-weight: 500;
  color: var(--fg-1);
}

.h4, h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  font-weight: 500;
  color: var(--fg-1);
}

.display {
  font-family: var(--font-sans);
  font-size: var(--fs-display);
  line-height: 1.0;
  letter-spacing: var(--tracking-tighter);
  font-weight: 500;
}

/* Editorial italic — used inside headlines for AI thesis moments */
.editorial {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-normal);
  color: var(--fg-2);
  font-weight: 400;
}

p, .body {
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--fg-2);
}

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

/* Aurora gradient text — for hero accent words */
.text-aurora {
  background: var(--grad-text-aurora);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.text-light {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}