/* ==========================================================================
   MATERIAL DESIGN 3 - THEME TOKENS & SYSTEM VARIABLES
   Aplikasi Penyusunan Laporan Keuangan UMKM
   ========================================================================== */

:root {
  /* Color Palette - Light Mode (Indigo & Slate Luxury FinTech) */
  --md-sys-color-primary: #2563eb;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #dbeafe;
  --md-sys-color-on-primary-container: #1e3a8a;

  --md-sys-color-secondary: #0d9488;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #ccfbf1;
  --md-sys-color-on-secondary-container: #115e59;

  --md-sys-color-tertiary: #6366f1;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #e0e7ff;
  --md-sys-color-on-tertiary-container: #3730a3;

  --md-sys-color-positive: #10b981;
  --md-sys-color-on-positive: #ffffff;
  --md-sys-color-positive-container: #d1fae5;
  --md-sys-color-on-positive-container: #065f46;

  --md-sys-color-warning: #f59e0b;
  --md-sys-color-on-warning: #ffffff;
  --md-sys-color-warning-container: #fef3c7;
  --md-sys-color-on-warning-container: #92400e;

  --md-sys-color-error: #ef4444;
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: #fee2e2;
  --md-sys-color-on-error-container: #991b1b;

  --md-sys-color-background: #f8fafc;
  --md-sys-color-on-background: #0f172a;
  
  --md-sys-color-surface: #ffffff;
  --md-sys-color-on-surface: #1e293b;
  --md-sys-color-surface-variant: #f1f5f9;
  --md-sys-color-on-surface-variant: #64748b;
  
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #f8fafc;
  --md-sys-color-surface-container: #f1f5f9;
  --md-sys-color-surface-container-high: #e2e8f0;
  --md-sys-color-surface-container-highest: #cbd5e1;

  --md-sys-color-outline: #cbd5e1;
  --md-sys-color-outline-variant: #e2e8f0;

  /* Typography */
  --md-sys-typescale-font-brand: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --md-sys-typescale-font-plain: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --md-sys-typescale-font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;

  /* Elevation Shadows (MD3 Level 0 to 5) */
  --md-sys-elevation-0: none;
  --md-sys-elevation-1: 0 1px 3px 0 rgba(0, 0, 0, 0.06), 0 1px 2px -1px rgba(0, 0, 0, 0.06);
  --md-sys-elevation-2: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
  --md-sys-elevation-3: 0 10px 15px -3px rgba(0, 0, 0, 0.09), 0 4px 6px -4px rgba(0, 0, 0, 0.06);
  --md-sys-elevation-4: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.06);
  --md-sys-elevation-5: 0 25px 50px -12px rgba(0, 0, 0, 0.2);

  /* Border Radii */
  --md-sys-shape-corner-none: 0px;
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-full: 9999px;

  /* Transitions */
  --md-sys-motion-standard: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-duration-short: 150ms;
  --md-sys-motion-duration-medium: 250ms;
  --md-sys-motion-duration-long: 400ms;

  /* Layout dimensions */
  --sidebar-width: 270px;
  --sidebar-collapsed-width: 80px;
  --topbar-height: 68px;
  --bottombar-height: 68px;
}

/* Dark Theme Overrides */
[data-theme="dark"] {
  --md-sys-color-primary: #60a5fa;
  --md-sys-color-on-primary: #091e42;
  --md-sys-color-primary-container: #1e3a8a;
  --md-sys-color-on-primary-container: #dbeafe;

  --md-sys-color-secondary: #2dd4bf;
  --md-sys-color-on-secondary: #042f2c;
  --md-sys-color-secondary-container: #134e4a;
  --md-sys-color-on-secondary-container: #ccfbf1;

  --md-sys-color-tertiary: #818cf8;
  --md-sys-color-on-tertiary: #1e1b4b;
  --md-sys-color-tertiary-container: #3730a3;
  --md-sys-color-on-tertiary-container: #e0e7ff;

  --md-sys-color-positive: #34d399;
  --md-sys-color-on-positive: #022c22;
  --md-sys-color-positive-container: #064e3b;
  --md-sys-color-on-positive-container: #d1fae5;

  --md-sys-color-warning: #fbbf24;
  --md-sys-color-on-warning: #451a03;
  --md-sys-color-warning-container: #78350f;
  --md-sys-color-on-warning-container: #fef3c7;

  --md-sys-color-error: #f87171;
  --md-sys-color-on-error: #450a0a;
  --md-sys-color-error-container: #7f1d1d;
  --md-sys-color-on-error-container: #fee2e2;

  --md-sys-color-background: #090d16;
  --md-sys-color-on-background: #f1f5f9;

  --md-sys-color-surface: #0f172a;
  --md-sys-color-on-surface: #f8fafc;
  --md-sys-color-surface-variant: #1e293b;
  --md-sys-color-on-surface-variant: #94a3b8;

  --md-sys-color-surface-container-lowest: #0b1120;
  --md-sys-color-surface-container-low: #0f172a;
  --md-sys-color-surface-container: #1e293b;
  --md-sys-color-surface-container-high: #273549;
  --md-sys-color-surface-container-highest: #334155;

  --md-sys-color-outline: #334155;
  --md-sys-color-outline-variant: #1e293b;

  --md-sys-elevation-1: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.3);
  --md-sys-elevation-2: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
  --md-sys-elevation-3: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
  --md-sys-elevation-4: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 8px 10px -6px rgba(0, 0, 0, 0.5);
  --md-sys-elevation-5: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
}

/* Base CSS Reset & Smooth Setup */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  width: 100%;
  font-family: var(--md-sys-typescale-font-plain);
  font-size: 15px;
  line-height: 1.5;
  color: var(--md-sys-color-on-background);
  background-color: var(--md-sys-color-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color var(--md-sys-motion-duration-medium) var(--md-sys-motion-standard),
              color var(--md-sys-motion-duration-medium) var(--md-sys-motion-standard);
  overflow-x: hidden;
}

/* Typography Classes */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--md-sys-typescale-font-brand);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--md-sys-color-on-surface);
}

.display-lg { font-size: 2.25rem; line-height: 1.2; font-weight: 700; }
.display-md { font-size: 1.75rem; line-height: 1.25; font-weight: 700; }
.headline-sm { font-size: 1.35rem; line-height: 1.3; font-weight: 600; }
.title-lg { font-size: 1.15rem; line-height: 1.4; font-weight: 600; }
.title-md { font-size: 1rem; line-height: 1.4; font-weight: 600; }
.body-md { font-size: 0.95rem; line-height: 1.5; }
.body-sm { font-size: 0.85rem; line-height: 1.4; color: var(--md-sys-color-on-surface-variant); }
.label-sm { font-size: 0.75rem; line-height: 1.3; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }

.font-mono {
  font-family: var(--md-sys-typescale-font-mono);
  font-feature-settings: "tnum" 1, "zero" 1;
}

/* Glassmorphism utility */
.glass-panel {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--md-sys-color-outline-variant);
}

[data-theme="dark"] .glass-panel {
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
}