/* =========================================================
   tokens.css — Design tokens (single source of truth)
   Light theme only · No shadow · No animation
   Desktop and mobile share the same sizes; only layout differs.
   ========================================================= */

:root {
  color-scheme: light;

  /* ---------- Font family ---------- */
  --font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  /* ---------- Typography: size | line-height | weight ---------- */
  --font-size-xl: 18px;  --line-height-xl: 20px;  --font-weight-xl: 600; /* Extra Large */
  --font-size-lg: 16px;  --line-height-lg: 18px;  --font-weight-lg: 600; /* Large */
  --font-size-md: 14px;  --line-height-md: 16px;  --font-weight-md: 500; /* Medium */
  --font-size-sm: 12px;  --line-height-sm: 14px;  --font-weight-sm: 400; /* Small */
  --font-size-xs: 10px;  --line-height-xs: 12px;  --font-weight-xs: 400; /* Extra Small */

  --text-pair-gap: 2px; /* space between title + subtitle */

  /* ---------- Brand / Primary ---------- */
  --color-primary:        #2563EB;
  --color-primary-hover:  #1D4ED8;
  --color-primary-active: #1E40AF;
  --color-primary-soft:   #EFF6FF;
  --color-on-primary:     #FFFFFF;

  /* ---------- Surfaces ---------- */
  --color-bg-page:   #F8FAFC;
  --color-bg-card:   #FFFFFF;
  --color-bg-subtle: #F9FAFB;
  --color-bg-hover:  #F2F4F7;

  /* ---------- Text ---------- */
  --color-text:           #172033;
  --color-text-secondary: #667085;
  --color-text-muted:     #98A2B3;

  /* ---------- Border ---------- */
  --color-border: #E4E7EC;

  /* ---------- Status ---------- */
  --color-success:      #079455;
  --color-success-soft: #ECFDF3;
  --color-warning:      #DC6803;
  --color-warning-soft: #FFFAEB;
  --color-danger:       #D92D20;
  --color-danger-soft:  #FEF3F2;
  --color-info:         #2563EB;
  --color-info-soft:    #EFF6FF;

  /* ---------- Radius ---------- */
  --radius-4:  4px;
  --radius-8:  8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-20: 20px;
  --radius-24: 24px;
  --radius-full: 9999px;

  /* Semantic radius aliases */
  --radius-control: var(--radius-8);   /* buttons, inputs */
  --radius-card:    var(--radius-12);  /* cards, panels */
  --radius-modal:   var(--radius-16);  /* dialogs, sheets */
  --radius-badge:   var(--radius-full);

  /* ---------- Spacing ---------- */
  --space-4:  4px;
  --space-8:  8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;

  /* ---------- Icon size ---------- */
  --icon-16: 16px;
  --icon-20: 20px;
  --icon-24: 24px;
  --icon-28: 28px;
  --icon-32: 32px;

  /* ---------- Control heights ---------- */
  --control-sm: 32px;
  --control-md: 40px;
  --control-lg: 48px;

  /* ---------- Layout dimensions ---------- */
  --sidebar-width:     240px;
  --topbar-height:     64px;
  --bottom-nav-height: 64px;
  --content-max-width: 1280px;

  /* ---------- Breakpoints (reference only; CSS vars can't be used in @media)
     Desktop: min-width 768px  ·  Mobile: max-width 767px ---------- */
  --breakpoint-desktop: 768px;

  /* ---------- Focus ---------- */
  --focus-ring-width:  2px;
  --focus-ring-color:  var(--color-primary);
  --focus-ring-offset: 2px;

  /* ---------- Z-index ---------- */
  --z-sticky:   10;
  --z-overlay:  40;
  --z-drawer:   50;
  --z-modal:    60;
}