/* ═══════════════════════════════════════════════════════════════
   PCM Internal Tools Design System — tokens.css v1.2
   All design tokens: colors, spacing, typography, shadows, z-index
   Light mode default. Dark mode via @media + .dark class override.
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --neutral-50: #FAF9F7;
  --neutral-100: #F5F3F0;
  --neutral-200: #E8E6E1;
  --neutral-300: #D8D4CF;
  --neutral-400: #B0AAA2;
  --neutral-500: #8A857E;
  --neutral-600: #6B665F;
  --neutral-700: #4A4A42;
  --neutral-800: #2C2C27;
  --neutral-900: #1A1A16;

  --color-primary: #2E3F6E;
  --color-primary-hover: #243358;
  --color-primary-light: #E8EEF8;
  --color-danger: #E8656A;
  --color-danger-hover: #D4525A;
  --color-danger-light: #FDE8E9;
  --color-success: #C8D84A;
  --color-success-dark: #6B7D20;
  --color-success-light: #F4F7E0;
  --color-info: #6B8CC4;
  --color-info-light: #E8EEF8;

  --semantic-error: #DC2626;
  --semantic-error-light: #FEE2E2;
  --semantic-warning: #D97706;
  --semantic-warning-light: #FEF3DB;
  --semantic-success: #059669;
  --semantic-success-light: #D1FAE5;
  --semantic-info: #2563EB;
  --semantic-info-light: #DBEAFE;

  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Fraunces', Georgia, serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  --text-page-title: 600 22px/1.2 var(--font-display);
  --text-section-title-size: 16px;
  --text-section-title-weight: 700;
  --text-body-size: 15px;
  --text-body-weight: 400;
  --text-body-semibold-weight: 600;
  --text-secondary-size: 13px;
  --text-caption-size: 11px;
  --text-caption-weight: 600;
  --text-mono-size: 13px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
  --shadow-xl: 0 16px 48px rgba(0,0,0,0.16);

  --z-sticky: 100;
  --z-dropdown: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;

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

  --nav-height: 68px;
  --header-height: 60px;
  --content-max-width: 720px;
  --sidebar-width: 240px;
  --sidebar-collapsed: 72px;
}

@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    --neutral-50: #1A1A16;
    --neutral-100: #222220;
    --neutral-200: #2C2C27;
    --neutral-300: #3A3A33;
    --neutral-400: #5A5A52;
    --neutral-500: #7A7A72;
    --neutral-600: #9A9A90;
    --neutral-700: #B5B5AA;
    --neutral-800: #D5D5CC;
    --neutral-900: #F0F0E8;
    --color-primary: #7B9AD4;
    --color-primary-hover: #9BB4E0;
    --color-primary-light: #2A3350;
    --color-danger: #F09090;
    --color-danger-hover: #F5A5A5;
    --color-danger-light: #3A2228;
    --color-success: #D4E06A;
    --color-success-dark: #A8B840;
    --color-success-light: #2A2E1A;
    --color-info: #8AAAD4;
    --color-info-light: #2A3350;
    --semantic-error: #F87171;
    --semantic-error-light: #3A1A1A;
    --semantic-warning: #FBBF24;
    --semantic-warning-light: #3A2E1A;
    --semantic-success: #34D399;
    --semantic-success-light: #1A3A2A;
    --semantic-info: #60A5FA;
    --semantic-info-light: #1A2A3A;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
    --shadow-md: 0 2px 8px rgba(0,0,0,0.4);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.5);
    --shadow-xl: 0 16px 48px rgba(0,0,0,0.6);
  }
}

/* .dark MUST appear AFTER the @media block — source order is load-bearing */
.dark {
  --neutral-50: #1A1A16;
  --neutral-100: #222220;
  --neutral-200: #2C2C27;
  --neutral-300: #3A3A33;
  --neutral-400: #5A5A52;
  --neutral-500: #7A7A72;
  --neutral-600: #9A9A90;
  --neutral-700: #B5B5AA;
  --neutral-800: #D5D5CC;
  --neutral-900: #F0F0E8;
  --color-primary: #7B9AD4;
  --color-primary-hover: #9BB4E0;
  --color-primary-light: #2A3350;
  --color-danger: #F09090;
  --color-danger-hover: #F5A5A5;
  --color-danger-light: #3A2228;
  --color-success: #D4E06A;
  --color-success-dark: #A8B840;
  --color-success-light: #2A2E1A;
  --color-info: #8AAAD4;
  --color-info-light: #2A3350;
  --semantic-error: #F87171;
  --semantic-error-light: #3A1A1A;
  --semantic-warning: #FBBF24;
  --semantic-warning-light: #3A2E1A;
  --semantic-success: #34D399;
  --semantic-success-light: #1A3A2A;
  --semantic-info: #60A5FA;
  --semantic-info-light: #1A2A3A;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.4);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.5);
  --shadow-xl: 0 16px 48px rgba(0,0,0,0.6);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  font-weight: var(--text-body-weight);
  line-height: 1.5;
  color: var(--neutral-800);
  background: var(--neutral-50);
  min-height: 100dvh;
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
::selection { background: var(--color-primary-light); color: var(--neutral-900); }