/**
 * ============================================================
 * SIMPEG BAWASLU ENTERPRISE
 * theme.css — Design Tokens & CSS Variables
 * ============================================================
 *
 * PANDUAN PENGGUNAAN:
 *   Selalu gunakan variable ini, JANGAN hardcode warna/spacing.
 *   Contoh: color: var(--color-primary);
 *
 * IMPORT ORDER:
 *   1. theme.css       ← Design tokens
 *   2. simpeg.css      ← Global styles & components
 *   3. [module].css    ← Module-specific (opsional)
 * ============================================================
 */

/* ============================================================
   @layer: reset before variables so specificity is clean
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

:root {

  /* ----------------------------------------------------------
     BRAND COLORS — BAWASLU
     ---------------------------------------------------------- */
  --color-navy:         #0A2342;   /* Sidebar, header teks */
  --color-navy-light:   #0E2D56;   /* Sidebar hover */
  --color-navy-dark:    #071A32;   /* Sidebar active bg */
  --color-navy-50:      rgba(10,35,66,.05);
  --color-navy-100:     rgba(10,35,66,.10);
  --color-navy-200:     rgba(10,35,66,.20);

  --color-red:          #E31E24;   /* Accent utama, active menu */
  --color-red-hover:    #C41A1F;
  --color-red-light:    #FDECEA;
  --color-red-50:       rgba(227,30,36,.08);

  --color-gold:         #F4B400;   /* Highlight, warning */
  --color-gold-light:   #FFF8E1;
  --color-gold-dark:    #E6A800;

  /* ----------------------------------------------------------
     SEMANTIC COLORS
     ---------------------------------------------------------- */
  --color-success:      #28A745;
  --color-success-hover:#218838;
  --color-success-light:#D4EDDA;
  --color-success-50:   rgba(40,167,69,.08);

  --color-warning:      #F4B400;
  --color-warning-hover:#E6A800;
  --color-warning-light:#FFF3CD;
  --color-warning-50:   rgba(244,180,0,.10);

  --color-danger:       #E31E24;
  --color-danger-hover: #C41A1F;
  --color-danger-light: #FDECEA;
  --color-danger-50:    rgba(227,30,36,.08);

  --color-info:         #17A2B8;
  --color-info-hover:   #138496;
  --color-info-light:   #D1ECF1;
  --color-info-50:      rgba(23,162,184,.08);

  /* ----------------------------------------------------------
     NEUTRAL / BACKGROUND
     ---------------------------------------------------------- */
  --color-bg:           #F5F7FA;   /* Background halaman */
  --color-bg-card:      #FFFFFF;
  --color-bg-input:     #FFFFFF;
  --color-bg-hover:     #F0F3F8;
  --color-bg-active:    #E8EDF5;

  --color-border:       #DDE3EE;
  --color-border-light: #EEF1F7;
  --color-border-focus: #0A2342;

  --color-text:         #1A2C4E;   /* Text utama */
  --color-text-secondary:#6B7A99;  /* Text muted */
  --color-text-muted:   #9BA8C0;   /* Placeholder */
  --color-text-disabled:#BCC5D8;
  --color-text-inverse: #FFFFFF;

  /* ----------------------------------------------------------
     SIDEBAR
     ---------------------------------------------------------- */
  --sidebar-bg:         #0A2342;
  --sidebar-width:      240px;
  --sidebar-width-collapsed: 70px;
  --sidebar-text:       rgba(255,255,255,.70);
  --sidebar-text-hover: rgba(255,255,255,.95);
  --sidebar-text-active:#FFFFFF;
  --sidebar-item-hover: rgba(255,255,255,.06);
  --sidebar-item-active:#E31E24;
  --sidebar-border:     rgba(255,255,255,.08);
  --sidebar-icon:       rgba(255,255,255,.55);
  --sidebar-icon-active:#FFFFFF;
  --sidebar-badge-bg:   #E31E24;
  --sidebar-submenu-bg: rgba(0,0,0,.18);

  /* ----------------------------------------------------------
     TOPBAR
     ---------------------------------------------------------- */
  --topbar-height:      64px;
  --topbar-bg:          #FFFFFF;
  --topbar-border:      #DDE3EE;
  --topbar-shadow:      0 1px 0 var(--color-border);

  /* ----------------------------------------------------------
     TYPOGRAPHY
     ---------------------------------------------------------- */
  --font-family:        'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;

  --font-size-xs:       0.70rem;   /* 11.2px */
  --font-size-sm:       0.80rem;   /* 12.8px */
  --font-size-base:     0.875rem;  /* 14px */
  --font-size-md:       0.9375rem; /* 15px */
  --font-size-lg:       1rem;      /* 16px */
  --font-size-xl:       1.125rem;  /* 18px */
  --font-size-2xl:      1.25rem;   /* 20px */
  --font-size-3xl:      1.5rem;    /* 24px */
  --font-size-4xl:      1.875rem;  /* 30px */
  --font-size-5xl:      2.25rem;   /* 36px */

  --font-weight-light:  300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semi:   600;
  --font-weight-bold:   700;
  --font-weight-extra:  800;

  --line-height-tight:  1.25;
  --line-height-snug:   1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed:1.625;

  --letter-spacing-tight: -0.01em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide:   0.03em;
  --letter-spacing-wider:  0.06em;
  --letter-spacing-widest: 0.10em;

  /* ----------------------------------------------------------
     SPACING SCALE (8px base grid)
     ---------------------------------------------------------- */
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-7:  1.75rem;   /* 28px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */

  /* ----------------------------------------------------------
     BORDER RADIUS
     ---------------------------------------------------------- */
  --radius-xs:  3px;
  --radius-sm:  6px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-2xl: 20px;
  --radius-full: 9999px;

  /* ----------------------------------------------------------
     SHADOWS
     ---------------------------------------------------------- */
  --shadow-xs:  0 1px 2px rgba(10,35,66,.06);
  --shadow-sm:  0 1px 4px rgba(10,35,66,.08), 0 1px 2px rgba(10,35,66,.04);
  --shadow-md:  0 4px 12px rgba(10,35,66,.10), 0 1px 4px rgba(10,35,66,.06);
  --shadow-lg:  0 8px 24px rgba(10,35,66,.12), 0 2px 8px rgba(10,35,66,.06);
  --shadow-xl:  0 16px 40px rgba(10,35,66,.14), 0 4px 12px rgba(10,35,66,.08);
  --shadow-card:0 2px 8px rgba(10,35,66,.07), 0 0 1px rgba(10,35,66,.05);
  --shadow-dropdown: 0 8px 24px rgba(10,35,66,.14);

  /* ----------------------------------------------------------
     TRANSITIONS
     ---------------------------------------------------------- */
  --transition-fast:    0.12s ease;
  --transition-base:    0.18s ease;
  --transition-slow:    0.28s ease;
  --transition-smooth:  0.35s cubic-bezier(.4,0,.2,1);
  --easing-out:         cubic-bezier(0, 0, 0.2, 1);
  --easing-in-out:      cubic-bezier(0.4, 0, 0.2, 1);

  /* ----------------------------------------------------------
     Z-INDEX SCALE
     ---------------------------------------------------------- */
  --z-base:    1;
  --z-dropdown:100;
  --z-sticky:  200;
  --z-sidebar: 300;
  --z-topbar:  400;
  --z-modal:   500;
  --z-toast:   600;
  --z-tooltip: 700;

  /* ----------------------------------------------------------
     STAT CARD ACCENT COLORS
     ---------------------------------------------------------- */
  --card-accent-navy:   #0A2342;
  --card-accent-red:    #E31E24;
  --card-accent-gold:   #F4B400;
  --card-accent-green:  #28A745;
  --card-accent-blue:   #1565C0;
  --card-accent-teal:   #00897B;
  --card-accent-purple: #6A1B9A;
  --card-accent-orange: #E65100;

  /* ----------------------------------------------------------
     TABLE
     ---------------------------------------------------------- */
  --table-header-bg:    #0A2342;
  --table-header-text:  #FFFFFF;
  --table-row-even:     #F8F9FC;
  --table-row-hover:    #EDF1F9;
  --table-border:       #DDE3EE;

  /* ----------------------------------------------------------
     FORM
     ---------------------------------------------------------- */
  --input-height:       42px;
  --input-padding-x:    var(--space-3);
  --input-padding-y:    var(--space-2);
  --input-border:       #CDD5E0;
  --input-border-focus: #0A2342;
  --input-border-error: #E31E24;
  --input-border-success:#28A745;
  --input-bg:           #FFFFFF;
  --input-bg-disabled:  #F0F3F8;
  --input-shadow-focus: 0 0 0 3px rgba(10,35,66,.12);
  --input-radius:       var(--radius-sm);

  /* ----------------------------------------------------------
     BUTTONS
     ---------------------------------------------------------- */
  --btn-height-sm:   32px;
  --btn-height-md:   40px;
  --btn-height-lg:   46px;
  --btn-padding-x-sm:var(--space-3);
  --btn-padding-x-md:var(--space-5);
  --btn-padding-x-lg:var(--space-6);
  --btn-font-size-sm:var(--font-size-xs);
  --btn-font-size-md:var(--font-size-sm);
  --btn-font-size-lg:var(--font-size-base);
  --btn-radius:      var(--radius-sm);
  --btn-font-weight: var(--font-weight-semi);

  /* ----------------------------------------------------------
     BADGE
     ---------------------------------------------------------- */
  --badge-padding-x: 0.55em;
  --badge-padding-y: 0.30em;
  --badge-radius:    var(--radius-full);
  --badge-font-size: var(--font-size-xs);
  --badge-font-weight: var(--font-weight-semi);

  /* ----------------------------------------------------------
     CHART COLORS (urutan untuk ChartJS)
     ---------------------------------------------------------- */
  --chart-1: #0A2342;
  --chart-2: #E31E24;
  --chart-3: #F4B400;
  --chart-4: #28A745;
  --chart-5: #17A2B8;
  --chart-6: #6A1B9A;
  --chart-7: #E65100;
  --chart-8: #00897B;
}

/* ============================================================
   Dark Mode Placeholder (Phase 3)
   ============================================================ */
/* @media (prefers-color-scheme: dark) { :root { ... } } */