/* =============================================================================
 * Material 3 design tokens
 * -----------------------------------------------------------------------------
 * Single source of truth for spacing, elevation, radius, motion, color.
 * All component styles MUST consume these — never hard-code paddings or
 * shadows again.
 *
 * Spacing follows Material's 4dp grid: every step = 4px.
 * ============================================================================= */

:root {
  /* ── Color (brand) ─────────────────────────────────────────────────────── */
  --md-primary:        #1565C0;
  --md-primary-hover:  #1976D2;
  --md-primary-dark:   #0D47A1;
  --md-on-primary:     #FFFFFF;
  --md-accent:         #FF6F00;
  --md-accent-hover:   #E65100;
  --md-success:        #2E7D32;
  --md-warning:        #F57F17;
  --md-danger:         #C62828;
  --md-info:           #0277BD;

  /* Soft status containers (badges, status backgrounds — Material "container" tier). */
  --md-primary-container:        #E7F1FF;
  --md-on-primary-container:     #0D47A1;
  --md-success-container:        #E8F5E9;
  --md-on-success-container:     #1B5E20;
  --md-warning-container:        #FFF8E1;
  --md-on-warning-container:     #6D4C00;
  --md-danger-container:         #FFEBEE;
  --md-on-danger-container:      #B71C1C;
  --md-info-container:           #E3F2FD;
  --md-on-info-container:        #0D3A66;

  /* ── Surface (neutrals) ─────────────────────────────────────────────────── */
  --md-bg:             #F5F7FB;   /* app background  */
  --md-surface:        #FFFFFF;   /* cards / sheets  */
  --md-surface-2:      #FAFAFA;   /* subtle stripe   */
  --md-surface-3:      #F0F2F5;   /* deeper stripe   */
  --md-divider:        #E8EAF6;   /* hairlines       */
  --md-border:         #E0E0E0;
  --md-on-surface:     #212121;
  --md-on-surface-2:   #555555;
  --md-on-surface-3:   #757575;
  --md-on-surface-4:   #9E9E9E;

  /* ── State layers (Material "state overlays") ────────────────────────────── */
  --md-state-hover:    rgba(0,0,0,.06);
  --md-state-press:    rgba(0,0,0,.12);
  --md-state-tint:     rgba(21,101,192,.08);    /* primary @ 8% — selected   */

  /* ── Spacing (4dp grid) ─────────────────────────────────────────────────── */
  --space-0:   0;
  --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;
  --space-16:  64px;
  --space-20:  80px;

  /* ── Border radius ──────────────────────────────────────────────────────── */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius:      8px;       /* default control */
  --radius-md:   10px;
  --radius-lg:   12px;      /* card */
  --radius-xl:   16px;      /* hero / modal */
  --radius-2xl:  20px;
  --radius-pill: 9999px;

  /* ── Elevation (Material levels 0-5) ─────────────────────────────────────── */
  --elev-0: none;
  --elev-1: 0 1px 2px rgba(0,0,0,.04), 0 1px 3px rgba(0,0,0,.06);
  --elev-2: 0 2px 6px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --elev-3: 0 4px 12px rgba(0,0,0,.10), 0 2px 4px rgba(0,0,0,.06);
  --elev-4: 0 8px 24px rgba(0,0,0,.14), 0 3px 6px rgba(0,0,0,.08);
  --elev-5: 0 16px 40px rgba(0,0,0,.18), 0 6px 12px rgba(0,0,0,.10);

  /* ── Motion (Material easings) ──────────────────────────────────────────── */
  --motion-fast:     120ms;
  --motion-default:  200ms;
  --motion-slow:     320ms;
  --easing-standard: cubic-bezier(.4, 0, .2, 1);
  --easing-emphasis: cubic-bezier(.2, 0, 0, 1);

  /* ── Typography ─────────────────────────────────────────────────────────── */
  --font-sans: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-md: 13px;
  --fs-base: 14px;
  --fs-lg: 16px;
  --fs-xl: 18px;
  --fs-2xl: 22px;
  --fs-3xl: 28px;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;

  /* ── Layout (chrome) ────────────────────────────────────────────────────── */
  --sidebar-width:     240px;
  --sidebar-collapsed: 64px;
  --topbar-height:     60px;

  /* ── Legacy aliases (for older selectors not yet migrated) ──────────────── */
  --primary:        var(--md-primary);
  --primary-light:  var(--md-primary-hover);
  --primary-dark:   var(--md-primary-dark);
  --accent:         var(--md-accent);
  --success:        var(--md-success);
  --danger:         var(--md-danger);
  --bg:             var(--md-bg);
  --card-shadow:    var(--elev-2);
}