/* ===========================================================================
   GOMINIONS DESIGN SYSTEM — colors_and_type.css
   ---------------------------------------------------------------------------
   Dark-mode exclusive. Built on the existing production CSS vars (--amber,
   --bg, --bg2, --text, --blue, --purple, --green, --red) and extended with
   a full token system: scales, semantic aliases, spacing, radii, shadows.
   =========================================================================== */

/* ---------- Webfonts (system-safe stack + branded display) ---------- */
/*
   Body / UI: native system stack — matches what gominions.com ships today,
              zero FOUT, fast on slow Russian/Ukrainian connections.
   Display:   Space Grotesk — geometric, slightly playful, reads well in
              FR/EN/DE/IT/ES/RU/UK at large sizes. Good emoji adjacency.
   Mono:      JetBrains Mono — for GMT amounts, hashes, addresses, code.
*/
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* =========================================================================
     COLOR — RAW PALETTE
     The "physical" colors. Never reference these directly in components —
     use the semantic tokens below.
     ========================================================================= */

  /* Surfaces — deep blue-black mining-cave ladder */
  --color-ink-950: #060912;   /* deepest — page background extremes */
  --color-ink-900: #0a0e1a;   /* --bg: app background */
  --color-ink-800: #0f1525;   /* sunken panels, modal scrims base */
  --color-ink-700: #131b2f;   /* --bg2: cards, raised surfaces */
  --color-ink-600: #1b2540;   /* hover surface */
  --color-ink-500: #243054;   /* active surface */
  --color-ink-400: #344063;   /* borders, dividers */
  --color-ink-300: #475579;   /* strong borders, disabled glyphs */

  /* Text — slate ladder, WCAG-tuned against ink-900 */
  --color-slate-50:  #f8fafc;
  --color-slate-100: #e2e8f0;  /* --text: primary text   (AAA on ink-900) */
  --color-slate-300: #cbd5e1;
  --color-slate-400: #94a3b8;  /* --text2: secondary    (AA on ink-900) */
  --color-slate-500: #64748b;  /* --text3: tertiary     (AA Large only) */
  --color-slate-600: #475569;

  /* Amber — primary accent, premium, CTA */
  --color-amber-50:  #fff7ed;
  --color-amber-200: #fde68a;
  --color-amber-300: #fcd34d;
  --color-amber-400: #fbbf24;
  --color-amber-500: #f59e0b;  /* --amber: brand primary */
  --color-amber-600: #d97706;
  --color-amber-700: #b45309;
  --color-amber-900: #78350f;
  --color-amber-950: #2e1908;  /* tinted backgrounds */

  /* Blue — info, secondary accent (matches logo gradient) */
  --color-blue-300:  #93c5fd;
  --color-blue-400:  #60a5fa;
  --color-blue-500:  #3b82f6;  /* --blue */
  --color-blue-600:  #2563eb;
  --color-blue-700:  #1d4ed8;
  --color-blue-950:  #0c1a35;

  /* Purple — spell / magic / strategy */
  --color-purple-300: #d8b4fe;
  --color-purple-400: #c084fc;
  --color-purple-500: #a855f7;  /* --purple */
  --color-purple-600: #9333ea;
  --color-purple-700: #7e22ce;
  --color-purple-950: #2a1146;

  /* Green — success, online, profit */
  --color-green-400: #4ade80;
  --color-green-500: #22c55e;  /* --green */
  --color-green-600: #16a34a;
  --color-green-700: #15803d;
  --color-green-950: #0a2818;

  /* Red — danger, loss, offline */
  --color-red-400:  #f87171;
  --color-red-500:  #ef4444;  /* --red */
  --color-red-600:  #dc2626;
  --color-red-700:  #b91c1c;
  --color-red-950:  #2a0a0a;

  /* Cyan — live / streaming / real-time markers */
  --color-cyan-400: #22d3ee;
  --color-cyan-500: #06b6d4;
  --color-cyan-950: #0a2a32;


  /* =========================================================================
     COLOR — SEMANTIC TOKENS
     Reference THESE in components.  Production legacy aliases (--amber, --bg,
     --bg2, --text, --text2, --text3, --blue, --purple, --green, --red) are
     preserved at the bottom of this file so existing dashboards keep working.
     ========================================================================= */

  /* Surfaces */
  --surface-app:        var(--color-ink-900);   /* page */
  --surface-sunken:     var(--color-ink-800);   /* below page (modal scrim) */
  --surface-raised:     var(--color-ink-700);   /* card */
  --surface-raised-hi:  var(--color-ink-600);   /* card-hover */
  --surface-raised-on:  var(--color-ink-500);   /* card-active / selected */
  --surface-overlay:    color-mix(in oklab, var(--color-ink-950) 80%, transparent);
  --surface-tint-amber: color-mix(in oklab, var(--color-amber-500) 12%, transparent);
  --surface-tint-blue:  color-mix(in oklab, var(--color-blue-500)  14%, transparent);
  --surface-tint-purple:color-mix(in oklab, var(--color-purple-500) 14%, transparent);
  --surface-tint-green: color-mix(in oklab, var(--color-green-500) 14%, transparent);
  --surface-tint-red:   color-mix(in oklab, var(--color-red-500)   14%, transparent);

  /* Borders */
  --border-subtle:  color-mix(in oklab, var(--color-slate-100) 8%, transparent);
  --border-default: color-mix(in oklab, var(--color-slate-100) 14%, transparent);
  --border-strong:  color-mix(in oklab, var(--color-slate-100) 22%, transparent);
  --border-amber:   color-mix(in oklab, var(--color-amber-500) 40%, transparent);
  --border-focus:   var(--color-amber-400);

  /* Text */
  --fg-1:        var(--color-slate-100);   /* primary */
  --fg-2:        var(--color-slate-400);   /* secondary, labels */
  --fg-3:        var(--color-slate-500);   /* tertiary, captions */
  --fg-muted:    var(--color-slate-600);   /* placeholder, disabled */
  --fg-inverse:  var(--color-ink-900);     /* text on amber buttons */
  --fg-accent:   var(--color-amber-400);
  --fg-link:     var(--color-blue-400);
  --fg-success:  var(--color-green-400);
  --fg-warning:  var(--color-amber-400);
  --fg-danger:   var(--color-red-400);

  /* Accents — semantic + tier-coded */
  --accent-primary: var(--color-amber-500);  /* CTA, premium */
  --accent-info:    var(--color-blue-500);   /* analytics */
  --accent-spell:   var(--color-purple-500); /* spell intelligence */
  --accent-success: var(--color-green-500);  /* profit, online */
  --accent-danger:  var(--color-red-500);    /* loss, offline */
  --accent-live:    var(--color-cyan-400);   /* real-time / streaming */

  /* User-tier accents — for badges, ring decorations, sidebars */
  --tier-public:      var(--color-slate-400);
  --tier-vip1:        var(--color-amber-500);
  --tier-blockaholick:#22d3ee;                /* ice cyan — 🧊 */
  --tier-core:        var(--color-purple-500);
  --tier-admin:       var(--color-red-500);


  /* =========================================================================
     TYPOGRAPHY
     ========================================================================= */

  /* Families */
  --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body:    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale — modular 1.200 (minor-third), tuned for 16px base */
  --text-xs:   0.75rem;     /* 12px — captions, micro labels */
  --text-sm:   0.875rem;    /* 14px — secondary body, table cells */
  --text-base: 1rem;        /* 16px — body */
  --text-md:   1.125rem;    /* 18px — large body, lead */
  --text-lg:   1.375rem;    /* 22px — h4 */
  --text-xl:   1.75rem;     /* 28px — h3 */
  --text-2xl:  2.25rem;     /* 36px — h2 */
  --text-3xl:  3rem;        /* 48px — h1 / hero subhead */
  --text-4xl:  4rem;        /* 64px — hero */

  /* Weights */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Line heights */
  --lh-tight:   1.1;   /* display, hero */
  --lh-snug:    1.25;  /* headings */
  --lh-normal:  1.5;   /* body */
  --lh-relaxed: 1.65;  /* long-form */

  /* Letter-spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.08em;  /* uppercase eyebrow labels */


  /* =========================================================================
     SPACING — 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.25rem;  /* 20 */
  --space-6:  1.5rem;   /* 24 */
  --space-8:  2rem;     /* 32 */
  --space-10: 2.5rem;   /* 40 */
  --space-12: 3rem;     /* 48 */
  --space-16: 4rem;     /* 64 */
  --space-20: 5rem;     /* 80 */
  --space-24: 6rem;     /* 96 */


  /* =========================================================================
     RADII — soft, friendly, never fully rounded except pills/avatars
     ========================================================================= */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;   /* default card / button */
  --radius-lg: 14px;   /* feature card */
  --radius-xl: 20px;   /* hero card, modal */
  --radius-2xl: 28px;
  --radius-pill: 999px;
  --radius-circle: 50%;


  /* =========================================================================
     SHADOWS — dark-mode appropriate: emphasize halo & glow over drop-shadow.
     Drop shadows are subtle (already dark on dark). Premium accents use a
     warm amber halo; danger uses red; spell uses purple.
     ========================================================================= */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.45);
  --shadow-sm: 0 2px 6px rgba(0,0,0,0.40), 0 1px 2px rgba(0,0,0,0.30);
  --shadow-md: 0 8px 20px -8px rgba(0,0,0,0.65), 0 2px 4px rgba(0,0,0,0.35);
  --shadow-lg: 0 20px 40px -16px rgba(0,0,0,0.75), 0 4px 8px rgba(0,0,0,0.40);
  --shadow-xl: 0 30px 60px -24px rgba(0,0,0,0.85), 0 8px 16px rgba(0,0,0,0.45);

  /* Glows — used on premium CTAs, live indicators, focus rings */
  --glow-amber:  0 0 0 1px rgba(245,158,11,0.40), 0 8px 24px -6px rgba(245,158,11,0.45);
  --glow-blue:   0 0 0 1px rgba(59,130,246,0.40), 0 8px 24px -6px rgba(59,130,246,0.40);
  --glow-purple: 0 0 0 1px rgba(168,85,247,0.40), 0 8px 24px -6px rgba(168,85,247,0.40);
  --glow-green:  0 0 0 1px rgba(34,197,94,0.40),  0 8px 24px -6px rgba(34,197,94,0.40);
  --glow-cyan:   0 0 0 1px rgba(34,211,238,0.45), 0 0 16px rgba(34,211,238,0.35);

  /* Inner shadows — give cards a subtle inset / depth */
  --inset-soft: inset 0 1px 0 rgba(255,255,255,0.04);
  --inset-deep: inset 0 1px 0 rgba(255,255,255,0.06), inset 0 -1px 0 rgba(0,0,0,0.30);


  /* =========================================================================
     MOTION
     ========================================================================= */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);     /* default — gentle */
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1); /* playful overshoot */

  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   320ms;
  --dur-pulse:  2400ms;  /* live-indicator breathing */


  /* =========================================================================
     Z-INDEX
     ========================================================================= */
  --z-base:     1;
  --z-sticky:   100;
  --z-overlay:  200;
  --z-dropdown: 300;
  --z-modal:    400;
  --z-toast:    500;
  --z-tooltip:  600;


  /* =========================================================================
     GRADIENTS — used sparingly: hero, premium cards, tier badges
     ========================================================================= */
  --gradient-amber:    linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%);
  --gradient-premium:  linear-gradient(135deg, #fbbf24 0%, #f59e0b 40%, #c2410c 100%);
  --gradient-flagship: linear-gradient(135deg, #f59e0b 0%, #a855f7 100%);  /* Discord Pro Setup */
  --gradient-spell:    linear-gradient(135deg, #c084fc 0%, #7e22ce 100%);
  --gradient-ice:      linear-gradient(135deg, #67e8f9 0%, #06b6d4 50%, #1e40af 100%);   /* 🧊 Blockaholics */
  --gradient-night:    linear-gradient(180deg, #0a0e1a 0%, #131b2f 100%);
  --gradient-hero:     radial-gradient(ellipse 80% 60% at 50% 0%, rgba(245,158,11,0.18) 0%, transparent 60%),
                       radial-gradient(ellipse 60% 40% at 80% 20%, rgba(168,85,247,0.12) 0%, transparent 60%),
                       linear-gradient(180deg, #0a0e1a 0%, #060912 100%);


  /* =========================================================================
     LEGACY PRODUCTION ALIASES — keep these working; existing dashboards
     reference them.
     ========================================================================= */
  --amber:  var(--color-amber-500);
  --bg:     var(--color-ink-900);
  --bg2:    var(--color-ink-700);
  --text:   var(--color-slate-100);
  --text2:  var(--color-slate-400);
  --text3:  var(--color-slate-500);
  --blue:   var(--color-blue-500);
  --purple: var(--color-purple-500);
  --green:  var(--color-green-500);
  --red:    var(--color-red-500);
}


/* ============================================================================
   SEMANTIC TYPE STYLES — utility classes you can reach for directly
   ============================================================================ */

.t-hero {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, var(--text-4xl));
  font-weight: var(--weight-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.t-h1 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.t-h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.t-h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.t-h4 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.t-body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--lh-normal);
  color: var(--fg-1);
}

.t-body-sm {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.t-caption {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}

.t-eyebrow {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--fg-accent);
}

.t-mono {
  font-family: var(--font-mono);
  font-size: 0.95em;
  font-variant-numeric: tabular-nums;
}

.t-numeric {
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}