/**
 * Design tokens CoalTrack.
 * Dua lapis: primitif (ramp warna mentah) lalu semantik (peran di UI).
 * Komponen hanya memakai lapis semantik supaya mode gelap cukup
 * mengganti nilai di satu tempat.
 * Ramp warna mengikuti sistem inventory (InventoriMigas): Sapphire,
 * petrol teal, dan ink slate.
 */

:root {
    /* ---- Primitif: primary (Sapphire) ---- */
    --color-primary-50: #eff6ff;
    --color-primary-100: #dbeafe;
    --color-primary-200: #bfdbfe;
    --color-primary-300: #93c5fd;
    --color-primary-400: #60a5fa;
    --color-primary-500: #3b82f6;
    --color-primary-600: #2563eb;
    --color-primary-700: #1d4ed8;
    --color-primary-800: #1e40af;
    --color-primary-900: #1e3a8a;
    --color-primary-950: #172554;

    /* ---- Primitif: accent (petrol teal) ---- */
    --color-accent-50: #f0fdfa;
    --color-accent-100: #ccfbf1;
    --color-accent-200: #99f6e4;
    --color-accent-300: #5eead4;
    --color-accent-400: #2dd4bf;
    --color-accent-500: #14b8a6;
    --color-accent-600: #0d9488;
    --color-accent-700: #0f766e;
    --color-accent-800: #115e59;
    --color-accent-900: #134e4a;
    --color-accent-950: #042f2e;

    /* ---- Primitif: ink (cool slate) ---- */
    --color-ink-50: #f8fafc;
    --color-ink-100: #f1f5f9;
    --color-ink-200: #e2e8f0;
    --color-ink-300: #cbd5e1;
    --color-ink-400: #94a3b8;
    --color-ink-500: #64748b;
    --color-ink-600: #475569;
    --color-ink-700: #334155;
    --color-ink-800: #1e293b;
    --color-ink-900: #0f172a;
    --color-ink-950: #060a15;

    /* ---- Primitif: status ---- */
    --color-emerald-100: #d1fae5;
    --color-emerald-500: #10b981;
    --color-emerald-600: #059669;
    --color-emerald-700: #047857;
    --color-amber-100: #fef3c7;
    --color-amber-500: #f59e0b;
    --color-amber-600: #d97706;
    --color-amber-700: #b45309;
    --color-orange-100: #ffedd5;
    --color-orange-500: #f97316;
    --color-orange-700: #c2410c;
    --color-rose-100: #ffe4e6;
    --color-rose-500: #f43f5e;
    --color-rose-600: #e11d48;
    --color-rose-700: #be123c;
    --color-sky-100: #e0f2fe;
    --color-sky-500: #0ea5e9;
    --color-sky-700: #0369a1;
    --color-violet-100: #ede9fe;
    --color-violet-500: #8b5cf6;
    --color-violet-700: #6d28d9;

    /* ---- Semantik: permukaan & garis ---- */
    --surface-page: var(--color-ink-50);
    --surface-card: #ffffff;
    --surface-sunken: rgba(248, 250, 252, 0.8);
    --surface-hover: rgba(248, 250, 252, 0.7);
    --surface-glass: rgba(255, 255, 255, 0.72);
    --surface-inverse: var(--color-ink-900);
    --border-subtle: rgba(226, 232, 240, 0.8);
    --border-strong: var(--color-ink-200);
    --border-glass: rgba(255, 255, 255, 0.4);

    /* ---- Semantik: teks ----
     * text-muted memakai ink-500, bukan ink-400 seperti sistem inventory:
     * ink-400 di atas putih hanya ~2,5:1, di bawah ambang WCAG AA.
     * ink-400 disisakan untuk ikon dekoratif dan placeholder. */
    --text-strong: var(--color-ink-900);
    --text-body: var(--color-ink-700);
    --text-muted: var(--color-ink-500);
    --text-faint: var(--color-ink-400);
    --text-inverse: #ffffff;
    --text-link: var(--color-primary-600);
    --text-link-hover: var(--color-primary-700);

    /* ---- Semantik: sidebar ---- */
    --sidebar-bg: var(--color-ink-950);
    --sidebar-fg: var(--color-ink-400);
    --sidebar-fg-strong: #ffffff;
    --sidebar-border: rgba(148, 163, 184, 0.12);
    --sidebar-hover: rgba(148, 163, 184, 0.1);

    /* ---- Semantik: brand ----
     * Gradien mulai dari primary-600, bukan 500: teks putih di atas
     * primary-500 hanya 3,68:1, di bawah ambang WCAG AA untuk teks normal.
     * 600 → 800 memberi 5,17:1 sampai 8,72:1. */
    --brand-gradient: linear-gradient(135deg, var(--color-primary-600), var(--color-primary-800));

    /* ---- Bayangan ---- */
    --shadow-soft: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px -2px rgba(15, 23, 42, 0.08);
    --shadow-lift: 0 2px 4px rgba(15, 23, 42, 0.05), 0 12px 28px -6px rgba(15, 23, 42, 0.14);
    --shadow-float: 0 4px 8px rgba(15, 23, 42, 0.06), 0 24px 48px -12px rgba(15, 23, 42, 0.22);
    --shadow-glow: 0 0 0 1px rgba(59, 130, 246, 0.2), 0 8px 32px -8px rgba(59, 130, 246, 0.45);
    --shadow-glass: inset 0 1px 0 0 rgba(255, 255, 255, 0.5), 0 8px 24px -12px rgba(6, 10, 21, 0.18);

    /* ---- Tipografi ---- */
    --font-sans: "Plus Jakarta Sans", "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --text-2xs: 0.625rem;
    --text-xs: 0.6875rem;
    --text-sm: 0.8125rem;
    --text-base: 0.875rem;
    --text-md: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;

    /* ---- Spasi (basis 4px) ---- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;

    /* ---- Radius ---- */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.25rem;
    --radius-full: 999px;

    /* ---- Lapis (z-index) ---- */
    --z-sticky: 30;
    --z-drawer: 60;
    --z-modal: 70;
    --z-toast: 80;

    /* ---- Gerak ---- */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --duration-fast: 150ms;
    --duration-base: 200ms;
    --duration-slow: 300ms;

    /* ---- Ukuran tetap ---- */
    --sidebar-width: 248px;
    --topbar-height: 64px;

    color-scheme: light;
}

.dark {
    --surface-page: var(--color-ink-950);
    --surface-card: var(--color-ink-900);
    --surface-sunken: rgba(15, 23, 42, 0.6);
    --surface-hover: rgba(30, 41, 59, 0.4);
    --surface-glass: rgba(15, 23, 42, 0.72);
    --surface-inverse: var(--color-ink-100);
    --border-subtle: rgba(30, 41, 59, 0.8);
    --border-strong: var(--color-ink-800);
    --border-glass: rgba(255, 255, 255, 0.06);

    --text-strong: var(--color-ink-50);
    --text-body: var(--color-ink-200);
    --text-muted: var(--color-ink-400);
    --text-faint: var(--color-ink-500);
    --text-link: var(--color-primary-300);
    --text-link-hover: var(--color-primary-200);

    --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 12px -2px rgba(0, 0, 0, 0.4);
    --shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.35), 0 12px 28px -6px rgba(0, 0, 0, 0.5);
    --shadow-float: 0 4px 8px rgba(0, 0, 0, 0.4), 0 24px 48px -12px rgba(0, 0, 0, 0.6);
    --shadow-glass: inset 0 1px 0 0 rgba(255, 255, 255, 0.06), 0 8px 24px -12px rgba(6, 10, 21, 0.7);

    color-scheme: dark;
}