/* Vyaris Design Tokens
 * Dark-first, minimal, Swiss-inspired
 * Neon lime accent on deep black
 */

/* ---------- FONTS ---------- */
/* JetBrains Mono — local files, all weights + italics. */
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100; src: url('fonts/JetBrainsMono-Thin.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; font-style: italic; font-weight: 100; src: url('fonts/JetBrainsMono-ThinItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 200; src: url('fonts/JetBrainsMono-ExtraLight.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; font-style: italic; font-weight: 200; src: url('fonts/JetBrainsMono-ExtraLightItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 300; src: url('fonts/JetBrainsMono-Light.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; font-style: italic; font-weight: 300; src: url('fonts/JetBrainsMono-LightItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; src: url('fonts/JetBrainsMono-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; font-style: italic; font-weight: 400; src: url('fonts/JetBrainsMono-Italic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; src: url('fonts/JetBrainsMono-Medium.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; font-style: italic; font-weight: 500; src: url('fonts/JetBrainsMono-MediumItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 600; src: url('fonts/JetBrainsMono-SemiBold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; font-style: italic; font-weight: 600; src: url('fonts/JetBrainsMono-SemiBoldItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 700; src: url('fonts/JetBrainsMono-Bold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; font-style: italic; font-weight: 700; src: url('fonts/JetBrainsMono-BoldItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 800; src: url('fonts/JetBrainsMono-ExtraBold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; font-style: italic; font-weight: 800; src: url('fonts/JetBrainsMono-ExtraBoldItalic.ttf') format('truetype'); font-display: swap; }

/* Barlow + Manrope still via Google Fonts (no licensed TTFs supplied). */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;500;600;700;800&family=Manrope:wght@300;400;500;600;700;800&display=swap');

:root {
  /* ---------- COLOR — BRAND ---------- */
  --vy-lime:        #C8FF3D;   /* Signature neon-lime */
  --vy-lime-600:    #B3EF22;   /* Pressed / active */
  --vy-lime-700:    #8FCE0F;   /* Deep lime, border use */
  --vy-lime-soft:   #E7FF96;   /* Hover tint */
  --vy-ink:         #0A0B0A;   /* Brand black (slight warm) */
  --vy-ink-pure:    #000000;   /* True black — full bleed */

  /* ---------- COLOR — DARK (default) ---------- */
  --bg-0:  #0A0B0A;   /* page base */
  --bg-1:  #111312;   /* panel */
  --bg-2:  #181A19;   /* raised panel / hover */
  --bg-3:  #20231F;   /* border-ish surface */

  --fg-0:  #F4F5F2;   /* high-contrast text */
  --fg-1:  #C9CBC5;   /* body */
  --fg-2:  #8E918A;   /* secondary / meta */
  --fg-3:  #5C5F58;   /* tertiary / disabled */

  --line-0: #22251F;  /* hairline divider */
  --line-1: #2E3229;  /* card border */
  --line-2: #3B4036;  /* strong border */

  --accent:         var(--vy-lime);
  --accent-ink:     var(--vy-ink); /* ink ON accent */
  --accent-hover:   var(--vy-lime-soft);
  --accent-press:   var(--vy-lime-600);

  --success:        #7EE787;
  --warn:           #F2C94C;
  --danger:         #FF6A55;
  --info:           #7BD3F7;

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Barlow', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* ---------- TYPE SCALE ---------- */
  /* Display — Barlow, tight, all-caps for hero; mixed for sections */
  --fs-display:  80px;   --lh-display:  0.95;  --tr-display:  -0.03em;
  --fs-h1:       56px;   --lh-h1:       1.02;  --tr-h1:       -0.025em;
  --fs-h2:       40px;   --lh-h2:       1.08;  --tr-h2:       -0.02em;
  --fs-h3:       28px;   --lh-h3:       1.18;  --tr-h3:       -0.015em;
  --fs-h4:       20px;   --lh-h4:       1.3;   --tr-h4:       -0.01em;

  /* Body — Manrope */
  --fs-lede:     19px;   --lh-lede:     1.55;
  --fs-body:     15px;   --lh-body:     1.55;
  --fs-small:    13px;   --lh-small:    1.5;
  --fs-micro:    11px;   --lh-micro:    1.4;

  /* Mono */
  --fs-code:     13px;   --lh-code:     1.55;

  /* Eyebrow / label — Barlow uppercase tracked */
  --fs-eyebrow:  12px;   --tr-eyebrow:  0.18em;

  /* ---------- SPACING ---------- */
  --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 ---------- */
  /* Vyaris leans tight — Swiss rectangles, not pill-y. */
  --r-0: 0px;
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;   /* standard card */
  --r-4: 12px;
  --r-pill: 999px;

  /* ---------- SHADOWS / GLOW ---------- */
  /* Dark mode prefers edge + glow over fluffy drop shadows. */
  --sh-flat:    0 0 0 1px var(--line-1);
  --sh-1:       0 1px 0 rgba(255,255,255,0.03) inset, 0 1px 2px rgba(0,0,0,0.4);
  --sh-2:       0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px rgba(0,0,0,0.45);
  --sh-3:       0 1px 0 rgba(255,255,255,0.05) inset, 0 24px 60px rgba(0,0,0,0.6);
  --sh-glow:    0 0 0 1px var(--vy-lime), 0 0 24px -4px rgba(200,255,61,0.55);
  --sh-focus:   0 0 0 2px var(--vy-ink), 0 0 0 4px var(--vy-lime);

  /* ---------- MOTION ---------- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:    cubic-bezier(0.55, 0, 1, 0.45);
  --ease-std:   cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   400ms;

  /* ---------- LAYOUT ---------- */
  --maxw-prose:    640px;
  --maxw-content:  1040px;
  --maxw-wide:     1320px;
  --grid-gutter:   24px;
}

/* ---------- LIGHT THEME ---------- */
[data-theme="light"] {
  --bg-0:  #F5F6F2;
  --bg-1:  #FFFFFF;
  --bg-2:  #EDEFE8;
  --bg-3:  #E2E5DC;

  --fg-0:  #0A0B0A;
  --fg-1:  #2B2D28;
  --fg-2:  #5C5F58;
  --fg-3:  #8E918A;

  --line-0: #E2E5DC;
  --line-1: #D2D6CB;
  --line-2: #B9BEB1;

  --sh-1:   0 1px 2px rgba(10,11,10,0.06);
  --sh-2:   0 8px 24px rgba(10,11,10,0.08);
  --sh-3:   0 24px 60px rgba(10,11,10,0.12);
  --sh-glow:0 0 0 1px var(--vy-lime-700), 0 0 16px -2px rgba(143,206,15,0.4);
}

/* ---------- SEMANTIC ELEMENT STYLES ---------- */
.vy-display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  color: var(--fg-0);
}
.vy-h1 { font: 700 var(--fs-h1)/var(--lh-h1) var(--font-display); letter-spacing: var(--tr-h1); color: var(--fg-0); }
.vy-h2 { font: 700 var(--fs-h2)/var(--lh-h2) var(--font-display); letter-spacing: var(--tr-h2); color: var(--fg-0); }
.vy-h3 { font: 600 var(--fs-h3)/var(--lh-h3) var(--font-display); letter-spacing: var(--tr-h3); color: var(--fg-0); }
.vy-h4 { font: 600 var(--fs-h4)/var(--lh-h4) var(--font-display); letter-spacing: var(--tr-h4); color: var(--fg-0); }

.vy-lede  { font: 400 var(--fs-lede)/var(--lh-lede) var(--font-body); color: var(--fg-1); }
.vy-body  { font: 400 var(--fs-body)/var(--lh-body) var(--font-body); color: var(--fg-1); }
.vy-small { font: 400 var(--fs-small)/var(--lh-small) var(--font-body); color: var(--fg-2); }
.vy-micro { font: 500 var(--fs-micro)/var(--lh-micro) var(--font-body); color: var(--fg-2); }

.vy-code  { font: 400 var(--fs-code)/var(--lh-code) var(--font-mono); color: var(--fg-0); }

.vy-eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--fg-2);
}

/* Registration tick — a tiny Vyaris motif: a lime square before eyebrow text */
.vy-eyebrow::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  background: var(--vy-lime);
  margin-right: 10px;
  transform: translateY(-1px);
  vertical-align: middle;
}

/* ---------- RESETS USED IN CARDS ---------- */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  background: var(--bg-0);
  color: var(--fg-1);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}