/*
 * Runetto Design System — canonical tokens v11 (sage).
 *
 * Foundation only: this file exposes design tokens without changing
 * legacy screen styling. Product/business logic is outside design-system scope.
 */

:root {
  --primary-50: #f2f9f5;
  --primary-100: #e3f1ea;
  --primary-200: #c8e2d6;
  --primary-300: #9fc9b6;
  --primary-400: #73a992;
  --primary-500: #528973;
  --primary-600: #3a6a57;
  --primary-700: #2c5545;
  --primary-800: #204134;
  --primary-900: #162f25;

  --canvas: #e6eae7;

  --neutral-0: #ffffff;
  --neutral-50: #f4f7f5;
  --neutral-100: #f0f3f1;
  --neutral-200: #e2e6e3;
  --neutral-300: #d4d8d5;
  --neutral-400: #b6bbb6;
  --neutral-500: #888e89;
  --neutral-600: #646964;
  --neutral-700: #4a4e4b;
  --neutral-800: #2e312e;
  --neutral-900: #1c1f1c;

  --success-bg: #e4f8d9;
  --success-text: #3e6c1d;
  --warning-bg: #ffefd8;
  --warning-text: #8c5f0e;
  --info-bg: #e6f2fe;
  --info-text: #215d96;
  --neutral-badge-bg: var(--neutral-100);
  --neutral-badge-text: var(--neutral-600);
  --danger-50: #fceae8;
  --danger-500: #d64535;
  --danger-600: #b93a2c;
  --danger-700: #93362a;
  --notification: #f0405f;

  --shadow-card: 0 2px 8px rgba(29, 31, 35, 0.03);
  --shadow-card-hover: 0 8px 24px rgba(29, 31, 35, 0.07);
  --shadow-dropdown: 0 16px 44px rgba(29, 31, 35, 0.16);
  --shadow-dropdown-lg: 0 18px 54px rgba(29, 31, 35, 0.18);
  --shadow-modal: 0 24px 80px rgba(29, 31, 35, 0.24);

  --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-xs: 8px;
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 22px;
  --radius-2xl: 28px;
  --radius-full: 9999px;

  --content-max: 1600px;
  --wizard-max: 1400px;
  --form-max: 880px;
  --reading-max: 720px;
  --auth-frame: 1180px;

  --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Manrope", "Inter", system-ui, sans-serif;
}

/* Runetto semantic typography */
.t-page-title {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 29px;
  font-weight: 700;
  letter-spacing: -0.5px;
}

.t-kpi-value {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 34px;
  font-weight: 700;
  letter-spacing: -0.5px;
}

.t-hero {
  font-family: var(--font-display);
  font-size: 36px;
  line-height: 42px;
  font-weight: 700;
  letter-spacing: -0.8px;
}

.t-dialog-title {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: 0;
}

.t-panel-title {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: 0;
}

.t-nav-item {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 18px;
  font-weight: 500;
  letter-spacing: 0;
}

.t-body-strong {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
  letter-spacing: 0;
}

.t-body {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: 0;
}

.t-body-medium {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0;
}

.t-search-input {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  letter-spacing: 0;
}

.t-label {
  font-family: var(--font-sans);
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0;
}

.t-caption {
  font-family: var(--font-sans);
  font-size: 10px;
  line-height: 14px;
  font-weight: 500;
  letter-spacing: 0;
}

.t-overline {
  font-family: var(--font-sans);
  font-size: 10px;
  line-height: 14px;
  font-weight: 700;
  letter-spacing: 0.11em;
}