/* EasyPay Analytics — design tokens.
   Source of truth: DESIGN.md. Do not edit values without updating DESIGN.md.
*/

:root {
  /* Colors */
  --teal: #00897B;
  --teal-deep: #0B3B45;
  --teal-dark: #0A3039;
  --teal-light: #26A69A;
  --teal-glow: #00C9B5;

  --bg-page: #0A3039;
  --bg-card: #FFFFFF;
  --bg-card-muted: #F4F6F7;
  --bg-sidebar: #082A33;

  --text-primary: #1B2B30;
  --text-secondary: #5A6B70;
  --text-on-dark: #E5F4F1;
  --text-on-dark-muted: #7FA09A;

  --divider: #E1E7E8;
  --divider-dark: #11414C;

  --gold: #D4AF37;
  --gold-soft: #E7C766;
  --success: #4CAF50;
  --warning: #FF9800;
  --danger: #E63946;
  --danger-soft: #FBE2E5;

  /* Typography */
  --font-display: 'DM Serif Display', Georgia, serif;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'DM Mono', 'SF Mono', Menlo, monospace;

  /* Spacing */
  --s-xs: 6px;
  --s-sm: 12px;
  --s-md: 18px;
  --s-lg: 24px;
  --s-xl: 36px;
  --s-xxl: 56px;

  /* Radius */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-pill: 999px;

  /* Shadows */
  --shadow-card: 0 4px 24px rgba(0, 30, 25, 0.10);

  /* Layout */
  --sidebar-width: 220px;
  --main-max-width: 1440px;
}