/* Hallmark · v2.0.0 · genre atmospheric · theme Bloom (dealt 1/3, seed music-studio-…e343)
   Kritik: kertas hangat + grid piano-roll + terakota; bagian yang disentuh terasa fisik.
   Waive: label lane/timecode pakai mono — itu ruler di dalam produk, bukan hiasan.
   ==========================================================================
   Kampung Studio — Redesign (Bloom)
   01 · token, reset, tipografi, permukaan
   ========================================================================== */

:root {
  color-scheme: light;

  /* kertas */
  --paper: oklch(97% 0.01 72);
  --paper-2: oklch(94.6% 0.013 70);
  --paper-3: oklch(91.5% 0.016 66);
  --sheet: oklch(98.7% 0.007 78);

  /* tinta */
  --ink: oklch(21% 0.024 40);
  --ink-2: oklch(31% 0.022 46);
  --muted: oklch(38% 0.022 50);
  --rule: oklch(88% 0.014 64);

  /* aksen: terakota sebagai karet, tautan, lane — bukan bidang */
  --accent: oklch(53% 0.145 36);
  --accent-2: oklch(66% 0.1 55);
  --accent-soft: oklch(53% 0.145 36 / 0.11);
  --accent-ink: oklch(98.5% 0.008 72);

  /* lane (warna bagian lagu) */
  --lane-1: oklch(50% 0.04 55);
  --lane-2: oklch(48% 0.105 28);
  --lane-3: oklch(70% 0.115 72);
  --lane-4: oklch(65% 0.085 12);

  /* grid */
  --grid-16: oklch(21% 0.024 40 / 0.015);
  --grid-beat: oklch(21% 0.024 40 / 0.03);
  --grid-bar: oklch(21% 0.024 40 / 0.06);
  --grid-row: oklch(21% 0.024 40 / 0.018);

  /* bagian fisik */
  --rubber: oklch(55% 0.15 34);
  --rubber-hi: oklch(66% 0.125 42);
  --rubber-lo: oklch(43% 0.125 31);
  --umber: oklch(30% 0.03 45);
  --bezel: oklch(92.5% 0.014 68);
  --case: oklch(93.5% 0.012 70);

  /* cahaya */
  --hi: oklch(99.6% 0.006 80 / 0.75);
  --shade-1: oklch(21% 0.024 40 / 0.08);
  --shade-2: oklch(21% 0.024 40 / 0.16);
  --shade-3: oklch(30% 0.06 40 / 0.28);

  /* status */
  --ok: oklch(52% 0.1 150);
  --ok-soft: oklch(52% 0.1 150 / 0.12);
  --bad: oklch(52% 0.16 26);
  --bad-soft: oklch(52% 0.16 26 / 0.1);

  /* tipografi */
  --font-display: "Ranade", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --font-body: var(--font-display);
  --font-outlier: "Gambarino", Georgia, "Times New Roman", serif;
  --font-code: "Azeret Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --t-10: 10.5px;
  --t-11: 11.5px;
  --t-12: 12.5px;
  --t-13: 13.5px;
  --t-15: 15px;
  --t-17: 17px;
  --t-20: 20px;
  --t-26: 26px;
  --t-34: 34px;
  --t-44: 44px;

  /* radius */
  --radius-card: 18px;
  --radius-inner: 10px;
  --radius-clip: 6px;
  --radius-pill: 999px;

  /* elevasi */
  --shadow-card: 0 1px 2px oklch(21% 0.024 40 / 0.06), 0 18px 36px -18px oklch(21% 0.024 40 / 0.26);
  --shadow-lift: 0 2px 4px oklch(21% 0.024 40 / 0.07), 0 36px 72px -32px oklch(45% 0.1 40 / 0.34);

  /* ritme */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 56px;

  /* gerak */
  --ease: cubic-bezier(0.16, 0.8, 0.28, 1);
  --dur-1: 140ms;
  --dur-2: 220ms;

  /* tata letak */
  --rail: 268px;
  --player-h: 76px;
  --maxw: 1560px;

  --tracking-display: -0.024em;
  --display-weight: 600;

  /* turunan aksen, bahaya, tepi */
  --umber-hi: oklch(26% 0.028 44);
  --bad-hi: oklch(47% 0.16 26);
  --accent-edge: oklch(53% 0.145 36 / 0.22);
  --accent-edge-2: oklch(53% 0.145 36 / 0.24);
  --accent-edge-3: oklch(53% 0.145 36 / 0.3);
  --accent-edge-4: oklch(53% 0.145 36 / 0.32);
  --ok-edge: oklch(52% 0.1 150 / 0.4);
  --hi-strong: oklch(99% 0.01 80 / 0.18);
  --scrim: oklch(30% 0.03 45 / 0.34);

  /* topeng (mask-image butuh warna opak) */
  /* permukaan turunan */
  --sheet-fade: oklch(98.7% 0.007 78 / 0.85);
  --sheet-fade-dark: oklch(20% 0.005 60 / 0.86);
  --card-edge: oklch(88% 0.014 64 / 0.9);

  /* tombol utama (gradien + bevel) */
  --btn-top: oklch(58% 0.15 36);
  --btn-bottom: oklch(50% 0.15 34);
  --btn-top-hi: oklch(62% 0.15 36);
  --btn-bottom-hi: oklch(54% 0.15 34);
  --btn-bevel-hi: oklch(72% 0.13 44);
  --btn-bevel-lo: oklch(40% 0.13 32);
  --btn-glow: oklch(45% 0.14 34 / 0.8);

  --mask-solid: #000000;
  --mask-opaque: #000000;
}

/* ---------------------------------------------------------------- reset -- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

html,
body {
  overflow-x: clip;
}

body {
  margin: 0;
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-13);
  line-height: 1.55;
  caret-color: var(--accent);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* grain 180px, 5% — tekstur digenerate, bukan gambar */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
figure {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

img,
svg,
video,
canvas,
iframe {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

a {
  color: var(--accent);
  text-decoration: none;
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--rubber-lo);
  text-decoration: underline;
}

/* ------------------------------------------------------------ tipografi -- */

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--tracking-display);
  line-height: 1.06;
  color: var(--ink);
  min-width: 0;
  overflow-wrap: break-word;
  text-wrap: balance;
}

/* judul layar: satu keluarga, bobot tegas */
.view-hero__title {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.032em;
}

.mono,
.player-time,
.counter,
.zu-side-search-count,
.stored-keys-idx,
.stored-keys-mask,
.stored-keys-credits,
.zu-recent-task-chip,
.zu-recent-meta,
.zu-detail-meta {
  font-family: var(--font-code);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* ---------------------------------------------------------------- focus -- */

:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-inner);
  transition: none;
}

/* ----------------------------------------------------------- scrollbar -- */

* {
  scrollbar-width: thin;
  scrollbar-color: var(--paper-3) transparent;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--paper-3);
  border: 3px solid var(--paper);
  border-radius: var(--radius-pill);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--muted);
}

/* ------------------------------------------------------------ utilitas -- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

[hidden] {
  display: none !important;
}

::selection {
  background: var(--accent-soft);
  color: var(--ink);
}

@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;
  }
}