/**
 * TRON Wiki — Design Tokens
 * Premium dev-docs design system
 */

:root {
  /* ── Color primitives ── */
  --color-white: #FFFFFF;
  --color-black: #09090B;
  --color-ink: #18181B;
  --color-ink-soft: #3F3F46;
  --color-muted: #71717A;
  --color-muted-light: #A1A1AA;
  --color-line: #E4E4E7;
  --color-line-subtle: #F4F4F5;
  --color-canvas: #FAFAFA;
  --color-surface: #FFFFFF;
  --color-surface-raised: #FFFFFF;
  --color-sidebar: #F7F7F8;

  /* Brand */
  --color-brand: #FF060A;
  --color-brand-soft: #FFF1F1;
  --color-brand-muted: #FFB3B5;

  /* Accent — refined cobalt */
  --color-accent: #2563EB;
  --color-accent-hover: #1D4ED8;
  --color-accent-soft: #EFF6FF;
  --color-accent-muted: #BFDBFE;
  --color-accent-ink: #1E40AF;

  /* Semantic */
  --color-success: #059669;
  --color-success-soft: #ECFDF5;
  --color-success-ink: #047857;
  --color-warning: #D97706;
  --color-warning-soft: #FFFBEB;
  --color-warning-ink: #B45309;
  --color-danger: #DC2626;
  --color-danger-soft: #FEF2F2;
  --color-danger-ink: #B91C1C;
  --color-info: #0284C7;
  --color-info-soft: #F0F9FF;
  --color-info-ink: #0369A1;

  /* ── Typography ── */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --text-xs: 0.75rem;      /* 12px */
  --text-sm: 0.8125rem;    /* 13px */
  --text-base: 0.9375rem;  /* 15px */
  --text-md: 1rem;         /* 16px */
  --text-lg: 1.125rem;     /* 18px */
  --text-xl: 1.25rem;      /* 20px */
  --text-2xl: 1.5rem;      /* 24px */
  --text-3xl: 1.875rem;    /* 30px */
  --text-4xl: 2.25rem;     /* 36px */
  --text-5xl: 2.75rem;     /* 44px */

  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  --tracking-tight: -0.025em;
  --tracking-normal: -0.011em;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.08em;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ── Spacing (4px grid) ── */
  --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 */

  /* ── Layout ── */
  --sidebar-width: 272px;
  --toc-width: 220px;
  /* Match sidebar brand area height (~68px with current spacing) */
  --topbar-height: 68px;
  --content-max: 720px;
  --page-max: none;
  --page-gutter: var(--space-8);

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

  /* ── Shadows ── */
  --shadow-xs: 0 1px 2px rgba(9, 9, 11, 0.04);
  --shadow-sm: 0 1px 3px rgba(9, 9, 11, 0.06), 0 1px 2px rgba(9, 9, 11, 0.04);
  --shadow-md: 0 4px 12px rgba(9, 9, 11, 0.06), 0 2px 4px rgba(9, 9, 11, 0.04);
  --shadow-lg: 0 12px 32px rgba(9, 9, 11, 0.08), 0 4px 8px rgba(9, 9, 11, 0.04);
  --shadow-focus: 0 0 0 3px rgba(37, 99, 235, 0.18);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* ── Motion ── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --duration-fast: 120ms;
  --duration-normal: 200ms;
  --duration-slow: 320ms;

  /* ── Z-index ── */
  --z-sidebar: 40;
  --z-topbar: 50;
  --z-overlay: 60;
  --z-modal: 70;

  /* ── Semantic aliases ── */
  --bg: var(--color-canvas);
  --bg-surface: var(--color-surface);
  --bg-sidebar: var(--color-sidebar);
  --text: var(--color-ink);
  --text-secondary: var(--color-ink-soft);
  --text-muted: var(--color-muted);
  --border: var(--color-line);
  --border-subtle: var(--color-line-subtle);
  --link: var(--color-accent);
  --link-hover: var(--color-accent-hover);
}

@media (prefers-color-scheme: dark) {
  :root.auto-theme {
    --color-white: #09090B;
    --color-black: #FAFAFA;
    --color-ink: #F4F4F5;
    --color-ink-soft: #D4D4D8;
    --color-muted: #A1A1AA;
    --color-muted-light: #71717A;
    --color-line: #27272A;
    --color-line-subtle: #1C1C1F;
    --color-canvas: #09090B;
    --color-surface: #111113;
    --color-surface-raised: #18181B;
    --color-sidebar: #0F0F11;
    --color-accent: #93C5FD;
    --color-accent-hover: #BFDBFE;
    --color-accent-soft: rgba(147, 197, 253, 0.1);
    --color-accent-muted: rgba(147, 197, 253, 0.22);
    --color-accent-ink: #DBEAFE;
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
    --shadow-focus: 0 0 0 3px rgba(147, 197, 253, 0.2);
  }
}

/* Manual theme toggle (main.js sets data-theme="dark") */
:root[data-theme="dark"] {
  --color-white: #09090B;
  --color-black: #FAFAFA;
  --color-ink: #F4F4F5;
  --color-ink-soft: #D4D4D8;
  --color-muted: #A1A1AA;
  --color-muted-light: #71717A;
  --color-line: #27272A;
  --color-line-subtle: #1C1C1F;
  --color-canvas: #09090B;
  --color-surface: #111113;
  --color-surface-raised: #18181B;
  --color-sidebar: #0F0F11;
  --color-accent: #93C5FD;
  --color-accent-hover: #BFDBFE;
  --color-accent-soft: rgba(147, 197, 253, 0.1);
  --color-accent-muted: rgba(147, 197, 253, 0.22);
  --color-accent-ink: #DBEAFE;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-focus: 0 0 0 3px rgba(147, 197, 253, 0.2);
}