/* RIETC SSO design tokens — loaded FIRST by the Admin and Account portals.
   Semantic names are the source of truth; the short legacy names (--sf, --ac, …) are aliases so
   older rules keep working. Dark values are set on html[data-theme='dark'] (theme-boot.js applies
   the attribute before first paint). Text/background pairs were checked for WCAG AA (≥4.5:1). */
:root {
  /* Surfaces */
  --canvas: #eef0f8;
  --canvas-soft: #f5f6fb;
  --surface: #ffffff;
  --surface-2: #f8f9fb;
  --surface-3: #eef0f4;
  --surface-header: #f7f8fc;
  --overlay: rgba(17, 24, 39, .42);

  /* Lines */
  --border: #dfe2e8;
  --border-strong: #cbd0d9;
  --divider: #e4e7ef;

  /* Text */
  --text: #111827;
  --text-2: #374151;
  --text-muted: #5b6272;
  --text-faint: #9aa1ad;

  /* Brand accent (RIETC blue) */
  --accent: #2563eb;
  --on-accent: #ffffff;
  --accent-hover: #1d4ed8;
  --accent-subtle: #e8effd;
  --accent-border: #bfd3fb;
  --accent-text: #1d4ed8;

  /* Status */
  --success: #15803d;
  --success-subtle: #f0fdf4;
  --success-border: #bbf7d0;
  --warning: #b45309;
  --warning-subtle: #fffbeb;
  --warning-border: #fde68a;
  --danger: #b91c1c;
  --on-danger: #ffffff;
  --danger-subtle: #fef2f2;
  --danger-border: #fecaca;
  --info: #0e7490;
  --info-subtle: #ecfeff;
  --info-border: #a5f3fc;
  --violet: #6d28d9;
  --violet-subtle: #f3effe;

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

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Type scale — body 15px, tables/controls 14px, secondary 13px */
  --font-ui: 'Sarabun', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', 'Sarabun', monospace;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-md: 15px;
  --text-lg: 16px;
  --text-xl: 18px;
  --text-2xl: 22px;
  --text-3xl: 28px;
  --text-4xl: 36px;

  /* Elevation */
  --shadow-1: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .05);
  --shadow-2: 0 6px 16px -4px rgba(16, 24, 40, .10), 0 2px 6px -2px rgba(16, 24, 40, .05);
  --shadow-3: 0 24px 56px -12px rgba(16, 24, 40, .28);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);

  /* Motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --dur-fast: 120ms;
  --dur: 180ms;
  --dur-slow: 260ms;

  /* Layout */
  --sidebar-width: 264px;
  --topbar-height: 64px;
  --content-max: 1440px;

  /* Legacy aliases — prefer the semantic names above in new CSS. */
  --bg: var(--canvas);
  --sf: var(--surface);
  --sf2: var(--surface-2);
  --sf3: var(--surface-3);
  --hdbg: var(--surface-header);
  --bd: var(--border);
  --bd2: var(--border-strong);
  --ln: var(--divider);
  --tx: var(--text);
  --tx2: var(--text-2);
  --mu: var(--text-muted);
  --mu2: var(--text-faint);
  --ac: var(--accent);
  --on-ac: var(--on-accent);
  --acs: var(--accent-subtle);
  --act: var(--accent-hover);
  --acb: var(--accent-border);
  --pr: var(--accent);
  --ok: var(--success);
  --oks: var(--success-subtle);
  --okb: var(--success-border);
  --wn: var(--warning);
  --wns: var(--warning-subtle);
  --wnb: var(--warning-border);
  --dg: var(--danger);
  --dgs: var(--danger-subtle);
  --dgb: var(--danger-border);
  --in: var(--info);
  --ins: var(--info-subtle);
  --inb: var(--info-border);
  --mono: var(--font-mono);
  --brand-radius: var(--radius-lg);
  --brand-shadow: var(--shadow-3);
  --brand-shadow-soft: var(--shadow-2);

  color-scheme: light;
  font-family: var(--font-ui);
  color: var(--text);
  background: var(--canvas);
}

html[data-theme='dark'] {
  color-scheme: dark;
  --canvas: #0d1119;
  --canvas-soft: #10151f;
  --surface: #161b26;
  --surface-2: #1b2130;
  --surface-3: #232a3a;
  --surface-header: #191f2b;
  --overlay: rgba(0, 0, 0, .6);

  --border: #30394a;
  --border-strong: #465166;
  --divider: #283141;

  --text: #f3f5f8;
  --text-2: #cbd2dd;
  --text-muted: #939dae;
  --text-faint: #6e788a;

  --accent: #5b8cff;
  --on-accent: #0d1119;
  --accent-hover: #77a0ff;
  --accent-subtle: #1c2e54;
  --accent-border: #31589f;
  --accent-text: #8cb0ff;

  --success: #65c889;
  --success-subtle: #142b20;
  --success-border: #25543a;
  --warning: #f3b967;
  --warning-subtle: #302513;
  --warning-border: #684b1d;
  --danger: #ff8585;
  --on-danger: #0d1119;
  --danger-subtle: #35191d;
  --danger-border: #6e2e35;
  --info: #67c6df;
  --info-subtle: #122d34;
  --info-border: #245663;
  --violet: #b9a2ff;
  --violet-subtle: #261d45;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .28);
  --shadow-2: 0 8px 20px -6px rgba(0, 0, 0, .45);
  --shadow-3: 0 24px 60px -12px rgba(0, 0, 0, .6);
}