/* ==========================================================================
   Play Money — Colors & Type
   The onramp to early-stage private markets.
   ========================================================================== */

/* ---------- Fonts ----------
 * Brand faces: Aeonik (display) + Duplet (body). Both are served from /fonts.
 * JetBrains Mono is our mono fallback (for tabular numbers) via Google Fonts.
 * ---------------------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

/* ---- Aeonik (display) ---- */
@font-face { font-family: 'Aeonik'; src: url('fonts/Aeonik-Thin.ttf') format('truetype');         font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: 'Aeonik'; src: url('fonts/Aeonik-ThinItalic.ttf') format('truetype');   font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: 'Aeonik'; src: url('fonts/Aeonik-Air.ttf') format('truetype');          font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'Aeonik'; src: url('fonts/Aeonik-AirItalic.ttf') format('truetype');    font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: 'Aeonik'; src: url('fonts/Aeonik-Light.ttf') format('truetype');        font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Aeonik'; src: url('fonts/Aeonik-LightItalic.ttf') format('truetype');  font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'Aeonik'; src: url('fonts/Aeonik-Regular.ttf') format('truetype');      font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Aeonik'; src: url('fonts/Aeonik-RegularItalic.ttf') format('truetype');font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Aeonik'; src: url('fonts/Aeonik-Medium.ttf') format('truetype');       font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Aeonik'; src: url('fonts/Aeonik-MediumItalic.ttf') format('truetype'); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'Aeonik'; src: url('fonts/Aeonik-Bold.ttf') format('truetype');         font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Aeonik'; src: url('fonts/Aeonik-BoldItalic.ttf') format('truetype');   font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Aeonik'; src: url('fonts/Aeonik-Black.ttf') format('truetype');        font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Aeonik'; src: url('fonts/Aeonik-BlackItalic.ttf') format('truetype');  font-weight: 900; font-style: italic; font-display: swap; }

/* ---- Duplet (body) ---- */
@font-face { font-family: 'Duplet'; src: url('fonts/Duplet-Thin.otf') format('opentype');          font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: 'Duplet'; src: url('fonts/Duplet-ThinItalic.otf') format('opentype');    font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: 'Duplet'; src: url('fonts/Duplet-Extralight.otf') format('opentype');    font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'Duplet'; src: url('fonts/Duplet-ExtralightItalic.otf') format('opentype'); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: 'Duplet'; src: url('fonts/Duplet-Light.otf') format('opentype');         font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Duplet'; src: url('fonts/Duplet-LightItalic.otf') format('opentype');   font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'Duplet'; src: url('fonts/Duplet-Regular.otf') format('opentype');       font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Duplet'; src: url('fonts/Duplet-Italic.otf') format('opentype');        font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Duplet'; src: url('fonts/Duplet-Semibold.otf') format('opentype');      font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Duplet'; src: url('fonts/Duplet-SemiboldItalic.otf') format('opentype');font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: 'Duplet'; src: url('fonts/Duplet-Bold.otf') format('opentype');          font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Duplet'; src: url('fonts/Duplet-BoldItalic.otf') format('opentype');    font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Duplet'; src: url('fonts/Duplet-Extrabold.otf') format('opentype');     font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Duplet'; src: url('fonts/Duplet-ExtraboldItalic.otf') format('opentype');font-weight: 800; font-style: italic; font-display: swap; }

:root {
  /* ------- Color tokens ------- */

  /* Core brand — deep aubergine / night */
  --pm-aubergine-900: #15131C;   /* ink black-violet (used on logotype) */
  --pm-aubergine-800: #1E1A2E;
  --pm-aubergine-700: #2A2340;
  --pm-aubergine-600: #3A2F5C;   /* deep aubergine hero base */
  --pm-aubergine-500: #4B3E78;

  /* Wisteria — grey-leaning soft lavender */
  --pm-wisteria-700: #6B5F8C;
  --pm-wisteria-500: #9C92B8;    /* wisteria: grey-lavender accent */
  --pm-wisteria-300: #C7BFDB;
  --pm-wisteria-100: #E7E2F0;

  /* Violet (from diamond logomark) */
  --pm-violet-700: #5B2ED1;      /* saturated facet */
  --pm-violet-500: #7B4FE3;
  --pm-violet-300: #B6A0F0;

  /* Signal green — big accent, sparingly */
  --pm-green-500: #C6FA27;
  --pm-green-400: #D4FB55;
  --pm-green-600: #A8DB18;

  /* Neutrals / surface */
  --pm-cream:   #F5F1E8;         /* warm light background */
  --pm-paper:   #FBF9F3;         /* lightest surface — crisper, still warm */
  --pm-bone:    #EDE7D9;         /* tinted surface / card-on-cream */
  --pm-ink:     #15131C;         /* primary text on light */
  --pm-ink-60:  rgba(21, 19, 28, 0.6);
  --pm-ink-40:  rgba(21, 19, 28, 0.4);
  --pm-ink-10:  rgba(21, 19, 28, 0.08);

  /* Semantic — functional */
  --pm-success: #5AC28A;
  --pm-warning: #F0B03A;
  --pm-danger:  #E45757;

  /* ------- Semantic surface + foreground ------- */
  --bg-app:        var(--pm-cream);
  --bg-surface:    var(--pm-paper);
  --bg-surface-2:  var(--pm-bone);
  --bg-inverse:    var(--pm-aubergine-900);
  --bg-inverse-2:  var(--pm-aubergine-600);

  --fg-1: var(--pm-ink);            /* primary text */
  --fg-2: var(--pm-ink-60);         /* secondary text */
  --fg-3: var(--pm-ink-40);         /* tertiary / metadata */
  --fg-on-dark:    #F5F1E8;
  --fg-on-dark-2:  rgba(245, 241, 232, 0.7);

  --accent:        var(--pm-violet-700);
  --accent-hover:  var(--pm-violet-500);
  --signal:        var(--pm-green-500);   /* use SPARINGLY */

  --border-1:      rgba(21, 19, 28, 0.12);
  --border-2:      rgba(21, 19, 28, 0.06);
  --border-inverse: rgba(245, 241, 232, 0.14);

  /* ------- Type system ------- */
  --font-display: 'Aeonik', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'Duplet', ui-sans-serif, system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-script:  'Caveat', 'Kalam', cursive; /* decorative only — real 'Play' is SVG */

  /* Type scale — set for marketing + product */
  --fs-display-xl: clamp(3.5rem, 7vw, 6.75rem);  /* hero display */
  --fs-display-l:  clamp(2.75rem, 5vw, 4.5rem);
  --fs-display-m:  clamp(2.25rem, 4vw, 3.25rem);
  --fs-h1:         2.25rem;   /* 36px */
  --fs-h2:         1.75rem;   /* 28px */
  --fs-h3:         1.375rem;  /* 22px */
  --fs-h4:         1.125rem;  /* 18px */
  --fs-body:       1rem;      /* 16px */
  --fs-small:      0.875rem;  /* 14px */
  --fs-caption:    0.75rem;   /* 12px */
  --fs-eyebrow:    0.6875rem; /* 11px uppercase tracking */

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

  /* Radii — generous, slightly round. Pills for CTAs. */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   18px;
  --r-xl:   24px;
  --r-2xl:  32px;
  --r-pill: 999px;

  /* Shadows — soft, violet-tinted. sm has a sharper contact shadow so cards
     earn their pop on cream; md/lg use a wider aubergine ambient for depth. */
  --shadow-xs: 0 1px 2px rgba(21, 19, 28, 0.06);
  --shadow-sm: 0 4px 14px rgba(48, 32, 80, 0.10), 0 1px 3px rgba(21, 19, 28, 0.08);
  --shadow-md: 0 10px 28px rgba(48, 32, 80, 0.14), 0 2px 6px rgba(21, 19, 28, 0.06);
  --shadow-lg: 0 28px 56px rgba(48, 32, 80, 0.18), 0 6px 14px rgba(21, 19, 28, 0.08);
  --shadow-glow-violet: 0 0 0 6px rgba(123, 79, 227, 0.12);
  --shadow-glow-green:  0 0 0 6px rgba(198, 250, 39, 0.22);

  /* Gradients -- reusable on cards AND full-bleed sections. */
  /* Light section: crisper paper base + wisteria bloom top-left + warm cream sweep bottom-right. */
  /* Dark section:  aubergine floor with a real violet bloom upper-centre + warm aubergine sweep. */
  /* Cards stay subtle on purpose; sections carry the brand energy. */
  --gradient-light: radial-gradient(140% 110% at 0% 0%, rgba(123,79,227,0.28) 0%, rgba(123,79,227,0.08) 45%, rgba(123,79,227,0) 75%), linear-gradient(152deg, #FDFBF5 0%, #F5F1E8 100%);
  --gradient-light-soft: linear-gradient(180deg, #FBF9F3 0%, #F1ECDF 100%);
  --gradient-dark: radial-gradient(130% 100% at 50% -10%, rgba(123,79,227,0.9) 0%, rgba(91,46,209,0.35) 35%, rgba(42,32,72,0.4) 65%, rgba(20,16,31,0) 90%), linear-gradient(180deg, #1E1830 0%, #15111F 100%);
  --gradient-dark-soft: linear-gradient(155deg, #2A2340 0%, #1E1A2E 55%, #15131C 100%);

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 120ms;
  --dur-med:  220ms;
  --dur-slow: 420ms;
}

/* =====================================================================
   Semantic element styles — drop-in class helpers
   ===================================================================== */

html, body {
  font-family: var(--font-body);
  color: var(--fg-1);
  background: var(--bg-app);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.display-xl, h1.display, .hero-title {
  font-family: var(--font-display);
  font-weight: 700;                /* Aeonik Bold — chunky, brand-loud */
  font-size: var(--fs-display-xl);
  line-height: 0.92;
  letter-spacing: -0.038em;        /* slightly tighter; bold needs less optical space */
  text-wrap: balance;
}

.display-l {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-display-l);
  line-height: 0.98;
  letter-spacing: -0.032em;
  text-wrap: balance;
}

.display-m {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-display-m);
  line-height: 1.03;
  letter-spacing: -0.028em;
  text-wrap: balance;
}

h1 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h1); line-height: 1.1; letter-spacing: -0.02em; }
h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h2); line-height: 1.15; letter-spacing: -0.015em; }
h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -0.01em; }
h4 { font-family: var(--font-body);    font-weight: 700; font-size: var(--fs-h4); line-height: 1.3; }

p, .body { font-size: var(--fs-body); line-height: 1.55; color: var(--fg-1); text-wrap: pretty; }
.small   { font-size: var(--fs-small); line-height: 1.5; color: var(--fg-2); }
.caption { font-size: var(--fs-caption); color: var(--fg-2); }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--fg-2);
}

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--pm-ink-10);
  padding: 0.1em 0.35em;
  border-radius: var(--r-xs);
}

a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1.5px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--accent-hover); }

::selection { background: var(--pm-green-500); color: var(--pm-ink); }