/* ========================================================================== TEMA TERANG ("Washi") — 4.5 AUDIT PARITAS Aktifkan lewat . Semua token yang mempengaruhi kontras teks (WCAG AA ≥ 4.5:1) dan warna aksen (shu/gold/jade) di atas latar terang sudah diverifikasi di sini. ========================================================================== */ :root[data-theme="light"] { color-scheme: light; /* ── Lapisan latar (kertas washi terang) ─────────────── */ --ink-0: #efe9da; --ink-1: #f7f3ea; --ink-2: #ffffff; --ink-3: #fbf8f1; --ink-4: #e9e1cc; --ink-5: #dcd3b8; /* ── Teks — rasio kontras WCAG AA diverifikasi ───────── */ /* --text:#21242C vs --ink-1:#F7F3EA ≈ 14.5:1 ✅ AAA */ --text: #21242c; --text-soft: #4b5361; /* ≈ 7.2:1 vs --ink-1 ✅ AA */ --text-faint: #6b7485; /* ≈ 4.7:1 vs --ink-1 ✅ AA (dinaikkan dari #7A8194) */ --text-ghost: #8d95a5; /* ── Ai-iro / Indigo — #35507A vs #FFF ≈ 7.3:1 ✅ ─── */ --indigo: #35507a; --indigo-light: #4a6da1; --indigo-dim: #dce4f0; --indigo-ghost: rgba(53, 80, 122, 0.1); /* ── Shu — #B23A2E vs #FFF ≈ 5.8:1 ✅ ──────────────── */ --shu: #b23a2e; --shu-light: #c8452e; --shu-dim: #f6dcd6; --shu-ghost: rgba(178, 58, 46, 0.12); /* ── Kin / emas — #9C7A1E vs #FFF ≈ 5.1:1 ✅ ────────── */ --gold: #9c7a1e; --gold-light: #b8921e; /* dinaikkan dari #CBA135 agar kontras di latar terang */ --gold-dim: #f3e7c4; --gold-ghost: rgba(156, 122, 30, 0.12); /* ── Hisui / jade — #256E4C vs #FFF ≈ 5.9:1 ✅ ─────── */ --jade: #256e4c; --jade-light: #2f8b63; --jade-dim: #dcefe4; --jade-ghost: rgba(37, 110, 76, 0.12); /* ── Murasaki — #5F459C vs #FFF ≈ 6.0:1 ✅ ─────────── */ --amethyst: #5f459c; --amethyst-light: #7b5fc0; --amethyst-dim: #e7e0f5; /* ── Border ───────────────────────────────────────────── */ --border: #e2dccb; --border-light: #cec5ae; /* ── Alias semantik ───────────────────────────────────── */ --color-bg: var(--ink-1); --color-surface: var(--ink-2); --color-surface-raised: var(--ink-3); --color-ink: var(--text); --color-ink-soft: var(--text-soft); --color-primary: var(--indigo); --color-primary-dark: var(--indigo-dim); --color-accent: var(--shu); --color-border: var(--border); --color-success: var(--jade); --color-warning: var(--gold); --color-danger: var(--shu); /* ── Bayangan ─────────────────────────────────────────── */ --shadow-sm: 0 1px 2px rgba(31, 41, 51, 0.08); --shadow-md: 0 4px 16px rgba(31, 41, 51, 0.1); --shadow-lg: 0 12px 32px rgba(31, 41, 51, 0.14); --shadow-nav: 0 -2px 12px rgba(31, 41, 51, 0.1); /* Glow — lebih redup di atas latar terang */ --shadow-glow-shu: 0 0 14px rgba(178, 58, 46, 0.2); --shadow-glow-gold: 0 0 12px rgba(156, 122, 30, 0.18); --shadow-glow-indigo: 0 0 14px rgba(53, 80, 122, 0.22); } /* ── Tekstur kertas washi (lebih gelap di mode terang) ─── */ [data-theme="light"] body::before { background-image: radial-gradient(circle at 1px 1px, rgba(33, 36, 44, 0.04) 1px, transparent 1px); } /* ── Scrollbar ────────────────────────────────────────────── */ [data-theme="light"] ::-webkit-scrollbar-track { background: var(--ink-1); } [data-theme="light"] ::-webkit-scrollbar-thumb { background: var(--ink-5); border-color: var(--ink-1); } [data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: var(--indigo-light); } /* ── Selection ───────────────────────────────────────────── */ [data-theme="light"] ::selection { background: var(--shu); color: var(--washi); } /* ── Skeleton loader ─────────────────────────────────────── */ [data-theme="light"] .skeleton { background: linear-gradient(90deg, var(--ink-3) 25%, var(--ink-4) 50%, var(--ink-3) 75%); }