/**
 * Ravouex Portal — Clinical Modern design tokens
 * Compact, high-density UI for power users.
 */
:root {
  /* Surfaces */
  --surface: #f9f9ff;
  --surface-dim: #dad9e0;
  --surface-bright: #f9f9ff;
  --surface-container-lowest: #ffffff;
  --surface-container-low: #f3f3fa;
  --surface-container: #eeedf4;
  --surface-container-high: #e8e7ee;
  --surface-container-highest: #e2e2e8;
  --on-surface: #1a1b20;
  --on-surface-variant: #434751;
  --inverse-surface: #2f3035;
  --inverse-on-surface: #f1f0f7;
  --outline: #747782;
  --outline-variant: #c3c6d2;
  --surface-tint: #365da4;

  /* Brand */
  --primary: #002f6d;
  --on-primary: #ffffff;
  --primary-container: #1a468c;
  --on-primary-container: #95b7ff;
  --inverse-primary: #aec6ff;

  --secondary: #505f76;
  --on-secondary: #ffffff;
  --secondary-container: #d0e1fb;
  --on-secondary-container: #54647a;

  --tertiary: #542400;
  --on-tertiary: #ffffff;
  --tertiary-container: #763600;
  --on-tertiary-container: #fda165;

  --error: #ba1a1a;
  --on-error: #ffffff;
  --error-container: #ffdad6;
  --on-error-container: #93000a;

  --primary-fixed: #d8e2ff;
  --primary-fixed-dim: #aec6ff;
  --on-primary-fixed: #001a42;
  --on-primary-fixed-variant: #18458a;

  --secondary-fixed: #d3e4fe;
  --secondary-fixed-dim: #b7c8e1;
  --on-secondary-fixed: #0b1c30;
  --on-secondary-fixed-variant: #38485d;

  --tertiary-fixed: #ffdbc8;
  --tertiary-fixed-dim: #ffb68a;
  --on-tertiary-fixed: #321300;
  --on-tertiary-fixed-variant: #743500;

  --background: #f9f9ff;
  --on-background: #1a1b20;
  --surface-variant: #e2e2e8;

  /* Semantic */
  --success: #0f766e;
  --warning: #b45309;

  /* Typography */
  --font-sans: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --display-size: 24px;
  --display-weight: 600;
  --display-lh: 32px;
  --display-tracking: -0.02em;

  --headline-md-size: 18px;
  --headline-sm-size: 16px;
  --body-lg-size: 15px;
  --body-md-size: 14px;
  --body-sm-size: 13px;
  --label-md-size: 12px;
  --label-sm-size: 11px;

  /* Shape */
  --radius-sm: 0.125rem;
  --radius: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-full: 9999px;
  --radius-tag: 0.5rem;

  /* Spacing (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --container-padding: 16px;
  --gutter: 12px;
  --row-height-dense: 32px;
  --row-height-standard: 40px;

  /* Elevation */
  --border-subtle: 1px solid #e2e8f0;
  --shadow-overlay: 0 4px 16px rgba(26, 27, 32, 0.1);
}

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

html {
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--body-md-size);
  line-height: 20px;
  font-weight: 400;
  color: var(--on-surface);
  background: var(--background);
  font-variant-numeric: tabular-nums;
}

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

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

a:hover {
  text-decoration: underline;
}