/* ========================================
   IZNM Design System v1.0
   Variables & Design Tokens
   ======================================== */

:root {
  /* Colors - Base */
  --iznm-black: #000000;
  --iznm-bg-deep: #1a1a1a;
  --iznm-bg-raised: #2a2a2a;
  --iznm-bg-surface: rgba(255,255,255,0.03);

  /* Colors - Text */
  --iznm-text-main: #dddddd;
  --iznm-text-sub: #888888;
  --iznm-text-muted: #666666;

  /* Colors - Border */
  --iznm-border-light: #444444;
  --iznm-border-dark: #333333;

  /* Colors - Accent */
  --iznm-gold: #d4a574;
  --iznm-metal: #c0c0c0;
  --iznm-red: #c0392b;

  /* Typography - Fonts */
  --iznm-font-ja: "Noto Sans JP", sans-serif;
  --iznm-font-en: "Inter", system-ui, sans-serif;

  /* Typography - Sizes */
  --iznm-text-xs: 0.75rem;
  --iznm-text-sm: 0.875rem;
  --iznm-text-base: 1rem;
  --iznm-text-lg: 1.125rem;
  --iznm-text-xl: 1.25rem;
  --iznm-text-2xl: 1.5rem;
  --iznm-text-3xl: 2rem;

  /* Typography - Weights */
  --iznm-font-normal: 400;
  --iznm-font-medium: 500;
  --iznm-font-bold: 700;

  /* Typography - Leading */
  --iznm-leading-tight: 1.4;
  --iznm-leading-normal: 1.6;
  --iznm-leading-relaxed: 1.8;

  /* Typography - Tracking */
  --iznm-tracking-tight: -0.02em;
  --iznm-tracking-normal: 0;
  --iznm-tracking-wide: 0.05em;
  --iznm-tracking-wider: 0.1em;

  /* Spacing */
  --iznm-space-1: 4px;
  --iznm-space-2: 8px;
  --iznm-space-3: 12px;
  --iznm-space-4: 16px;
  --iznm-space-5: 20px;
  --iznm-space-6: 24px;
  --iznm-space-8: 32px;
  --iznm-space-10: 40px;
  --iznm-space-12: 48px;
  --iznm-space-16: 64px;
  --iznm-space-20: 80px;
  --iznm-space-24: 96px;

  /* Shadows */
  --iznm-shadow-out: 6px 6px 14px #111, -4px -4px 10px #2c2c2c;
  --iznm-shadow-in: inset 4px 4px 10px #111, inset -3px -3px 8px #2c2c2c;
  --iznm-shadow-btn: 5px 5px 12px #111, -3px -3px 8px #2a2a2a;
  --iznm-shadow-card: 0 4px 20px rgba(0,0,0,0.3);
  --iznm-shadow-subtle: inset 0 1px 0 rgba(255,255,255,0.05);
  --iznm-shadow-input: inset 0 2px 4px rgba(0,0,0,0.2);

  /* Border Radius */
  --iznm-radius-none: 0;
  --iznm-radius-sm: 2px;
  --iznm-radius-md: 4px;
  --iznm-radius-lg: 8px;
  --iznm-radius-full: 9999px;

  /* Transitions */
  --iznm-transition-fast: 0.15s ease;
  --iznm-transition-normal: 0.2s ease;
  --iznm-transition-slow: 0.3s ease;

  /* Content Width */
  --iznm-width-content: 460px;
  --iznm-width-text: 600px;
  --iznm-width-wide: 800px;
  --iznm-width-max: 1200px;
}