/*
 * Jumpstart Design System — Primitive Scales
 *
 * Raw physical values only. No semantic meaning.
 * These feed into foundations — never consume directly in components.
 */

:root {
  /* =========================================================
     COLOR — SCALES ONLY
     ========================================================= */

  /* Neutral */
  --ds-color-white: #ffffff;
  --ds-color-black: #101318;

  /* Gray scale */
  --ds-color-gray-50: #f9fafb;
  --ds-color-gray-100: #f3f4f6;
  --ds-color-gray-200: #e5e7eb;
  --ds-color-gray-300: #d1d5db;
  --ds-color-gray-400: #9ca3af;
  --ds-color-gray-500: #6b7280;
  --ds-color-gray-600: #4b5563;
  --ds-color-gray-700: #374151;
  --ds-color-gray-800: #141b2d;
  --ds-color-gray-900: #111827;

  /* Navy scale */
  --ds-color-navy-100: #c9d2e1;
  --ds-color-navy-900: #0a122a;

  /* Green scale */
  --ds-color-green-100: #ecfdf0;
  --ds-color-green-200: #ccf1d2;
  --ds-color-green-300: #8fdaa0;
  --ds-color-green-400: #2dcd80;
  --ds-color-green-500: #21cc36;

  /* Yellow scale */
  --ds-color-yellow-200: #fbe9a2;
  --ds-color-yellow-400: #eecf62;
  --ds-color-yellow-500: #f0c808;
  --ds-color-yellow-700: #7a6100;

  /* Red scale */
  --ds-color-red-200: #f8cccc;
  --ds-color-red-400: #ee9d9d;
  --ds-color-red-600: #d32f2f;

  /* Pink scale */
  --ds-color-pink-200: #f7cde1;
  --ds-color-pink-500: #e81167;

  /* Blue scale */
  --ds-color-blue-200: #cfe3f9;
  --ds-color-blue-500: #4a90e2;

  /* Signal Blue scale */
  --ds-color-signal-blue-200: #d1e5eb;
  --ds-color-signal-blue-500: #69a2b0;

  /* Teal scale */
  --ds-color-teal-100: #e6f8f3;
  --ds-color-teal-200: #c6eee4;
  --ds-color-teal-500: #09b180;

  /* Platinum scale */
  --ds-color-platinum-200: #e6e5e3;
  --ds-color-platinum-500: #dad9d7;

  /* Brand surface tints */
  --ds-color-soft: #f7f7f7;
  --ds-color-mist: #f0f0f0;
  --ds-color-medium-gray: #636466;

  /* =========================================================
     TYPOGRAPHY — SCALE ONLY
     ========================================================= */

  --ds-font-family-sans: "Raleway", "Segoe UI", sans-serif;

  --ds-font-weight-300: 300;
  --ds-font-weight-400: 400;
  --ds-font-weight-500: 500;
  --ds-font-weight-600: 600;
  --ds-font-weight-700: 700;

  /* Font size scale (in rem) */
  --ds-font-size-100: 0.625rem; /* 10px */
  --ds-font-size-150: 0.6875rem; /* 11px */
  --ds-font-size-200: 0.75rem; /* 12px */
  --ds-font-size-250: 0.8125rem; /* 13px */
  --ds-font-size-300: 0.875rem; /* 14px */
  --ds-font-size-400: 1rem; /* 16px */
  --ds-font-size-500: 1.125rem; /* 18px */
  --ds-font-size-600: 1.25rem; /* 20px */
  --ds-font-size-700: 1.5rem; /* 24px */
  --ds-font-size-800: 2.25rem; /* 36px */
  --ds-font-size-900: 3rem; /* 48px */

  --ds-line-height-100: 1.5;
  --ds-line-height-200: 1.25;
  --ds-line-height-300: 1.75;

  --ds-letter-spacing-tight: -0.03em;
  --ds-letter-spacing-wide: 0.2em;
  --ds-letter-spacing-medium: 0.06em;

  /* =========================================================
     SPACING SCALE (4px grid)
     ========================================================= */

  --ds-space-0: 0;
  --ds-space-100: 0.25rem; /* 4px */
  --ds-space-200: 0.5rem; /* 8px */
  --ds-space-300: 0.75rem; /* 12px */
  --ds-space-400: 1rem; /* 16px */
  --ds-space-500: 1.25rem; /* 20px */
  --ds-space-600: 1.5rem; /* 24px */
  --ds-space-800: 2rem; /* 32px */
  --ds-space-900: 2.25rem; /* 36px */
  --ds-space-1000: 2.5rem; /* 40px */
  --ds-space-1100: 2.75rem; /* 44px */
  --ds-space-1200: 3rem; /* 48px */
  --ds-space-1300: 3.25rem; /* 52px */
  --ds-space-1600: 4rem; /* 64px */
  --ds-space-2000: 5rem; /* 80px */
  --ds-space-2400: 6rem; /* 96px */
  --ds-space-2800: 7rem; /* 112px */
  --ds-space-3200: 8rem; /* 128px */
  --ds-space-3400: 8.5rem; /* 136px */
  --ds-space-3600: 9rem; /* 144px */
  --ds-space-4000: 10rem; /* 160px */
  --ds-space-4500: 11.25rem; /* 180px */
  --ds-space-5000: 12.5rem; /* 200px */
  --ds-space-5500: 13.75rem; /* 220px */
  --ds-space-6000: 15rem; /* 240px */
  --ds-space-10500: 26.25rem; /* 420px */
  --ds-space-50000: 125rem; /* 2000px - expandable content max */

  /* =========================================================
     RADIUS
     ========================================================= */

  --ds-radius-100: 0.5rem; /* 8px */
  --ds-radius-200: 0.75rem; /* 12px */
  --ds-radius-300: 1rem; /* 16px */
  --ds-radius-full: 9999px;

  /* =========================================================
     BORDER
     ========================================================= */

  --ds-border-width-100: 1px;
  --ds-border-width-200: 2px;

  /* =========================================================
     ELEVATION
     ========================================================= */

  --ds-shadow-100: 0 4px 14px rgba(10, 18, 42, 0.06);
  --ds-shadow-200: 0 12px 28px rgba(10, 18, 42, 0.12);
  --ds-shadow-300: 0 6px 20px rgba(10, 18, 42, 0.1);

  /* =========================================================
     MOTION
     ========================================================= */

  --ds-duration-100: 150ms;
  --ds-duration-200: 250ms;
  --ds-duration-300: 400ms;

  --ds-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ds-ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --ds-ease-accelerate: cubic-bezier(0.4, 0, 1, 1);

  /* =========================================================
     OPACITY
     ========================================================= */

  --ds-opacity-100: 1;
  --ds-opacity-75: 0.75;
  --ds-opacity-50: 0.5;
  --ds-opacity-25: 0.25;

  /* =========================================================
     Z-INDEX SCALE
     ========================================================= */

  --ds-z-100: 10;
  --ds-z-200: 50;
  --ds-z-300: 100;
  --ds-z-400: 999;

  /* =========================================================
     BACKGROUND ROLES (Foundations)
     ========================================================= */

  --ds-bg-canvas: var(--ds-color-soft);
  --ds-bg-surface: var(--ds-color-white);
  --ds-bg-subtle: var(--ds-color-gray-50);
  --ds-bg-accent: var(--ds-color-gray-200);
  --ds-bg-inverse: var(--ds-color-navy-900);
  --ds-bg-overlay: rgba(10, 18, 42, 0.55);
  --ds-bg-interactive: var(--ds-color-gray-100);
  --ds-bg-selected: var(--ds-color-green-100);
  --ds-bg-alt: var(--ds-color-mist);
  --ds-bg-progress-track: var(--ds-border-default);

  /* =========================================================
     TEXT ROLES (Foundations)
     ========================================================= */

  --ds-text-primary: var(--ds-color-gray-900);
  --ds-text-secondary: var(--ds-color-medium-gray);
  --ds-text-muted: var(--ds-color-gray-400);
  --ds-text-inverse: var(--ds-color-white);
  --ds-text-heading: var(--ds-color-navy-900);

  /* =========================================================
     BORDER ROLES (Foundations)
     ========================================================= */

  --ds-border-default: var(--ds-color-gray-200);
  --ds-border-strong: var(--ds-color-gray-300);
  --ds-border-subtle: var(--ds-color-gray-100);
  --ds-border-inverse: var(--ds-color-white);
  --ds-border-on-dark: rgba(255, 255, 255, 0.12);

  /* =========================================================
     BRAND & STATE ROLES (Foundations)
     ========================================================= */

  --ds-color-brand: var(--ds-color-green-500);
  --ds-color-brand-hover: var(--ds-color-teal-500);
  --ds-color-brand-active: var(--ds-color-green-400);

  --ds-color-success: var(--ds-color-green-500);
  --ds-color-warning: var(--ds-color-yellow-500);
  --ds-color-danger: var(--ds-color-pink-500);
  --ds-color-info: var(--ds-color-signal-blue-500);

  --ds-color-disabled: var(--ds-color-platinum-500);

  /* =========================================================
     ELEVATION ROLES (Foundations)
     ========================================================= */

  --ds-elevation-surface: var(--ds-shadow-100);
  --ds-elevation-overlay: var(--ds-shadow-200);
  --ds-elevation-brand: 0 4px 14px rgba(33, 204, 54, 0.3);
  --ds-elevation-brand-strong: 0 0 20px rgba(33, 204, 54, 0.45);

  /* =========================================================
     TYPOGRAPHY SEMANTIC (Foundations)
     ========================================================= */

  --ds-typography-display-size: var(--ds-font-size-900);
  --ds-typography-display-weight: var(--ds-font-weight-700);
  --ds-typography-display-line-height: var(--ds-line-height-200);
  --ds-typography-display-letter-spacing: var(--ds-letter-spacing-tight);

  --ds-typography-heading-size: var(--ds-font-size-700);
  --ds-typography-heading-weight: var(--ds-font-weight-700);
  --ds-typography-heading-line-height: var(--ds-line-height-200);

  --ds-typography-body-lg-size: var(--ds-font-size-500);
  --ds-typography-body-lg-weight: var(--ds-font-weight-400);
  --ds-typography-body-lg-line-height: var(--ds-line-height-100);

  --ds-typography-body-size: var(--ds-font-size-400);
  --ds-typography-body-weight: var(--ds-font-weight-400);
  --ds-typography-body-line-height: var(--ds-line-height-100);

  --ds-typography-meta-size: var(--ds-font-size-300);
  --ds-typography-meta-weight: var(--ds-font-weight-600);
  --ds-typography-meta-letter-spacing: var(--ds-letter-spacing-wide);

  --ds-typography-caption-size: var(--ds-font-size-200);
  --ds-typography-caption-weight: var(--ds-font-weight-400);
  --ds-typography-caption-line-height: var(--ds-line-height-100);

  /* =========================================================
     FOCUS (Foundations)
     ========================================================= */

  --ds-focus-ring-color: var(--ds-color-brand);
  --ds-focus-ring-width: var(--ds-border-width-200);

  /* =========================================================
     LAYOUT CONSTRAINTS (Foundations)
     ========================================================= */

  --ds-container-max-width: 1200px;
  --ds-navbar-height: 4.5rem;

  --ds-space-sidebar: var(--ds-space-300);
  --ds-space-sidebar-content: var(--ds-space-600);
}

/* =========================================================
   GLOBAL RESET & BASE STYLES
   ========================================================= */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-family: var(--ds-font-family-sans);
  font-size: var(--ds-typography-body-size);
  font-weight: var(--ds-typography-body-weight);
  line-height: var(--ds-typography-body-line-height);
  color: var(--ds-text-primary);
  background-color: var(--ds-bg-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100vh;
}

a {
  color: var(--ds-color-brand);
  text-decoration: none;
}

a:hover {
  color: var(--ds-color-brand-hover);
}

h1, h2, h3 {
  color: var(--ds-text-heading);
  font-weight: var(--ds-typography-heading-weight);
  line-height: var(--ds-typography-heading-line-height);
}

h1 {
  font-size: var(--ds-typography-display-size);
  letter-spacing: var(--ds-typography-display-letter-spacing);
}

h2 {
  font-size: var(--ds-typography-heading-size);
}

h3 {
  font-size: var(--ds-font-size-600);
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}

/* =========================================================
   UTILITY CLASSES
   ========================================================= */

.workspace-root {
  display: flex;
  min-height: 100vh;
}

.workspace-main {
  flex: 1;
  padding: var(--ds-space-800);
  max-width: var(--ds-container-max-width);
}