/* ===== PRECISION ORCHESTRATOR — Design System Tokens ===== */

:root {
  /* Foundation */
  --surface: #12131b;
  --surface-dim: #12131b;
  --surface-bright: #383941;
  --surface-container-lowest: #0d0e15;
  --surface-container-low: #1a1b23;
  --surface-container: #1e1f27;
  --surface-container-high: #292932;
  --surface-container-highest: #33343d;
  --surface-variant: #33343d;

  /* Primary (Yellow) */
  --primary: #fffaf4;
  --primary-container: #ffdd00;
  --primary-fixed: #ffe251;
  --primary-fixed-dim: #e4c600;
  --on-primary: #393000;
  --on-primary-container: #716100;

  /* Text */
  --on-surface: #e3e1ed;
  --on-surface-variant: #cfc6ab;
  --on-background: #e3e1ed;

  /* Secondary */
  --secondary: #c5c6cd;
  --secondary-container: #47494f;
  --on-secondary: #2e3036;

  /* Tertiary */
  --tertiary: #fffaf7;
  --tertiary-container: #ffdb78;
  --on-tertiary: #3d2f00;

  /* Error */
  --error: #ffb4ab;
  --error-container: #93000a;
  --on-error-container: #ffdad6;

  /* Outline */
  --outline: #989177;
  --outline-variant: #4c4732;

  /* Inverse */
  --inverse-surface: #e3e1ed;
  --inverse-on-surface: #2f3038;
  --inverse-primary: #6d5e00;

  /* Typography */
  --font-family: 'Inter', sans-serif;
  --display-lg: 3.5rem;
  --display-md: 2.75rem;
  --headline-lg: 2rem;
  --headline-md: 1.75rem;
  --headline-sm: 1.5rem;
  --title-lg: 1.375rem;
  --title-md: 1rem;
  --body-lg: 1rem;
  --body-md: 0.875rem;
  --body-sm: 0.75rem;
  --label-lg: 0.875rem;
  --label-md: 0.75rem;
  --label-sm: 0.6875rem;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;

  /* Radii */
  --radius-sm: 0.125rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;

  /* Shadows (Ambient — tinted, not black) */
  --shadow-ambient: 0 4px 24px rgba(227, 225, 237, 0.04);
  --shadow-elevated: 0 8px 40px rgba(227, 225, 237, 0.08);

  /* Glass */
  --glass-bg: rgba(26, 27, 35, 0.8);
  --glass-blur: 24px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;
  --transition-slide: 350ms cubic-bezier(0.4, 0, 0.2, 1);
}


/* ===== BASE RESET ===== */

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

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-family);
  font-size: var(--body-md);
  color: var(--on-surface);
  background-color: var(--surface);
  line-height: 1.5;
  min-height: 100vh;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  border: none;
  outline: none;
}

ul, ol {
  list-style: none;
}

table {
  border-collapse: collapse;
  width: 100%;
}


/* ===== TYPOGRAPHY ===== */

.display-lg {
  font-size: var(--display-lg);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.display-md {
  font-size: var(--display-md);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.headline-lg {
  font-size: var(--headline-lg);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.headline-md {
  font-size: var(--headline-md);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.headline-sm {
  font-size: var(--headline-sm);
  font-weight: 700;
  line-height: 1.3;
}

.title-lg {
  font-size: var(--title-lg);
  font-weight: 700;
  line-height: 1.35;
}

.title-md {
  font-size: var(--title-md);
  font-weight: 600;
  line-height: 1.4;
}

.body-lg {
  font-size: var(--body-lg);
  font-weight: 400;
  line-height: 1.5;
}

.body-md {
  font-size: var(--body-md);
  font-weight: 400;
  line-height: 1.5;
}

.body-sm {
  font-size: var(--body-sm);
  font-weight: 400;
  line-height: 1.5;
}

.label-lg {
  font-size: var(--label-lg);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.label-md {
  font-size: var(--label-md);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.label-sm {
  font-size: var(--label-sm);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.text-muted {
  color: var(--on-surface-variant);
}

.text-accent {
  color: var(--primary-container);
}

.text-error {
  color: var(--error);
}

/* Material Symbols base */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
  line-height: 1;
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--surface-container-highest);
  border-radius: var(--radius-md);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--surface-bright);
}