/* design_system/tokens.css — Design tokens (:root CSS variables) */

:root {
  --app-sidebar-width: 17rem;
  --app-sidebar-width-collapsed: 4.25rem;
  --app-sidebar-pad-x: 0.875rem;
  --app-sidebar-brand-inline: 0.35rem;
  --app-shell-header-height: 4.25rem;
  --app-shell-header-pad-x: max(
      calc(var(--app-sidebar-pad-x) + var(--app-sidebar-brand-inline)),
      env(safe-area-inset-left, 0px)
  );
  --font-sans: "Montserrat", ui-sans-serif, system-ui, sans-serif;
  /* Type scale — aligned to sidebar hierarchy (micro → display) */
  --text-micro: 0.6875rem;   /* 11px — section labels, eyebrow */
  --text-caption: 0.75rem;   /* 12px — field labels, table headers, badges */
  --text-sm: 0.8125rem;      /* 13px — secondary UI, hints */
  --text-ui: 0.875rem;       /* 14px — nav links, controls, primary UI */
  --text-md: 0.9375rem;      /* 15px — table cells, list items */
  --text-body: 1rem;         /* 16px — body copy, page subtitle */
  --text-lg: 1.0625rem;      /* 17px — card/section titles (= sidebar brand) */
  --text-title: 1.25rem;     /* 20px — page / view titles */
  --text-display: 1.5rem;    /* 24px — stats, hero numbers */
  --brand-blue: #0A4FFF;
  --brand-blue-mid: #2D73FF;
  --brand-blue-light: #7FB3FF;
  --brand-blue-dark: #123A8C;
  --orange: #FF6600;
  --orange-bright: #FF7A1A;
  --orange-dark: #E95A00;
  --orange-on-dark: #FF8446;
  --orange-soft: rgba(255, 102, 0, 0.12);
  --orange-border: rgba(255, 102, 0, 0.28);
  --color-bg: #ffffff;
  --color-bg-alt: #F5F7FA;
  --color-text: #202124;
  --color-text-muted: #5f6368;
  --color-accent: var(--brand-blue);
  --color-accent-hover: var(--brand-blue-dark);
  --color-accent-soft: rgba(10, 79, 255, 0.12);
  --color-border: #e8eaed;
  --sidebar-gradient: linear-gradient(165deg, #123A8C 0%, #0d2a68 48%, #081a42 100%);
  --cta-gradient: linear-gradient(45deg, #2D73FF, #0A4FFF, #123A8C);
  --cta-gradient-hover: linear-gradient(45deg, #4d88ff, #0A4FFF, #0d2a68);
  --radius-input: 0.5rem;
  --radius-control: var(--radius-input);
  --radius-card: 16px;
  --radius-surface: 12px;
  --control-font-size: var(--text-ui);
  --control-padding-y: 0.4375rem;
  --control-padding-x: 0.75rem;
  --control-height: 2.125rem;
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.04);
  --green: #2a9d6e;
  --green-soft: rgba(42, 157, 110, 0.12);
  --green-border: rgba(42, 157, 110, 0.28);
  --blue: var(--brand-blue);
  --blue-soft: rgba(10, 79, 255, 0.1);
  --blue-border: rgba(10, 79, 255, 0.22);
  --amber: #d4800a;
  --amber-soft: rgba(212, 128, 10, 0.12);
  --amber-border: rgba(212, 128, 10, 0.28);
  --red: #c0392b;
  --red-soft: rgba(192, 57, 43, 0.12);
  --red-border: rgba(192, 57, 43, 0.28);
  --slate: #4a5568;
  --slate-soft: rgba(74, 85, 104, 0.1);
  --slate-border: rgba(74, 85, 104, 0.22);
}