/* ============================================================================
 * Tatakas — Design Tokens (satu sumber kebenaran tema)
 *
 * Diambil dari "Tatakas Design System" di Google Stitch
 * (project 15029725744022004106, asset 11135788612352998711) + peta layar
 * ~/tatakas-design-review/SCREENS.md.
 *
 * Konvensi: token baru ber-prefix `--tk-`, plus alias lama
 * (`--color-ink`, `--color-paper`, ...) supaya CSS existing (loading.css,
 * halaman lama) ikut memakai tema baru tanpa diubah.
 * ========================================================================== */

:root {
    /* --- Warna brand --- */
    --tk-primary: #22a05b;
    --tk-primary-deep: #167e44; /* hover / tombol aktif */
    --tk-primary-dark: #156739;
    --tk-primary-darkest: #0f4d2a; /* gradien hero, teks di atas tint */
    --tk-primary-soft: #e8f6ee; /* latar chip/ikon */
    --tk-primary-soft-2: #f2f7f4;

    /* --- Teks / ink --- */
    --tk-ink: #112e1d;
    --tk-ink-muted: #52665b;
    --tk-ink-subtle: #7b8f84;
    --tk-ink-on-primary: #ffffff;

    /* --- Permukaan --- */
    --tk-bg: #fafcfa;
    --tk-surface: #ffffff;
    --tk-surface-alt: #f7faf8;
    --tk-line: #e8f2ec;
    --tk-line-strong: #bcd9c8;

    /* --- Status --- */
    --tk-accent: #f6c343; /* "Paling Populer", catatan penting */
    --tk-accent-ink: #4a3205;
    --tk-danger: #dc2626;
    --tk-danger-soft: #fdeceb;
    --tk-warning: #d97706;
    --tk-warning-soft: #fdf3e3;
    --tk-info: #2563eb;
    --tk-info-soft: #e8f0fe;
    --tk-success: var(--tk-primary);
    --tk-success-soft: var(--tk-primary-soft);

    /* --- Bentuk --- */
    --tk-radius-sm: 10px;
    --tk-radius-md: 12px;
    --tk-radius-lg: 16px;
    --tk-radius-xl: 20px;
    --tk-radius-pill: 999px;

    /* --- Bayangan (tint hijau, lembut) --- */
    --tk-shadow-sm: 0 1px 2px rgba(22, 103, 57, 0.06);
    --tk-shadow-md: 0 6px 18px -6px rgba(22, 103, 57, 0.14);
    --tk-shadow-lg: 0 12px 32px -4px rgba(22, 103, 57, 0.08);
    --tk-shadow-pop: 0 18px 48px -12px rgba(22, 103, 57, 0.24);

    /* --- Jarak (kelipatan 4) --- */
    --tk-space-1: 4px;
    --tk-space-2: 8px;
    --tk-space-3: 12px;
    --tk-space-4: 16px;
    --tk-space-5: 20px;
    --tk-space-6: 24px;
    --tk-space-8: 32px;
    --tk-space-10: 40px;
    --tk-space-12: 48px;

    /* --- Tipografi --- */
    --tk-font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI",
        sans-serif;
    --tk-font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;
    --tk-text-xs: 0.75rem;
    --tk-text-sm: 0.8125rem;
    --tk-text-base: 0.875rem;
    --tk-text-md: 0.9375rem;
    --tk-text-lg: 1.125rem;
    --tk-text-xl: 1.375rem;
    --tk-text-2xl: 1.75rem;

    /* --- Gerak (halus, tidak kaku) --- */
    --tk-dur-fast: 150ms;
    --tk-dur-base: 220ms;
    --tk-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

    /* --- Dimensi shell --- */
    --tk-sidebar-w: 264px;
    --tk-sidebar-w-collapsed: 76px;
    --tk-topbar-h: 64px;

    /* --- Alias tema lama (kompatibilitas halaman existing) --- */
    --color-ink: var(--tk-ink);
    --color-ink-2: var(--tk-primary-dark);
    --color-paper: var(--tk-bg);
    --color-paper-2: var(--tk-surface-alt);
    --color-line: var(--tk-line);
    --color-text: var(--tk-ink);
    --color-text-soft: var(--tk-ink-muted);
    --color-green: var(--tk-primary);
    --color-green-bg: var(--tk-primary-soft);
    --color-blue: var(--tk-primary);
    --color-blue-bg: var(--tk-primary-soft);
    --color-accent: var(--tk-accent);

    /* --- Alias tambahan (P1 theme bridge 2026-10-15) ---
     * Diperlukan karena palet `:root` lokal di ingest.css/accounting.css/
     * workspace.css sudah DIHAPUS; tanpa alias ini `var(--color-violet)`,
     * `var(--color-amber)`, `var(--color-surface)`, dst. menjadi undefined dan
     * komponen legacy kehilangan warna (mis. `.btn-violet` jadi transparan). */
    --color-surface: var(--tk-surface);
    --color-border: var(--tk-line);
    --color-bg: var(--tk-bg);
    --color-muted: var(--tk-ink-muted);
    --color-on-ink: var(--tk-ink-on-primary);
    --color-on-ink-soft: rgba(255, 255, 255, 0.72);
    --color-amber: var(--tk-warning);
    --color-amber-bg: var(--tk-warning-soft);
    --color-red: var(--tk-danger);
    --color-red-bg: var(--tk-danger-soft);
    --color-violet: var(--tk-primary-deep);
    --color-violet-bg: var(--tk-primary-soft);
    --color-clay: var(--tk-danger);
}

/* Baseline aplikasi (hanya berlaku pada halaman yang memakai shell) */
body.tk-body {
    font-family: var(--tk-font);
    background: var(--tk-bg);
    color: var(--tk-ink);
    -webkit-font-smoothing: antialiased;
}

.tk-num,
.tk-money {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.tk-money {
    text-align: right;
    white-space: nowrap;
}

/* Hormati preferensi aksesibilitas untuk transisi (animasi GIF tetap jalan) */
@media (prefers-reduced-motion: reduce) {
    .tk-shell *,
    .tk-shell *::before,
    .tk-shell *::after {
        transition-duration: 1ms !important;
        animation-duration: 1ms !important;
    }
}