/* Trilly webfonts — loaded from Google Fonts.
   Display: Space Grotesk · Body/UI: Manrope · Technical: JetBrains Mono
   NOTE: These are Google Fonts substitutes. The Trilly wordmark itself is a
   custom glossy brush script delivered as an image (assets/trilly-wordmark.png) —
   no font recreation is attempted. */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ============================================================
   TRILLY · COLOR TOKENS
   Neon cyber-creative: glossy cyan→violet→magenta on near-black.
   Base values first, semantic aliases below.
   ============================================================ */
:root {
  /* ---- Brand neon ramp (the wordmark gradient) ---- */
  --trilly-cyan: #2FE6F6;       /* electric cyan — left of the gradient */
  --trilly-blue: #4C6BFF;       /* periwinkle blue */
  --trilly-violet: #8B5CF6;     /* core violet */
  --trilly-magenta: #F23CC4;    /* hot magenta */
  --trilly-pink: #FF4FD8;       /* candy pink — right of the gradient */

  /* Tints / shades for states */
  --cyan-bright: #6FF0FB;
  --violet-bright: #A98BFF;
  --magenta-bright: #FF6FDD;
  --violet-deep: #5B3FBF;
  --magenta-deep: #B12B91;

  /* ---- Ink / near-black surfaces ---- */
  --void: #08070E;             /* page void, darkest */
  --ink-900: #0C0A16;          /* primary background */
  --ink-800: #14111F;          /* surface */
  --ink-700: #1C1830;          /* raised surface / card */
  --ink-600: #261F3D;          /* hover surface */
  --ink-500: #322A4E;          /* line / divider strong */

  /* ---- Text on dark ---- */
  --paper: #F5F2FC;            /* near-white, faintly cool */
  --text-1: #F5F2FC;
  --text-2: #BFB7D6;           /* secondary */
  --text-3: #8B83A6;           /* muted / captions */
  --text-4: #5E5878;           /* disabled / ghost */

  /* ---- Inverse (rare light surfaces) ---- */
  --paper-ink: #100C1C;        /* text on neon/light fills */

  /* ---- Semantic status ---- */
  --success: #3BE3A0;
  --warning: #FFC24B;
  --danger:  #FF5A6E;
  --info:    var(--trilly-cyan);

  /* ---- Alpha helpers (built on brand hues) ---- */
  --violet-a12: rgba(139, 92, 246, 0.12);
  --violet-a20: rgba(139, 92, 246, 0.20);
  --violet-a35: rgba(139, 92, 246, 0.35);
  --magenta-a14: rgba(242, 60, 196, 0.14);
  --magenta-a30: rgba(242, 60, 196, 0.30);
  --cyan-a14: rgba(47, 230, 246, 0.14);
  --cyan-a30: rgba(47, 230, 246, 0.30);
  --paper-a06: rgba(245, 242, 252, 0.06);
  --paper-a10: rgba(245, 242, 252, 0.10);

  /* ============================================================
     SEMANTIC ALIASES — reference these in components
     ============================================================ */
  --bg-page: var(--ink-900);
  --bg-void: var(--void);
  --surface: var(--ink-800);
  --surface-raised: var(--ink-700);
  --surface-hover: var(--ink-600);
  --surface-glass: rgba(28, 24, 48, 0.55);   /* glass card over neon */

  --border-subtle: rgba(139, 92, 246, 0.16);
  --border-strong: rgba(139, 92, 246, 0.34);
  --border-neon: rgba(47, 230, 246, 0.45);
  --divider: var(--ink-500);

  --text-body: var(--text-2);
  --text-heading: var(--text-1);
  --text-muted: var(--text-3);
  --text-disabled: var(--text-4);

  --accent: var(--trilly-violet);
  --accent-hover: var(--violet-bright);
  --accent-press: var(--violet-deep);
  --accent-contrast: var(--paper-ink);

  --focus-ring: var(--trilly-cyan);
  --selection-bg: var(--trilly-magenta);
  --selection-fg: var(--paper-ink);

  /* ---- Signature gradients ---- */
  --grad-trilly: linear-gradient(100deg, var(--trilly-cyan) 0%, var(--trilly-blue) 28%, var(--trilly-violet) 56%, var(--trilly-magenta) 82%, var(--trilly-pink) 100%);
  --grad-trilly-soft: linear-gradient(100deg, rgba(47,230,246,0.18), rgba(139,92,246,0.18) 55%, rgba(242,60,196,0.18)); /* @kind color */
  --grad-cv: linear-gradient(120deg, var(--trilly-cyan), var(--trilly-violet));
  --grad-vm: linear-gradient(120deg, var(--trilly-violet), var(--trilly-magenta));
  --grad-page: radial-gradient(120% 90% at 12% -8%, rgba(76,107,255,0.16), transparent 46%),
               radial-gradient(110% 90% at 92% 4%, rgba(242,60,196,0.13), transparent 44%),
               radial-gradient(120% 120% at 50% 110%, rgba(47,230,246,0.10), transparent 50%),
               var(--ink-900);
}

/* ============================================================
   TRILLY · TYPOGRAPHY TOKENS
   Display: Space Grotesk · Body/UI: Manrope · Technical: JetBrains Mono
   ============================================================ */
:root {
  /* ---- Families ---- */
  --font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Manrope', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', ui-monospace, monospace;

  /* ---- Weights ---- */
  --fw-regular: 400; /* @kind font */
  --fw-medium: 500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold: 700; /* @kind font */
  --fw-black: 800; /* @kind font */

  /* ---- Type scale (rem on 16px base) ---- */
  --fs-display: clamp(3rem, 7vw, 6rem); /* @kind font */
  --fs-h1: clamp(2.25rem, 4.5vw, 3.75rem); /* @kind font */
  --fs-h2: clamp(1.75rem, 3vw, 2.6rem); /* @kind font */
  --fs-h3: 1.5rem; /* @kind font */
  --fs-h4: 1.25rem; /* @kind font */
  --fs-lg: 1.125rem; /* @kind font */
  --fs-body: 1rem; /* @kind font */
  --fs-sm: 0.9375rem; /* @kind font */
  --fs-xs: 0.8125rem; /* @kind font */
  --fs-micro: 0.6875rem; /* @kind font */

  /* ---- Line heights ---- */
  --lh-tight: 0.92; /* @kind font */
  --lh-snug: 1.12; /* @kind font */
  --lh-heading: 1.18; /* @kind font */
  --lh-body: 1.65; /* @kind font */
  --lh-relaxed: 1.85; /* @kind font */

  /* ---- Letter spacing ---- */
  --ls-display: -0.05em; /* @kind font */
  --ls-heading: -0.03em; /* @kind font */
  --ls-normal: 0; /* @kind font */
  --ls-eyebrow: 0.26em; /* @kind font */
  --ls-wide: 0.16em; /* @kind font */

  /* ---- Semantic roles ---- */
  --text-display-font: var(--font-display);
  --text-display-weight: var(--fw-bold);
  --text-heading-font: var(--font-display);
  --text-body-font: var(--font-body);
  --text-label-font: var(--font-mono);
}

/* ============================================================
   TRILLY · SPACING, RADIUS & LAYOUT TOKENS
   4px base grid.
   ============================================================ */
:root {
  /* ---- Spacing scale (4px base) ---- */
  --space-0: 0;
  --space-1: 0.25rem;   /* 4 */
  --space-2: 0.5rem;    /* 8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 3rem;      /* 48 */
  --space-8: 4rem;      /* 64 */
  --space-9: 6rem;      /* 96 */
  --space-10: 8rem;     /* 128 */

  /* ---- Corner radii ---- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;     /* default control radius */
  --radius-lg: 20px;     /* cards */
  --radius-xl: 28px;     /* large panels */
  --radius-2xl: 36px;
  --radius-pill: 999px;  /* buttons, chips, tags */

  /* ---- Border widths ---- */
  --border-thin: 1px; /* @kind spacing */
  --border-med: 1.5px; /* @kind spacing */
  --border-thick: 2px; /* @kind spacing */

  /* ---- Layout ---- */
  --container: 1200px; /* @kind spacing */
  --container-wide: 1320px; /* @kind spacing */
  --gutter: clamp(1.25rem, 4vw, 3rem); /* @kind spacing */
}

/* ============================================================
   TRILLY · EFFECTS — shadows, neon glows, blur, motion
   The brand lives on glow. Depth = soft black shadow + colored glow.
   ============================================================ */
:root {
  /* ---- Elevation (soft black, for layering on dark) ---- */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.40);
  --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 28px 70px rgba(0, 0, 0, 0.55);
  --shadow-inset-hi: inset 0 1px 0 rgba(245, 242, 252, 0.06);

  /* ---- Neon glows (the signature) ---- */
  --glow-violet: 0 0 0 1px rgba(139,92,246,0.40), 0 8px 30px rgba(139,92,246,0.35);
  --glow-cyan:   0 0 0 1px rgba(47,230,246,0.40), 0 8px 30px rgba(47,230,246,0.30);
  --glow-magenta:0 0 0 1px rgba(242,60,196,0.40), 0 8px 30px rgba(242,60,196,0.32);
  --glow-brand:  0 10px 40px rgba(139,92,246,0.40), 0 4px 18px rgba(242,60,196,0.28);
  --glow-soft:   0 0 24px rgba(139,92,246,0.22);

  /* Text glow for neon headlines */
  --text-glow-violet: 0 0 18px rgba(139,92,246,0.55); /* @kind shadow */
  --text-glow-cyan: 0 0 18px rgba(47,230,246,0.50); /* @kind shadow */

  /* ---- Blur / motion ---- */
  --blur-glass: blur(18px) saturate(135%); /* @kind other */
  --blur-soft: blur(8px); /* @kind other */

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --dur-fast: 140ms; /* @kind other */
  --dur-base: 220ms; /* @kind other */
  --dur-slow: 420ms; /* @kind other */
}

/* ---- Global base styling consumers inherit ---- */
body {
  background: var(--grad-page, var(--ink-900));
  color: var(--text-body, #BFB7D6);
  font-family: var(--font-body, system-ui);
  font-size: var(--fs-body, 1rem);
  line-height: var(--lh-body, 1.65);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--selection-bg, #F23CC4);
  color: var(--selection-fg, #100C1C);
}

/* Neon gradient text utility */
.trilly-gradient-text {
  background: var(--grad-trilly);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}