/* ============================================================
   RafifOS · 00 tokens
   Baseline engine: Chromium 92 (Huawei WebView pada MatePad T10s)
   Aturan: tanpa :has(), tanpa container query, tanpa color-mix,
   tanpa dvh, tanpa :is() berantai. Semua nilai punya fallback.
   ============================================================ */

:root{
  /* ---- skala spasial: 4pt grid, dikali --u (unit fisik) ---- */
  --u: 4px;
  --s1: calc(var(--u) * 1);
  --s2: calc(var(--u) * 2);
  --s3: calc(var(--u) * 3);
  --s4: calc(var(--u) * 4);
  --s5: calc(var(--u) * 5);
  --s6: calc(var(--u) * 6);
  --s8: calc(var(--u) * 8);
  --s10: calc(var(--u) * 10);
  --s12: calc(var(--u) * 12);

  /* ---- radius ---- */
  --r-xs: calc(var(--u) * 2);
  --r-sm: calc(var(--u) * 3);
  --r-md: calc(var(--u) * 4.5);
  --r-lg: calc(var(--u) * 6.5);
  --r-xl: calc(var(--u) * 9);
  --r-pill: 999px;

  /* ---- tipografi ---- */
  --font-ui: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-read: "Inter", "Plus Jakarta Sans", Georgia, serif;
  --font-mono: ui-monospace, "SF Mono", "Roboto Mono", Menlo, monospace;

  --t-display: clamp(34px, 7vw, 62px);
  --t-h1: clamp(22px, 3.2vw, 30px);
  --t-h2: 19px;
  --t-h3: 16px;
  --t-body: 15px;
  --t-sm: 13.5px;
  --t-xs: 12px;
  --t-micro: 10.5px;

  --lh-tight: 1.12;
  --lh-body: 1.55;

  /* ---- gerak ---- */
  --d-instant: 90ms;
  --d-fast: 160ms;
  --d-base: 240ms;
  --d-slow: 380ms;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-inout: cubic-bezier(.65, 0, .35, 1);

  /* ---- elevasi: bayangan berlapis, tanpa blur besar ---- */
  --sh-1: 0 1px 2px rgba(0,0,0,.28), 0 1px 1px rgba(0,0,0,.16);
  --sh-2: 0 4px 10px rgba(0,0,0,.26), 0 1px 3px rgba(0,0,0,.20);
  --sh-3: 0 14px 34px rgba(0,0,0,.34), 0 3px 10px rgba(0,0,0,.24);
  --sh-4: 0 28px 64px rgba(0,0,0,.42), 0 8px 20px rgba(0,0,0,.28);
}

/* ============================================================
   TEMA TERANG (Vellum Day)
   ============================================================ */
:root,
[data-theme="light"]{
  --bg: #F2EEE6;
  --bg-deep: #E7E1D5;
  --surface: #FBF9F4;
  --surface-2: #F4F0E7;
  --surface-3: #EAE4D8;
  --ink: #16181B;
  --ink-2: #3E4147;
  --ink-3: #6E7178;
  --ink-4: #9A9CA2;
  --line: rgba(22,24,27,.10);
  --line-strong: rgba(22,24,27,.18);
  --hover: rgba(22,24,27,.045);
  --press: rgba(22,24,27,.085);
  --veil: rgba(28,26,22,.28);
  --glass: rgba(251,249,244,.72);
  --glass-edge: rgba(255,255,255,.85);
  --noise: .028;
}

/* ============================================================
   TEMA GELAP (Loom Night) · default
   ============================================================ */
[data-theme="dark"]{
  --bg: #0B0C0E;
  --bg-deep: #060708;
  --surface: #14161A;
  --surface-2: #191C21;
  --surface-3: #20242A;
  --ink: #EDE9E1;
  --ink-2: #C3BFB6;
  --ink-3: #918D85;
  --ink-4: #6A6760;
  --line: rgba(237,233,225,.10);
  --line-strong: rgba(237,233,225,.19);
  --hover: rgba(237,233,225,.05);
  --press: rgba(237,233,225,.10);
  --veil: rgba(4,5,6,.52);
  --glass: rgba(20,22,26,.74);
  --glass-edge: rgba(255,255,255,.10);
  --noise: .05;
}

/* ============================================================
   Aksen: satu warna, diturunkan jadi 3 nada
   ============================================================ */
[data-accent="amber"]{ --a: #E0B264; --a-ink: #241A08; }
[data-accent="moss"]{ --a: #8FBF9F; --a-ink: #08211A; }
[data-accent="tide"]{ --a: #8FB8C9; --a-ink: #07202A; }
[data-accent="ember"]{ --a: #D98C7A; --a-ink: #2A0F09; }
[data-accent="iris"]{ --a: #A99BE0; --a-ink: #140E2A; }
[data-accent="mono"]{ --a: #C9C5BC; --a-ink: #16181B; }

:root{ --a: #E0B264; --a-ink: #241A08; }

/* turunan aksen: dipakai lewat rgba agar aman di Chromium 92 */
[data-accent="amber"]{ --a-08: rgba(224,178,100,.08); --a-14: rgba(224,178,100,.14); --a-24: rgba(224,178,100,.24); --a-40: rgba(224,178,100,.40); }
[data-accent="moss"] { --a-08: rgba(143,191,159,.08); --a-14: rgba(143,191,159,.14); --a-24: rgba(143,191,159,.24); --a-40: rgba(143,191,159,.40); }
[data-accent="tide"] { --a-08: rgba(143,184,201,.08); --a-14: rgba(143,184,201,.14); --a-24: rgba(143,184,201,.24); --a-40: rgba(143,184,201,.40); }
[data-accent="ember"]{ --a-08: rgba(217,140,122,.08); --a-14: rgba(217,140,122,.14); --a-24: rgba(217,140,122,.24); --a-40: rgba(217,140,122,.40); }
[data-accent="iris"] { --a-08: rgba(169,155,224,.08); --a-14: rgba(169,155,224,.14); --a-24: rgba(169,155,224,.24); --a-40: rgba(169,155,224,.40); }
[data-accent="mono"] { --a-08: rgba(201,197,188,.08); --a-14: rgba(201,197,188,.14); --a-24: rgba(201,197,188,.24); --a-40: rgba(201,197,188,.40); }
:root{ --a-08: rgba(224,178,100,.08); --a-14: rgba(224,178,100,.14); --a-24: rgba(224,178,100,.24); --a-40: rgba(224,178,100,.40); }

/* ============================================================
   MATERIAL
   silk = kaca tiruan (gradien + garis), tanpa backdrop-filter.
          Ini default untuk T10s karena blur GPU di Mali-G51 mahal.
   mist = kaca asli dengan backdrop-filter. Opsional, hanya 1 per layar.
   solid= opaque penuh.
   ============================================================ */
[data-material="silk"] .mat{
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.012) 46%, rgba(0,0,0,.06)),
    var(--surface-2);
  border: 1px solid var(--line);
  box-shadow: var(--sh-2), inset 0 1px 0 var(--glass-edge);
}
[data-theme="light"][data-material="silk"] .mat{
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.30) 46%, rgba(0,0,0,.02)),
    var(--surface);
  box-shadow: var(--sh-2), inset 0 1px 0 #fff;
}
[data-material="mist"] .mat{
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--sh-3), inset 0 1px 0 var(--glass-edge);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
}
[data-material="solid"] .mat{
  background: var(--surface-2);
  border: 1px solid var(--line);
  box-shadow: var(--sh-2);
}

/* ============================================================
   TINGKAT GERAK
   motion = full | calm | off
   ============================================================ */
[data-motion="calm"]{ --d-base: 180ms; --d-slow: 240ms; }
[data-motion="off"] *{
  animation-duration: 1ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 1ms !important;
}

/* ============================================================
   KEPADATAN
   ============================================================ */
[data-density="compact"]{ --u: 3.4px; --t-body: 14px; --t-sm: 13px; }
[data-density="roomy"]{ --u: 4.6px; --t-body: 16px; --t-sm: 14.5px; }