/* ============================================
   BANDAR AKI APP — Design Tokens
   Tema: Red Bold (Bandar Aki Branding)
   ============================================ */

:root {
  /* ── Primary Colors ── */
  --clr-primary-50:  #FEF2F2;
  --clr-primary-100: #FEE2E2;
  --clr-primary-200: #FECACA;
  --clr-primary-300: #FCA5A5;
  --clr-primary-400: #F87171;   /* Secondary */
  --clr-primary-500: #EF4444;
  --clr-primary-600: #DC2626;   /* Primary */
  --clr-primary-700: #B91C1C;
  --clr-primary-800: #991B1B;
  --clr-primary-900: #7F1D1D;
  --clr-primary-950: #450A0A;

  /* ── Neutral / Dark Theme ── */
  --clr-dark-50:  #F8FAFC;
  --clr-dark-100: #F1F5F9;
  --clr-dark-200: #E2E8F0;
  --clr-dark-300: #CBD5E1;
  --clr-dark-400: #94A3B8;
  --clr-dark-500: #64748B;
  --clr-dark-600: #475569;
  --clr-dark-700: #334155;
  --clr-dark-800: #1E293B;
  --clr-dark-900: #0F172A;
  --clr-dark-950: #020617;

  /* ── Semantic Surface Colors (Dark Theme) ── */
  --clr-bg-body:      #0B0F19;
  --clr-bg-surface:   #111827;
  --clr-bg-elevated:  #1E293B;
  --clr-bg-overlay:   rgba(0, 0, 0, 0.6);
  --clr-bg-card:      rgba(30, 41, 59, 0.7);
  --clr-bg-glass:     rgba(30, 41, 59, 0.45);

  /* ── Text Colors ── */
  --clr-text-primary:   #F8FAFC;
  --clr-text-secondary: #94A3B8;
  --clr-text-muted:     #64748B;
  --clr-text-inverse:   #0F172A;
  --clr-text-accent:    #F87171;

  /* ── Status Colors ── */
  --clr-success:     #22C55E;
  --clr-success-bg:  rgba(34, 197, 94, 0.12);
  --clr-warning:     #F59E0B;
  --clr-warning-bg:  rgba(245, 158, 11, 0.12);
  --clr-error:       #EF4444;
  --clr-error-bg:    rgba(239, 68, 68, 0.12);
  --clr-info:        #3B82F6;
  --clr-info-bg:     rgba(59, 130, 246, 0.12);

  /* ── Gradients ── */
  --gradient-primary:   linear-gradient(135deg, #DC2626 0%, #991B1B 100%);
  --gradient-hero:      linear-gradient(135deg, #DC2626 0%, #B91C1C 40%, #7F1D1D 100%);
  --gradient-card:      linear-gradient(145deg, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 0.6) 100%);
  --gradient-sidebar:   linear-gradient(180deg, #111827 0%, #0B0F19 100%);
  --gradient-glass:     linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
  --gradient-text:      linear-gradient(135deg, #F87171 0%, #DC2626 100%);

  /* ── Typography ── */
  --font-primary:   'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-display:   'Outfit', 'Inter', sans-serif;
  --font-mono:      'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  /* Font Sizes (fluid) */
  --fs-xs:    0.75rem;     /* 12px */
  --fs-sm:    0.8125rem;   /* 13px */
  --fs-base:  0.9375rem;   /* 15px */
  --fs-md:    1rem;        /* 16px */
  --fs-lg:    1.125rem;    /* 18px */
  --fs-xl:    1.25rem;     /* 20px */
  --fs-2xl:   1.5rem;      /* 24px */
  --fs-3xl:   1.875rem;    /* 30px */
  --fs-4xl:   2.25rem;     /* 36px */
  --fs-5xl:   3rem;        /* 48px */
  --fs-6xl:   3.75rem;     /* 60px */

  /* Font Weights */
  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;

  /* Line Heights */
  --lh-tight:   1.2;
  --lh-snug:    1.35;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  /* ── Spacing Scale ── */
  --sp-1:   0.25rem;   /* 4px */
  --sp-2:   0.5rem;    /* 8px */
  --sp-3:   0.75rem;   /* 12px */
  --sp-4:   1rem;      /* 16px */
  --sp-5:   1.25rem;   /* 20px */
  --sp-6:   1.5rem;    /* 24px */
  --sp-8:   2rem;      /* 32px */
  --sp-10:  2.5rem;    /* 40px */
  --sp-12:  3rem;      /* 48px */
  --sp-16:  4rem;      /* 64px */
  --sp-20:  5rem;      /* 80px */
  --sp-24:  6rem;      /* 96px */

  /* ── Border Radius ── */
  --radius-sm:    0.375rem;   /* 6px */
  --radius-md:    0.5rem;     /* 8px */
  --radius-lg:    0.75rem;    /* 12px */
  --radius-xl:    1rem;       /* 16px */
  --radius-2xl:   1.5rem;     /* 24px */
  --radius-full:  9999px;

  /* ── Shadows ── */
  --shadow-xs:    0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm:    0 2px 4px rgba(0, 0, 0, 0.25);
  --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-lg:    0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-xl:    0 16px 48px rgba(0, 0, 0, 0.4);
  --shadow-glow:  0 0 20px rgba(220, 38, 38, 0.3);
  --shadow-glow-sm: 0 0 10px rgba(220, 38, 38, 0.2);
  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.2);

  /* ── Borders ── */
  --border-subtle:  1px solid rgba(255, 255, 255, 0.06);
  --border-default: 1px solid rgba(255, 255, 255, 0.1);
  --border-strong:  1px solid rgba(255, 255, 255, 0.15);
  --border-accent:  1px solid rgba(220, 38, 38, 0.4);

  /* ── Transitions ── */
  --ease-smooth:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-spring:  cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast:    150ms;
  --duration-normal:  250ms;
  --duration-slow:    400ms;
  --duration-slower:  600ms;
  --transition-base:  all 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast:  all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:  all 400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Z-Index Scale ── */
  --z-base:     1;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
  --z-tooltip:  600;

  /* ── Layout ── */
  --sidebar-width:     260px;
  --sidebar-collapsed: 72px;
  --header-height:     64px;
  --container-max:     1280px;
  --container-narrow:  960px;
}

/* ── Media Query Breakpoints (for reference) ──
   Mobile:  < 640px
   Tablet:  640px - 1023px
   Desktop: 1024px+
   Wide:    1440px+
   ─────────────────────────────────────────── */