/* Bitkin Technologies Design System — bundled global stylesheet
   Generated from the Claude Design project (tokens + base reset). */

/* Google Fonts — Space Grotesk (display/headings), Inter (body), Space Mono (code) */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');

/* ─────────────────────────── Color tokens ─────────────────────────── */
:root {
  /* Darks / backgrounds */
  --color-void:        #05060D;
  --color-base-950:    #080A14;
  --color-base-900:    #0D101F;
  --color-base-800:    #121628;
  --color-base-700:    #1A1F36;
  --color-base-600:    #242B47;
  --color-base-500:    #2F3859;
  --color-base-400:    #4A5480;
  --color-base-300:    #8791BD;
  --color-base-200:    #8E98C5;
  --color-base-100:    #B8BFD9;
  --color-base-50:     #E4E7F2;

  /* Blue — primary brand */
  --color-blue-900:    #0A1A3D;
  --color-blue-800:    #0D2464;
  --color-blue-700:    #1133A6;
  --color-blue-600:    #1A4AC8;
  --color-blue-500:    #2563EB;
  --color-blue-400:    #3B82F6;
  --color-blue-300:    #60A5FA;
  --color-blue-200:    #93C5FD;
  --color-blue-100:    #BFDBFE;

  /* Purple — accent */
  --color-purple-900:  #1A0A3D;
  --color-purple-800:  #2D1264;
  --color-purple-700:  #4C1D95;
  --color-purple-600:  #6D28D9;
  --color-purple-500:  #7C3AED;
  --color-purple-400:  #8B5CF6;
  --color-purple-300:  #A78BFA;
  --color-purple-200:  #C4B5FD;
  --color-purple-100:  #DDD6FE;

  /* Cyan — highlight / glow */
  --color-cyan-500:    #06B6D4;
  --color-cyan-400:    #22D3EE;
  --color-cyan-300:    #67E8F9;
  --color-cyan-200:    #A5F3FC;

  /* Semantic */
  --color-success-600: #059669;
  --color-success-400: #34D399;
  --color-success-100: #D1FAE5;
  --color-warning-600: #D97706;
  --color-warning-400: #FBBF24;
  --color-warning-100: #FEF3C7;
  --color-error-600:   #DC2626;
  --color-error-400:   #F87171;
  --color-error-100:   #FEE2E2;
  --color-info-600:    #2563EB;
  --color-info-400:    #60A5FA;
  --color-info-100:    #DBEAFE;

  /* Pure */
  --color-white:       #FFFFFF;
  --color-black:       #000000;

  /* Backgrounds */
  --bg-page:           var(--color-base-950);
  --bg-surface:        var(--color-base-900);
  --bg-surface-raised: var(--color-base-800);
  --bg-overlay:        var(--color-base-700);
  --bg-subtle:         var(--color-base-600);
  --bg-input:          var(--color-base-800);

  /* Foreground / text */
  --fg-primary:        var(--color-white);
  --fg-secondary:      var(--color-base-100);
  --fg-tertiary:       var(--color-base-200);
  --fg-muted:          var(--color-base-300);
  --fg-disabled:       var(--color-base-400);
  --fg-inverse:        var(--color-base-950);

  /* Brand */
  --brand-primary:     var(--color-blue-400);
  --brand-primary-dim: var(--color-blue-500);
  --brand-accent:      var(--color-purple-400);
  --brand-accent-dim:  var(--color-purple-500);
  --brand-highlight:   var(--color-cyan-400);

  /* Borders */
  --border-default:    #55618F;
  --border-subtle:     var(--color-base-700);
  --border-strong:     var(--color-base-500);
  --border-brand:      var(--color-blue-500);
  --border-accent:     var(--color-purple-500);

  /* Interactive */
  --interactive-primary:       var(--color-blue-500);
  --interactive-primary-hover: var(--color-blue-400);
  --interactive-accent:        var(--color-purple-500);
  --interactive-accent-hover:  var(--color-purple-400);
  --interactive-ghost-hover:   rgba(59, 130, 246, 0.12);
  --interactive-ghost-press:   rgba(59, 130, 246, 0.20);

  /* Status */
  --status-success:  var(--color-success-400);
  --status-warning:  var(--color-warning-400);
  --status-error:    var(--color-error-400);
  --status-info:     var(--color-info-400);
}

/* ─────────────────────────── Typography tokens ─────────────────────────── */
:root {
  --font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'Space Mono', 'Fira Code', 'Cascadia Code', monospace;

  --text-xs:   0.6875rem;
  --text-sm:   0.75rem;
  --text-base: 0.875rem;
  --text-md:   1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  3.75rem;
  --text-7xl:  4.5rem;

  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --leading-none:    1;
  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;
  --leading-loose:   2;

  --tracking-tightest: -0.04em;
  --tracking-tighter:  -0.02em;
  --tracking-tight:    -0.01em;
  --tracking-normal:    0em;
  --tracking-wide:      0.04em;
  --tracking-wider:     0.08em;
  --tracking-widest:    0.16em;

  --type-display-font:    var(--font-display);
  --type-display-weight:  var(--weight-bold);
  --type-display-leading: var(--leading-tight);
  --type-display-tracking: var(--tracking-tighter);

  --type-body-font:    var(--font-body);
  --type-body-weight:  var(--weight-regular);
  --type-body-leading: var(--leading-normal);
  --type-body-tracking: var(--tracking-normal);

  --type-label-font:    var(--font-body);
  --type-label-weight:  var(--weight-medium);
  --type-label-leading: var(--leading-tight);
  --type-label-tracking: var(--tracking-wide);

  --type-mono-font:    var(--font-mono);
  --type-mono-weight:  var(--weight-regular);
  --type-mono-leading: var(--leading-relaxed);
  --type-mono-tracking: var(--tracking-normal);
}

/* ─────────────────────────── Spacing tokens ─────────────────────────── */
:root {
  --space-0:    0px;
  --space-px:   1px;
  --space-0-5:  2px;
  --space-1:    4px;
  --space-1-5:  6px;
  --space-2:    8px;
  --space-2-5:  10px;
  --space-3:    12px;
  --space-4:    16px;
  --space-5:    20px;
  --space-6:    24px;
  --space-7:    28px;
  --space-8:    32px;
  --space-9:    36px;
  --space-10:   40px;
  --space-12:   48px;
  --space-14:   56px;
  --space-16:   64px;
  --space-20:   80px;
  --space-24:   96px;
  --space-32:   128px;
  --space-40:   160px;
  --space-48:   192px;
  --space-64:   256px;

  --gap-xs:   var(--space-1);
  --gap-sm:   var(--space-2);
  --gap-md:   var(--space-4);
  --gap-lg:   var(--space-6);
  --gap-xl:   var(--space-8);
  --gap-2xl:  var(--space-12);
  --gap-3xl:  var(--space-16);

  --padding-btn-sm:    var(--space-1-5) var(--space-3);
  --padding-btn-md:    var(--space-2) var(--space-4);
  --padding-btn-lg:    var(--space-3) var(--space-6);

  --padding-card:      var(--space-6);
  --padding-card-sm:   var(--space-4);
  --padding-section:   var(--space-16);
  --padding-input:     var(--space-2) var(--space-3);

  --radius-none:   0px;
  --radius-sm:     3px;
  --radius-md:     6px;
  --radius-lg:     10px;
  --radius-xl:     14px;
  --radius-2xl:    20px;
  --radius-full:   9999px;

  --radius-btn:    var(--radius-md);
  --radius-card:   var(--radius-lg);
  --radius-input:  var(--radius-md);
  --radius-badge:  var(--radius-sm);
  --radius-chip:   var(--radius-full);
  --radius-modal:  var(--radius-xl);
}

/* ─────────────────────────── Effects tokens ─────────────────────────── */
:root {
  --shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-sm:   0 2px 6px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-md:   0 4px 16px rgba(0, 0, 0, 0.50), 0 2px 4px rgba(0, 0, 0, 0.30);
  --shadow-lg:   0 8px 32px rgba(0, 0, 0, 0.55), 0 4px 8px rgba(0, 0, 0, 0.35);
  --shadow-xl:   0 16px 48px rgba(0, 0, 0, 0.60), 0 8px 16px rgba(0, 0, 0, 0.40);

  --glow-blue:   0 0 20px rgba(59, 130, 246, 0.35), 0 0 60px rgba(59, 130, 246, 0.15);
  --glow-purple: 0 0 20px rgba(139, 92, 246, 0.35), 0 0 60px rgba(139, 92, 246, 0.15);
  --glow-cyan:   0 0 20px rgba(34, 211, 238, 0.35), 0 0 60px rgba(34, 211, 238, 0.12);
  --glow-subtle: 0 0 12px rgba(59, 130, 246, 0.20);

  --shadow-inset-sm:    inset 0 1px 3px rgba(0, 0, 0, 0.50);
  --shadow-inset-input: inset 0 2px 6px rgba(0, 0, 0, 0.40);

  --border-glow-blue:   0 0 0 1px rgba(59, 130, 246, 0.50);
  --border-glow-purple: 0 0 0 1px rgba(139, 92, 246, 0.50);

  --blur-sm:   blur(4px);
  --blur-md:   blur(12px);
  --blur-lg:   blur(24px);
  --blur-xl:   blur(48px);

  --gradient-brand:      linear-gradient(135deg, #2563EB 0%, #7C3AED 100%);
  --gradient-brand-soft: linear-gradient(135deg, rgba(37, 99, 235, 0.18) 0%, rgba(124, 58, 237, 0.18) 100%);
  --gradient-blue:       linear-gradient(135deg, #1A4AC8 0%, #2563EB 100%);
  --gradient-dark:       linear-gradient(180deg, var(--color-base-900) 0%, var(--color-base-950) 100%);
  --gradient-surface:    linear-gradient(135deg, var(--color-base-800) 0%, var(--color-base-900) 100%);
  --gradient-overlay:    linear-gradient(180deg, rgba(8,10,20,0) 0%, rgba(8,10,20,0.95) 100%);
  --gradient-scanline:   repeating-linear-gradient(0deg, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px, transparent 1px, transparent 4px);
  --gradient-grid:       linear-gradient(rgba(59,130,246,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(59,130,246,0.06) 1px, transparent 1px);

  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-expo:   cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-standard:  cubic-bezier(0.2, 0, 0, 1);

  --duration-instant:  80ms;
  --duration-fast:     150ms;
  --duration-normal:   250ms;
  --duration-slow:     400ms;
  --duration-slower:   600ms;

  --transition-default:  all var(--duration-fast) var(--ease-out-expo);
  --transition-color:    color var(--duration-fast) var(--ease-in-out), background-color var(--duration-fast) var(--ease-in-out), border-color var(--duration-fast) var(--ease-in-out);
  --transition-shadow:   box-shadow var(--duration-normal) var(--ease-out-expo);
  --transition-transform: transform var(--duration-fast) var(--ease-spring);

  --z-base:    0;
  --z-raised:  10;
  --z-dropdown: 100;
  --z-sticky:  200;
  --z-overlay: 300;
  --z-modal:   400;
  --z-toast:   500;
  --z-tooltip: 600;
}

/* ─────────────────────────── Base / reset ─────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--fg-primary);
  background-color: var(--bg-page);
  letter-spacing: var(--tracking-normal);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
  color: var(--fg-primary);
}

a {
  color: var(--brand-primary);
  text-decoration: none;
  transition: var(--transition-color);
}

a:hover {
  color: var(--color-blue-300);
}

code, pre, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

::selection {
  background-color: rgba(59, 130, 246, 0.35);
  color: var(--fg-primary);
}

:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

::placeholder {
  color: var(--fg-muted);
  opacity: 1;
}

img, svg {
  display: block;
  max-width: 100%;
}

button {
  cursor: pointer;
  font-family: var(--font-body);
}

input, textarea, select {
  font-family: var(--font-body);
  font-size: var(--text-base);
}

/* ── Shared NL/EN language toggle (see lang.js) ── */
.lang-switch {
  display: inline-flex; align-items: center; padding: 3px; border-radius: var(--radius-full);
  background: var(--bg-surface-raised); border: 1px solid var(--border-default); gap: 2px;
}
.lang-switch button {
  border: none; background: transparent; cursor: pointer; padding: 5px 11px; border-radius: var(--radius-full);
  font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.04em;
  color: var(--fg-muted); transition: all var(--duration-fast) var(--ease-out-expo);
}
.lang-switch button.active { background: var(--color-blue-500); color: #fff; box-shadow: var(--glow-subtle); }