/* ============================================================
   Attendance Pro — Design Tokens
   All themeable values live here. The Theme Manager (js/core/theme.js)
   overrides these custom properties at runtime from company settings —
   admins change colors/fonts/radius with zero code edits.
   ============================================================ */
:root {
  /* Brand — overridden by Theme Manager */
  --primary:        #4F6EF7;
  --primary-hover:  #3D5BE8;
  --primary-soft:   #EEF1FE;
  --secondary:      #0F172A;
  --accent:         #10B981;
  --accent-soft:    #ECFDF5;

  /* Semantic */
  --success: #10B981; --success-soft: #ECFDF5;
  --warning: #F59E0B; --warning-soft: #FFFBEB;
  --danger:  #EF4444; --danger-soft:  #FEF2F2;
  --info:    #3B82F6; --info-soft:    #EFF6FF;

  /* Surfaces (light) */
  --bg:            #F6F7FB;
  --surface:       #FFFFFF;
  --surface-2:     #F1F3F9;
  --border:        #E5E8F0;
  --border-strong: #CBD2E0;

  /* Text */
  --text:      #1A2233;
  --text-2:    #5A6478;
  --text-3:    #98A1B3;
  --text-inv:  #FFFFFF;

  /* Typography — overridden by Theme Manager (Google Fonts) */
  --font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-size-base: 14px;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;

  /* Shape & depth */
  --radius-sm: 8px; --radius: 12px; --radius-lg: 16px; --radius-full: 999px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow:    0 4px 16px rgba(16, 24, 40, .07);
  --shadow-lg: 0 12px 32px rgba(16, 24, 40, .12);

  /* Spacing scale */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px;

  /* Layout */
  --sidebar-w: 248px;
  --topbar-h: 60px;

  /* Motion */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur: 180ms;
}

[data-theme="dark"] {
  --bg:            #0D1220;
  --surface:       #151B2C;
  --surface-2:     #1C2438;
  --border:        #263049;
  --border-strong: #364260;
  --text:      #E7EAF2;
  --text-2:    #9AA4BC;
  --text-3:    #626D88;
  --primary-soft: rgba(79, 110, 247, .14);
  --accent-soft:  rgba(16, 185, 129, .12);
  --success-soft: rgba(16, 185, 129, .12);
  --warning-soft: rgba(245, 158, 11, .12);
  --danger-soft:  rgba(239, 68, 68, .12);
  --info-soft:    rgba(59, 130, 246, .12);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
  --shadow:    0 4px 16px rgba(0,0,0,.35);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.5);
}