/* ═══════════════════════════════════════════════════════════
   SEOGUM Design Tokens — v2.0
   Single source of truth for all visual values.
   Every color, spacing, radius, shadow, and font value
   in the system MUST reference a token from this file.
   ═══════════════════════════════════════════════════════════ */

:root {

  /* ─── Spacing (8pt grid) ────────────────────────────── */
  --sg-space-1: 4px;
  --sg-space-2: 8px;
  --sg-space-3: 12px;
  --sg-space-4: 16px;
  --sg-space-5: 20px;
  --sg-space-6: 24px;
  --sg-space-7: 28px;
  --sg-space-8: 32px;
  --sg-space-10: 40px;
  --sg-space-12: 48px;
  --sg-space-16: 64px;

  /* ─── Color: Neutral ────────────────────────────────── */
  --sg-neutral-0: #ffffff;
  --sg-neutral-50: #f8fafc;
  --sg-neutral-100: #f1f5f9;
  --sg-neutral-200: #e2e8f0;
  --sg-neutral-300: #cbd5e1;
  --sg-neutral-400: #94a3b8;
  --sg-neutral-500: #64748b;
  --sg-neutral-600: #475569;
  --sg-neutral-700: #334155;
  --sg-neutral-800: #1e293b;
  --sg-neutral-900: #0f172a;

  /* ─── Color: Primary (SEOGUM Brand Blue #1C82FF) ───── */
  --sg-primary-50: #EFF6FF;
  --sg-primary-100: #DBEAFE;
  --sg-primary-200: #93C5FD;
  --sg-primary-300: #60A5FA;
  --sg-primary-400: #3b82f6;
  --sg-primary-500: #1C82FF;
  --sg-primary-600: #1C82FF;
  --sg-primary-700: #0B6FE8;
  --sg-primary-800: #084B9E;

  /* ─── Color: Success ────────────────────────────────── */
  --sg-success-50: #f0fdf4;
  --sg-success-100: #dcfce7;
  --sg-success-200: #bbf7d0;
  --sg-success-300: #86efac;
  --sg-success-400: #4ade80;
  --sg-success-500: #22c55e;
  --sg-success-600: #16a34a;
  --sg-success-700: #15803d;

  /* ─── Color: Warning ────────────────────────────────── */
  --sg-warning-50: #fffbeb;
  --sg-warning-100: #fef3c7;
  --sg-warning-200: #fde68a;
  --sg-warning-300: #fcd34d;
  --sg-warning-400: #fbbf24;
  --sg-warning-500: #f59e0b;
  --sg-warning-600: #d97706;
  --sg-warning-700: #b45309;
  --sg-warning-800: #92400e;
  --sg-warning-900: #78350f;

  /* ─── Color: Danger ─────────────────────────────────── */
  --sg-danger-50: #fef2f2;
  --sg-danger-100: #fee2e2;
  --sg-danger-400: #f87171;
  --sg-danger-500: #ef4444;
  --sg-danger-600: #dc2626;
  --sg-danger-700: #b91c1c;

  /* ─── Color: AI Accent (Purple) ─────────────────────── */
  --sg-ai-50: #faf5ff;
  --sg-ai-100: #f3e8ff;
  --sg-ai-500: #8b5cf6;
  --sg-ai-600: #7c3aed;
  --sg-ai-700: #6d28d9;

  /* ─── Typography ────────────────────────────────────── */
  --sg-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --sg-font-display: 30px;
  --sg-font-h1: 24px;
  --sg-font-h2: 18px;
  --sg-font-h3: 15px;
  --sg-font-body: 14px;
  --sg-font-label: 12px;
  --sg-font-caption: 11px;

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

  --sg-tracking-tight: -0.025em;
  --sg-tracking-normal: 0;
  --sg-tracking-wide: 0.01em;

  --sg-leading-tight: 1.25;
  --sg-leading-normal: 1.5;
  --sg-leading-relaxed: 1.625;

  /* ─── Border Radius ─────────────────────────────────── */
  --sg-radius-sm: 4px;
  --sg-radius-md: 6px;
  --sg-radius-lg: 8px;
  --sg-radius-xl: 12px;
  --sg-radius-full: 9999px;

  /* ─── Shadows ───────────────────────────────────────── */
  --sg-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --sg-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --sg-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
  --sg-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.04);

  --sg-shadow-focus: 0 0 0 3px rgba(28, 130, 255, 0.15);
  --sg-shadow-focus-danger: 0 0 0 3px rgba(239, 68, 68, 0.15);

  --sg-shadow-btn-primary: 0 1px 3px rgba(28, 130, 255, 0.3);
  --sg-shadow-btn-primary-hover: 0 4px 12px rgba(28, 130, 255, 0.3);
  --sg-shadow-btn-primary-active: inset 0 1px 2px rgba(0, 0, 0, 0.1);

  --sg-shadow-dropdown: 0 4px 12px rgba(0, 0, 0, 0.08), 0 0 1px rgba(0, 0, 0, 0.05);
  --sg-shadow-float: 0 8px 24px rgba(0, 0, 0, 0.12), 0 0 1px rgba(0, 0, 0, 0.05);

  /* ─── Layout ────────────────────────────────────────── */
  --sg-container-max: 1200px;
  --sg-container-pad: 24px;
  --sg-nav-height: 56px;

  /* ─── Motion ────────────────────────────────────────── */
  --sg-duration-fast: 150ms;
  --sg-duration-normal: 200ms;
  --sg-duration-slow: 300ms;
  --sg-easing-default: ease-out;
  --sg-easing-bounce: cubic-bezier(0.16, 1, 0.3, 1);

  --sg-transition-fast: 150ms ease-out;
  --sg-transition-normal: 200ms ease-out;
  --sg-transition-slow: 300ms ease-out;

  /* ─── Z-Index ───────────────────────────────────────── */
  --sg-z-dropdown: 100;
  --sg-z-sticky: 200;
  --sg-z-modal: 300;
  --sg-z-toast: 400;
}