/* Design tokens: warna, radius, shadow, tipografi, spacing. Light mode = default (:root). Dark mode diaktifkan lewat atribut [data-theme="dark"] pada (lihat js/theme.js) -- BUKAN cuma prefers-color-scheme, supaya toggle manual dari UI bisa menimpa preferensi sistem dan pilihannya tersimpan di localStorage. */ :root { color-scheme: light; /* Palet utama */ --color-primary: #2563eb; --color-primary-dark: #1d4ed8; --color-secondary: #1e3a8a; --color-accent: #0ea5e9; --color-success: #16a34a; --color-warning: #d97706; --color-danger: #dc2626; /* Permukaan */ --color-bg: #f4f7fb; --color-surface: #ffffff; --color-surface-soft: #f8fafc; --color-border: #e2e8f0; /* Teks */ --color-text: #0f172a; --color-text-secondary: #64748b; --color-text-muted: #94a3b8; --color-text-on-primary: #ffffff; /* Bubble chat */ --bubble-user-bg: var(--color-primary); --bubble-user-text: #ffffff; --bubble-bot-bg: var(--color-surface); --bubble-bot-text: var(--color-text); --bubble-bot-border: var(--color-border); /* Badge confidence/source (lihat chat.css) */ --badge-success-bg: #dcfce7; --badge-success-text: #15803d; --badge-info-bg: #dbeafe; --badge-info-text: #1d4ed8; --badge-warning-bg: #fef3c7; --badge-warning-text: #b45309; --badge-danger-bg: #fee2e2; --badge-danger-text: #b91c1c; --badge-neutral-bg: #f1f5f9; --badge-neutral-text: #475569; /* Radius & shadow */ --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px; --radius-pill: 999px; --shadow-soft: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.06); --shadow-card: 0 8px 24px rgba(15, 23, 42, 0.08); --shadow-float: 0 16px 40px rgba(15, 23, 42, 0.14); /* Tipografi */ --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --fs-app-title: 1.25rem; --fs-subtitle: 0.85rem; --fs-body: 0.95rem; --fs-meta: 0.75rem; --fs-label: 0.85rem; --fs-heading: 1.05rem; /* Layout */ --sidebar-width: 272px; --sidebar-width-collapsed: 76px; --app-max-width: 1440px; --header-height: 64px; --transition-fast: 150ms ease; --transition-base: 220ms ease; } /* Dark mode -- override token, struktur/markup tidak berubah sama sekali */ :root[data-theme="dark"] { color-scheme: dark; --color-primary: #3b82f6; --color-primary-dark: #60a5fa; --color-secondary: #93c5fd; --color-accent: #38bdf8; --color-success: #22c55e; --color-warning: #f59e0b; --color-danger: #f87171; --color-bg: #0b1220; --color-surface: #131b2c; --color-surface-soft: #1a2438; --color-border: #263449; --color-text: #e5edf7; --color-text-secondary: #a3b1c6; --color-text-muted: #74839c; --color-text-on-primary: #ffffff; --bubble-user-bg: var(--color-primary); --bubble-user-text: #ffffff; --bubble-bot-bg: var(--color-surface); --bubble-bot-text: var(--color-text); --bubble-bot-border: var(--color-border); --badge-success-bg: rgba(34, 197, 94, 0.16); --badge-success-text: #4ade80; --badge-info-bg: rgba(59, 130, 246, 0.18); --badge-info-text: #60a5fa; --badge-warning-bg: rgba(245, 158, 11, 0.18); --badge-warning-text: #fbbf24; --badge-danger-bg: rgba(248, 113, 113, 0.16); --badge-danger-text: #fca5a5; --badge-neutral-bg: rgba(148, 163, 184, 0.16); --badge-neutral-text: #cbd5e1; --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 14px rgba(0, 0, 0, 0.35); --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-float: 0 16px 44px rgba(0, 0, 0, 0.55); } /* Fallback: kalau pengguna belum pernah memilih tema (belum ada data-theme di , mis. JS gagal jalan), tetap hormati preferensi sistem. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { color-scheme: dark; --color-primary: #3b82f6; --color-primary-dark: #60a5fa; --color-secondary: #93c5fd; --color-accent: #38bdf8; --color-success: #22c55e; --color-warning: #f59e0b; --color-danger: #f87171; --color-bg: #0b1220; --color-surface: #131b2c; --color-surface-soft: #1a2438; --color-border: #263449; --color-text: #e5edf7; --color-text-secondary: #a3b1c6; --color-text-muted: #74839c; --bubble-user-bg: var(--color-primary); --bubble-bot-bg: var(--color-surface); --bubble-bot-border: var(--color-border); --badge-success-bg: rgba(34, 197, 94, 0.16); --badge-success-text: #4ade80; --badge-info-bg: rgba(59, 130, 246, 0.18); --badge-info-text: #60a5fa; --badge-warning-bg: rgba(245, 158, 11, 0.18); --badge-warning-text: #fbbf24; --badge-danger-bg: rgba(248, 113, 113, 0.16); --badge-danger-text: #fca5a5; --badge-neutral-bg: rgba(148, 163, 184, 0.16); --badge-neutral-text: #cbd5e1; --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 14px rgba(0, 0, 0, 0.35); --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-float: 0 16px 44px rgba(0, 0, 0, 0.55); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } * { box-sizing: border-box; } /* Safety-net: beberapa komponen (typing indicator, tombol batal, dst) sudah punya rule "display: flex" sendiri yang spesifisitasnya menyamai (dan dengan urutan CSS, mengalahkan) default UA stylesheet untuk [hidden]. Rule ini memastikan atribut hidden SELALU menang, di mana pun dipakai. */ [hidden] { display: none !important; } html, body { height: 100%; } body { margin: 0; font-family: var(--font-sans); font-size: var(--fs-body); color: var(--color-text); background: var(--color-bg); -webkit-font-smoothing: antialiased; } button { font-family: inherit; } a { color: var(--color-primary); } /* Focus-visible konsisten di seluruh kontrol interaktif (Aksesibilitas). */ :is(button, a, input, textarea, [tabindex]):focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }