/* CTJ School portal design tokens. Proposal under Gate 2 review; contrast is measured in design_review/checks. */
:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale: size / line-height */
  --text-title: 28px; --leading-title: 34px;
  --text-section: 18px; --leading-section: 26px;
  --text-body: 16px; --leading-body: 24px;
  --text-table: 14px; --leading-table: 20px;
  --text-meta: 13px; --leading-meta: 18px;
  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700;

  /* Neutral surfaces and text */
  --color-canvas: #F6F8FB;
  --color-surface: #FFFFFF;
  --color-surface-muted: #F9FAFC;
  --color-surface-sunken: #EEF2F7;
  --color-text: #17243B;
  --color-text-secondary: #526176;
  --color-text-tertiary: #66748A;
  --color-text-inverse: #FFFFFF;
  --color-divider: #DCE3EC;          /* decorative separation only */
  --color-border-control: #7D8A9E;   /* interactive boundaries: >= 3:1 on surface */
  --color-border-strong: #5E6B80;

  /* Brand */
  --color-primary: #244C7C;
  --color-primary-hover: #1B3C63;
  --color-primary-pressed: #142E4D;
  --color-primary-soft: #E8EEF6;
  --color-primary-softer: #F2F6FB;
  --color-accent: #B8862F;           /* CTJ gold: wordmark/decor, never the save color */
  --color-focus: #2F6FB5;

  /* Status: text / fill / border. Always paired with an icon and words. */
  --color-success: #1C6A42; --color-success-fill: #E7F4EC; --color-success-border: #A8D4BB;
  --color-warning: #774700; --color-warning-fill: #FFF5DF; --color-warning-border: #E2B04A;
  --color-danger:  #A1231E; --color-danger-fill:  #FCECEB; --color-danger-border:  #E9AEA9;
  --color-info:    #244C7C; --color-info-fill:    #EAF1F9; --color-info-border:    #B4C9E2;
  --color-neutral: #3F4C61; --color-neutral-fill: #EEF2F7; --color-neutral-border: #CDD5E0;
  --color-selected-row: #F0F5FB;
  --color-changed-row: #FFF9EC;

  /* Charts: validated categorical pair (dataviz validator, light surface); text never uses series color */
  --chart-1: #2F6FB5; --chart-2: #C98A12; --chart-grid: #E6EBF2; --chart-axis: #526176;

  /* Spacing (4 px base) */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px;

  /* Geometry */
  --radius-control: 7px;
  --radius-surface: 10px;
  --radius-pill: 999px;
  --control-height: 44px;
  --control-height-compact: 36px;
  --rail-width: 232px;
  --topbar-height: 56px;
  --editor-width: 840px;

  /* Elevation: overlays only */
  --shadow-overlay: 0 16px 40px rgba(23, 36, 59, 0.18), 0 2px 8px rgba(23, 36, 59, 0.08);
  --shadow-popover: 0 8px 24px rgba(23, 36, 59, 0.14), 0 1px 3px rgba(23, 36, 59, 0.08);
  --backdrop: rgba(17, 27, 45, 0.42);

  --focus-ring: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-focus);
  --motion-fast: 120ms;
  --motion-base: 180ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --motion-fast: 0ms; --motion-base: 0ms; }
}