/**
 * SIMONTER Design Tokens & Color Palette
 * Source: Figma (Sekretariat Kecamatan Lenteng - Sistem Monitoring Tugas)
 * Contract: C:/Coding/Simonter/contracts/asset_manifest.json
 */

:root {
  /* ==========================================================================
     1. Brand Colors & Accents
     ========================================================================== */
  --brand-navy: #1e3a8a;          /* Primary Navy - Blue 900 */
  --brand-navy-dark: #0f172a;     /* Deep Slate / Surface Dark */
  --brand-navy-medium: #1e40af;   /* Blue 800 */
  --brand-navy-light: #3b82f6;    /* Blue 500 */
  --brand-navy-subtle: #eff6ff;   /* Blue 50 */

  --brand-teal: #0d9488;          /* Teal 600 */
  --brand-teal-subtle: #f0fdfa;   /* Teal 50 */
  --brand-teal-dark: #115e59;     /* Teal 800 */

  --brand-amber: #d97706;         /* Amber 600 */
  --brand-amber-subtle: #fffbeb;  /* Amber 50 */
  --brand-amber-dark: #b45309;    /* Amber 700 */

  --brand-emerald: #059669;       /* Emerald 600 */
  --brand-emerald-subtle: #ecfdf5;/* Emerald 50 */
  --brand-emerald-dark: #047857;  /* Emerald 700 */

  --brand-rose: #e11d48;          /* Rose 600 */
  --brand-rose-subtle: #fff1f2;   /* Rose 50 */
  --brand-rose-dark: #be123c;     /* Rose 700 */

  --brand-purple: #7e22ce;        /* Purple 700 */
  --brand-purple-subtle: #faf5ff; /* Purple 50 */

  /* ==========================================================================
     2. Neutral & Surface System
     ========================================================================== */
  --bg-app: #f8fafc;              /* Slate 50 */
  --bg-surface: #ffffff;          /* Pure White */
  --bg-subtle: #f1f5f9;           /* Slate 100 */
  --bg-muted: #e2e8f0;            /* Slate 200 */
  --bg-sidebar: #0f172a;          /* Slate 900 */

  --border-subtle: #e2e8f0;       /* Slate 200 */
  --border-default: #cbd5e1;      /* Slate 300 */
  --border-strong: #94a3b8;       /* Slate 400 */
  --border-sidebar: #1e293b;      /* Slate 800 */

  --text-main: #0f172a;           /* Slate 900 */
  --text-secondary: #334155;      /* Slate 700 */
  --text-muted: #64748b;          /* Slate 500 */
  --text-placeholder: #94a3b8;    /* Slate 400 */
  --text-inverse: #ffffff;        /* White */
  --text-sidebar: #94a3b8;        /* Sidebar Muted */
  --text-sidebar-active: #f8fafc; /* Sidebar Active */

  --focus-ring: rgba(30, 58, 138, 0.25);

  /* ==========================================================================
     3. 7 Task Status Tokens (SPEC.md Section 3)
     ========================================================================== */
  /* Draft */
  --status-draft-bg: #f1f5f9;
  --status-draft-text: #475569;
  --status-draft-border: #cbd5e1;
  --status-draft-dot: #64748b;

  /* Dalam Pengerjaan */
  --status-proses-bg: #eff6ff;
  --status-proses-text: #1d4ed8;
  --status-proses-border: #bfdbfe;
  --status-proses-dot: #2563eb;

  /* Sedang Ditinjau */
  --status-review-bg: #fffbeb;
  --status-review-text: #b45309;
  --status-review-border: #fde68a;
  --status-review-dot: #f59e0b;

  /* Selesai */
  --status-selesai-bg: #ecfdf5;
  --status-selesai-text: #047857;
  --status-selesai-border: #a7f3d0;
  --status-selesai-dot: #10b981;

  /* Terkendala */
  --status-kendala-bg: #fff7ed;
  --status-kendala-text: #c2410c;
  --status-kendala-border: #fed7aa;
  --status-kendala-dot: #f97316;

  /* Perlu Revisi */
  --status-revisi-bg: #faf5ff;
  --status-revisi-text: #7e22ce;
  --status-revisi-border: #e9d5ff;
  --status-revisi-dot: #a855f7;

  /* Ditolak */
  --status-ditolak-bg: #fef2f2;
  --status-ditolak-text: #b91c1c;
  --status-ditolak-border: #fecaca;
  --status-ditolak-dot: #ef4444;

  /* ==========================================================================
     4. 3 Priority Tokens (SPEC.md Section 3)
     ========================================================================== */
  /* Tinggi */
  --priority-tinggi-bg: #fef2f2;
  --priority-tinggi-text: #b91c1c;
  --priority-tinggi-border: #fecaca;

  /* Sedang */
  --priority-sedang-bg: #fffbeb;
  --priority-sedang-text: #b45309;
  --priority-sedang-border: #fde68a;

  /* Rendah */
  --priority-rendah-bg: #f0fdf4;
  --priority-rendah-text: #15803d;
  --priority-rendah-border: #bbf7d0;

  /* ==========================================================================
     5. Spacing Scale (8pt grid system)
     ========================================================================== */
  --space-0-5: 2px;
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* ==========================================================================
     6. Border Radius Scale
     ========================================================================== */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* ==========================================================================
     7. Elevation & Depth (Diffused Shadows)
     ========================================================================== */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.03);
  --shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.1), 0 8px 10px -6px rgba(15, 23, 42, 0.05);

  /* ==========================================================================
     8. Typography System
     ========================================================================== */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --text-xs: 11px;
  --text-sm: 12px;
  --text-base: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;

  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ==========================================================================
     9. Animation & Transition Posture
     ========================================================================== */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}