/* ============================================================
   Vetline Design System — Foundations v2 "Emerald Felt"
   Strategic operating & execution partner.
   Specialized in high-risk B2C: iGaming, Dating, Crypto, Fintech.

   Direction: McKinsey-structural bold sans + casino-felt emerald
   + disciplined liquid-glass surfaces (3 max per page).
   Old token names kept so all UI kits re-skin automatically.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800&family=Geist+Mono:wght@400;500;600&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;1,8..60,400&display=swap');

/* ============================================================
   THEME: Felt (default) — warm paper + emerald hierarchy
   ============================================================ */
:root,
[data-theme="paper"],
[data-theme="felt"] {
  /* Surfaces */
  --paper:        #F6F4EF;
  --paper-deep:   #ECE8DC;
  --paper-soft:   #FAF8F3;
  --paper-white:  #FDFCF8;

  /* Ink — warm green-black */
  --ink:          #0A0F0C;
  --ink-2:        #20261F;
  --ink-3:        #555B53;
  --ink-4:        #8C918A;
  --ink-5:        #BBBFB6;

  /* Emerald hierarchy — felt (deep) → emerald (mid) → mint (bright) */
  --felt:         #08442A;   /* primary — CTAs, dark blocks, stamps */
  --felt-deep:    #053018;   /* press / hover-darken */
  --emerald:      #15824F;   /* mid — accents, links, numbers, eyebrows */
  --mint:         #4CC98B;   /* bright — pulse + success ONLY */
  --gold:         #B68A2A;   /* ONE moment per page, max */

  /* Legacy aliases (v1 kits re-skin automatically) */
  --clay:         #08442A;
  --clay-deep:    #053018;
  --clay-soft:    #BFD8C9;
  --clay-wash:    #E2EDE6;
  --slate:        #2E3631;
  --slate-soft:   #C7CEC8;
  --slate-wash:   #E4E8E4;

  /* Semantic */
  --ok:           #15824F;
  --ok-wash:      #DCEAE0;
  --warn:         #8A6A1B;
  --warn-wash:    #ECDFB6;
  --risk:         #9A2723;
  --risk-wash:    #ECCEC8;
  --info:         #1E4B6E;
  --info-wash:    #C9D8E4;

  /* Borders */
  --rule:         #0A0F0C;
  --rule-soft:    rgba(10,15,12,.16);
  --rule-faint:   rgba(10,15,12,.07);

  /* Refraction backdrop — what the glass refracts. Apply to body. */
  --backdrop:
    radial-gradient(900px 600px at 12% 18%, rgba(8,68,42,0.30), transparent 70%),
    radial-gradient(700px 500px at 88% 30%, rgba(5,48,24,0.24), transparent 70%),
    radial-gradient(800px 600px at 50% 95%, rgba(8,68,42,0.12), transparent 70%),
    #F6F4EF;  /* @kind other */

  /* Liquid glass — use on MAX 3 surfaces per page */
  --glass-bg:        rgba(255,255,255,0.42);
  --glass-border:    rgba(255,255,255,0.65);
  --glass-blur:      24px;
  --glass-highlight: linear-gradient(140deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 70%, rgba(255,255,255,0.35));  /* @kind other */
  --shadow-glass:
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -1px 0 rgba(10,15,12,.08),
    0 24px 48px -24px rgba(10,15,12,.22),
    0 8px 20px -12px rgba(8,68,42,.22);

  /* Felt grain — overlay on dark emerald blocks at ~7% opacity */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");  /* @kind other */
}

/* ============================================================
   THEME: Ledger (dark) — operator terminal, emerald-tuned
   ============================================================ */
[data-theme="ledger"] {
  --paper:        #0B100D;
  --paper-deep:   #070A08;
  --paper-soft:   #131A15;
  --paper-white:  #18211B;

  --ink:          #F0EFE8;
  --ink-2:        #D5D4CA;
  --ink-3:        #9B9F96;
  --ink-4:        #6C7068;
  --ink-5:        #393D38;

  --felt:         #0E5C3A;
  --felt-deep:    #08442A;
  --emerald:      #2EA76A;
  --mint:         #4CC98B;
  --gold:         #D4B45E;

  --clay:         #2EA76A;
  --clay-deep:    #15824F;
  --clay-soft:    #1C3A2A;
  --clay-wash:    #122418;

  --slate:        #9DB4A8;
  --slate-soft:   #3C4842;
  --slate-wash:   #1F2622;

  --ok:           #4CC98B;
  --ok-wash:      #15291E;
  --warn:         #D4B45E;
  --warn-wash:    #2B2418;
  --risk:         #D85A4E;
  --risk-wash:    #2B1714;
  --info:         #7AABCC;
  --info-wash:    #182530;

  --rule:         #F0EFE8;
  --rule-soft:    rgba(240,239,232,.20);
  --rule-faint:   rgba(240,239,232,.08);

  --backdrop:
    radial-gradient(900px 600px at 12% 18%, rgba(46,167,106,0.10), transparent 70%),
    radial-gradient(700px 500px at 88% 30%, rgba(14,92,58,0.14), transparent 70%),
    #0B100D;  /* @kind other */

  --glass-bg:        rgba(255,255,255,0.06);
  --glass-border:    rgba(255,255,255,0.14);
  --glass-blur:      24px;
  --glass-highlight: linear-gradient(140deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0) 35%, rgba(255,255,255,0) 70%, rgba(255,255,255,0.06));  /* @kind other */
  --shadow-glass:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 24px 48px -24px rgba(0,0,0,.5);
}

/* ============================================================
   THEME: Counsel (navy) — formal alt for regulated clients
   ============================================================ */
[data-theme="counsel"] {
  --paper:        #F4F2EC;
  --paper-deep:   #E7E2D6;
  --paper-soft:   #FAF8F2;
  --paper-white:  #FFFDF7;

  --ink:          #0B1626;
  --ink-2:        #1E2C40;
  --ink-3:        #4E5A6E;
  --ink-4:        #88909F;
  --ink-5:        #B9BEC8;

  --felt:         #1F3A66;
  --felt-deep:    #112548;
  --emerald:      #2C4F84;
  --mint:         #5E86BD;
  --gold:         #8B6C2F;

  --clay:         #1F3A66;
  --clay-deep:    #112548;
  --clay-soft:    #C9D2E2;
  --clay-wash:    #E6EBF3;

  --slate:        #8B6C2F;
  --slate-soft:   #DCC9A0;
  --slate-wash:   #EFE6CF;

  --ok:           #275C40;
  --ok-wash:      #D5E2D6;
  --warn:         #8A6A1B;
  --warn-wash:    #ECDFB6;
  --risk:         #842018;
  --risk-wash:    #E8CDC8;
  --info:         #1F3A66;
  --info-wash:    #C9D2E2;

  --rule:         #0B1626;
  --rule-soft:    rgba(11,22,38,.18);
  --rule-faint:   rgba(11,22,38,.08);

  --backdrop:
    radial-gradient(900px 600px at 12% 18%, rgba(31,58,102,0.18), transparent 70%),
    radial-gradient(700px 500px at 88% 30%, rgba(17,37,72,0.14), transparent 70%),
    #F4F2EC;  /* @kind other */

  --glass-bg:        rgba(255,255,255,0.42);
  --glass-border:    rgba(255,255,255,0.65);
  --glass-blur:      24px;
  --glass-highlight: linear-gradient(140deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 70%, rgba(255,255,255,0.35));  /* @kind other */
  --shadow-glass:
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -1px 0 rgba(11,22,38,.08),
    0 24px 48px -24px rgba(11,22,38,.22);
}

/* ============================================================
   TYPE — bold structural sans leads; serif italic for quotes only
   ============================================================ */
:root {
  --font-sans:   'Geist', 'Helvetica Neue', Helvetica, sans-serif;
  --font-serif:  'Source Serif 4', 'Times New Roman', Times, serif;  /* quotes/pullouts ONLY */
  --font-mono:   'Geist Mono', 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --font-display: var(--font-sans);

  /* Type scale — display (sans, bold, structural) */
  --t-display-1: clamp(56px, 6.4vw, 92px);   /* @kind font */ /* hero headlines */
  --t-display-2: clamp(40px, 4.6vw, 64px);   /* @kind font */
  --t-display-3: clamp(28px, 3.0vw, 44px);   /* @kind font */

  /* Thin qualifier — pairs under bold display (typographic tension) */
  --t-qualifier: clamp(22px, 2.2vw, 30px);   /* @kind font */

  /* Headings */
  --t-h1: 32px;
  --t-h2: 24px;
  --t-h3: 18px;
  --t-h4: 15px;

  /* Body */
  --t-body:    16px;
  --t-body-sm: 14px;
  --t-caption: 12px;
  --t-micro:   10px;

  /* Mono — operator vocabulary */
  --t-mono-lg: 18px;
  --t-mono:    14px;
  --t-mono-sm: 12px;
  --t-mono-xs: 10px;

  /* Line heights */
  --lh-display: 0.96;  /* @kind font */
  --lh-tight:   1.18;  /* @kind font */
  --lh-snug:    1.32;  /* @kind font */
  --lh-body:    1.5;   /* @kind font */
  --lh-loose:   1.62;  /* @kind font */

  /* Tracking */
  --tr-tight:   -0.034em;  /* @kind font */  /* bold display */
  --tr-snug:    -0.018em;  /* @kind font */
  --tr-normal:  0;         /* @kind font */
  --tr-wide:    0.04em;    /* @kind font */
  --tr-eyebrow: 0.18em;    /* @kind font */

  /* Weights */
  --w-light:    300;  /* @kind font */
  --w-regular:  400;  /* @kind font */
  --w-medium:   500;  /* @kind font */
  --w-semibold: 600;  /* @kind font */
  --w-bold:     700;  /* @kind font */

  /* ============================================================
     SPACING — 4px base
     ============================================================ */
  --s-0:   0;  /* @kind spacing */
  --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;

  /* ============================================================
     RADII — v2: glass surfaces are soft (12-24px);
     documents and tables stay rectilinear (0-2px).
     ============================================================ */
  --r-0:  0;  /* @kind radius */
  --r-1:  2px;
  --r-2:  4px;
  --r-3:  6px;
  --r-glass-sm: 12px;   /* buttons on glass */
  --r-glass:    18px;   /* nav, small panels */
  --r-glass-lg: 24px;   /* feature blocks */
  --r-pill: 999px;

  /* ============================================================
     ELEVATION
     ============================================================ */
  --shadow-rule:  0 0 0 1px var(--rule-soft);
  --shadow-press: 0 1px 0 0 var(--rule);
  --shadow-card:  0 1px 0 0 var(--rule-soft), 0 1px 2px 0 rgba(10,15,12,.04);
  --shadow-lift:  0 2px 0 0 var(--rule), 0 12px 24px -8px rgba(10,15,12,.12);
  --shadow-stamp: inset 0 0 0 2px var(--felt);
  --shadow-cta:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 10px 24px -10px rgba(5,48,24,.6);
}

/* ============================================================
   SEMANTIC TYPE PRIMITIVES
   ============================================================ */
.t-display-1, .t-display-2, .t-display-3 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  letter-spacing: var(--tr-tight);
  line-height: var(--lh-display);
  color: var(--ink);
  text-wrap: balance;
}
.t-display-1 { font-size: var(--t-display-1); }
.t-display-2 { font-size: var(--t-display-2); }
.t-display-3 { font-size: var(--t-display-3); }

/* Thin qualifier — the line under a bold display */
.t-qualifier {
  font-family: var(--font-sans);
  font-weight: var(--w-light);
  font-size: var(--t-qualifier);
  line-height: 1.25;
  letter-spacing: -0.018em;
  color: var(--ink-2);
  text-wrap: balance;
}
.t-qualifier strong { font-weight: var(--w-semibold); color: var(--ink); }

/* Serif italic — quotes and pullouts ONLY */
.t-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--w-regular);
  line-height: 1.35;
  color: var(--ink-2);
}

.t-h1 { font-family: var(--font-sans); font-weight: var(--w-bold);     font-size: var(--t-h1); line-height: var(--lh-tight); letter-spacing: -0.022em; color: var(--ink); }
.t-h2 { font-family: var(--font-sans); font-weight: var(--w-bold);     font-size: var(--t-h2); line-height: var(--lh-tight); letter-spacing: -0.018em; color: var(--ink); }
.t-h3 { font-family: var(--font-sans); font-weight: var(--w-semibold); font-size: var(--t-h3); line-height: var(--lh-snug); color: var(--ink); }
.t-h4 { font-family: var(--font-sans); font-weight: var(--w-semibold); font-size: var(--t-h4); line-height: var(--lh-snug); color: var(--ink); }

.t-body    { font-family: var(--font-sans); font-weight: var(--w-regular); font-size: var(--t-body);    line-height: var(--lh-body); color: var(--ink-2); text-wrap: pretty; }
.t-body-sm { font-family: var(--font-sans); font-weight: var(--w-regular); font-size: var(--t-body-sm); line-height: var(--lh-body); color: var(--ink-2); }
.t-caption { font-family: var(--font-sans); font-weight: var(--w-regular); font-size: var(--t-caption); line-height: var(--lh-snug); color: var(--ink-3); }

.t-eyebrow {
  font-family: var(--font-mono);
  font-weight: var(--w-semibold);
  font-size: var(--t-mono-sm);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--ink-3);
}
.t-eyebrow--accent { color: var(--emerald); }
.t-eyebrow--felt   { color: var(--felt); }
.t-eyebrow--ink    { color: var(--ink); }

.t-mono     { font-family: var(--font-mono); font-size: var(--t-mono);    line-height: var(--lh-snug); color: var(--ink); font-feature-settings: "tnum"; }
.t-mono-lg  { font-family: var(--font-mono); font-size: var(--t-mono-lg); line-height: var(--lh-snug); color: var(--ink); font-weight: var(--w-medium); font-feature-settings: "tnum"; }
.t-mono-sm  { font-family: var(--font-mono); font-size: var(--t-mono-sm); line-height: var(--lh-snug); color: var(--ink-2); font-feature-settings: "tnum"; }

/* ============================================================
   GLASS PRIMITIVES — discipline: max 3 glass surfaces per page
   ============================================================ */
.glass {
  position: relative;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-glass);
  border-radius: var(--r-glass);
  overflow: hidden;
}
.glass::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  background: var(--glass-highlight);
  mix-blend-mode: overlay;
}
.glass--lg { border-radius: var(--r-glass-lg); }

/* Dark felt block with grain — feature surfaces */
.felt-block {
  position: relative;
  background: var(--felt);
  color: #fff;
  border-radius: var(--r-glass-lg);
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(0,0,0,.22),
    0 28px 56px -24px rgba(5,48,24,.6);
}
.felt-block::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  background-image: var(--grain);
  opacity: 0.07;
  mix-blend-mode: overlay;
}
.felt-block::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 70%, rgba(255,255,255,0.10));
  z-index: 1;
}
.felt-block > * { position: relative; z-index: 2; }

/* ============================================================
   PRIMITIVE HELPERS
   ============================================================ */
.rule        { border-top: 1px solid var(--rule); }
.rule-soft   { border-top: 1px solid var(--rule-soft); }
.rule-faint  { border-top: 1px solid var(--rule-faint); }
.rule-heavy  { border-top: 2px solid var(--rule); }   /* section headers */

.stamp {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px;
  font-family: var(--font-mono);
  font-size: var(--t-mono-xs);
  font-weight: var(--w-semibold);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--felt);
  border: 1px solid var(--felt);
  border-radius: var(--r-1);
  background: transparent;
}
.stamp--filled { background: var(--felt); color: var(--paper-white); border-color: var(--felt); }
.stamp--ok     { color: var(--ok);   border-color: var(--ok); }
.stamp--warn   { color: var(--warn); border-color: var(--warn); }
.stamp--risk   { color: var(--risk); border-color: var(--risk); }
.stamp--ink    { color: var(--ink);  border-color: var(--ink); }

.bracket { font-family: var(--font-mono); font-size: var(--t-mono-sm); color: var(--ink-3); letter-spacing: var(--tr-wide); }
.bracket::before { content: "["; }
.bracket::after  { content: "]"; }

/* ============================================================
   BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--emerald); text-decoration: none; border-bottom: 1px solid currentColor; }
a:hover { color: var(--felt); }

::selection { background: var(--felt); color: var(--paper); }