/* Al-Matsurat — design tokens.
   Digabung dari _ds/al-matsurat-design-system/tokens/*.css (fonts, reset,
   colors, typography, spacing, radius-elevation, motion), urutan sama
   seperti styles.css asli. Disalin verbatim dari design system. */

/* ---------- fonts.css ----------
   Halaman ini tidak menampilkan teks Arab, jadi Amiri tidak disertakan.
   Source Sans 3 (400/600/700) juga tidak disertakan di sini — --font-ui
   jatuh ke "Noto Sans"/system-ui, yang tersedia luas dan sangat dekat
   secara visual, supaya landing page ini tidak perlu mengirim ulang
   berkas WOFF2 yang sama seperti aplikasi. Cormorant Garamond 600 tetap
   disertakan karena dipakai di semua judul (h1/h2) halaman ini. */
@font-face{font-family:"Cormorant Garamond";src:url("../assets/fonts/CormorantGaramond-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

:root {
  --font-arabic: "Amiri", "Scheherazade New", "Traditional Arabic", serif;
  --font-ui: "Noto Sans", system-ui, sans-serif;
  --font-display: "Cormorant Garamond", "Lora", Georgia, serif;

  --weight-regular: 400;
  --weight-medium: 600;
  --weight-semibold: 600;
  --weight-bold: 700;
}

/* ---------- reset.css ---------- */
*, *::before, *::after { box-sizing: border-box; }

/* ---------- colors.css ---------- */
:root {
  /* ---------- PAGI — sejuk, netral ---------- */
  --pagi-bg: #f2f6f7;
  --pagi-surface: #ffffff;
  --pagi-surface-sunk: #e9eff1;
  --pagi-ink-1: #0f1d22;
  --pagi-ink-2: #3b4a50;
  --pagi-ink-3: #4a595f;
  --pagi-ink-4: #6a787e;
  --pagi-accent: #16605c;
  --pagi-accent-press: #0f4c49;
  --pagi-accent-soft: #e2edec;
  --pagi-line: #dbe4e6;
  --pagi-line-strong: #c3d0d3;

  /* ---------- PETANG — hangat, keemasan, TETAP TERANG ---------- */
  --petang-bg: #f9f3e9;
  --petang-surface: #fffdf8;
  --petang-surface-sunk: #f3ebdd;
  --petang-ink-1: #22190f;
  --petang-ink-2: #4c3d2e;
  --petang-ink-3: #5b4a39;
  --petang-ink-4: #7b6a58;
  --petang-accent: #8a4e17;
  --petang-accent-press: #6f3e10;
  --petang-accent-soft: #f4e8d7;
  --petang-line: #e8dcc8;
  --petang-line-strong: #d6c5aa;

  /* ---------- GELAP — preferensi manual ---------- */
  --gelap-bg: #0d1315;
  --gelap-surface: #161e21;
  --gelap-surface-sunk: #101719;
  --gelap-ink-1: #edf2f3;
  --gelap-ink-2: #bcc7cb;
  --gelap-ink-3: #a8b4b8;
  --gelap-ink-4: #7f8c91;
  --gelap-accent: #79c2b9;
  --gelap-accent-press: #5aa9a0;
  --gelap-accent-soft: #1d2b2b;
  --gelap-line: #253034;
  --gelap-line-strong: #364348;

  /* ---------- alias semantik (default = pagi) ---------- */
  --bg: var(--pagi-bg);
  --surface: var(--pagi-surface);
  --surface-sunk: var(--pagi-surface-sunk);
  --text-arabic: var(--pagi-ink-1);
  --text-title: var(--pagi-ink-1);
  --text-latin: var(--pagi-ink-2);
  --text-translation: var(--pagi-ink-3);
  --text-muted: var(--pagi-ink-4);
  --accent: var(--pagi-accent);
  --accent-press: var(--pagi-accent-press);
  --accent-soft: var(--pagi-accent-soft);
  --line: var(--pagi-line);
  --line-strong: var(--pagi-line-strong);
  --on-accent: #ffffff;
  --focus-ring: color-mix(in srgb, var(--accent) 55%, transparent);
}

[data-tema="pagi"] {
  --bg: var(--pagi-bg);
  --surface: var(--pagi-surface);
  --surface-sunk: var(--pagi-surface-sunk);
  --text-arabic: var(--pagi-ink-1);
  --text-title: var(--pagi-ink-1);
  --text-latin: var(--pagi-ink-2);
  --text-translation: var(--pagi-ink-3);
  --text-muted: var(--pagi-ink-4);
  --accent: var(--pagi-accent);
  --accent-press: var(--pagi-accent-press);
  --accent-soft: var(--pagi-accent-soft);
  --line: var(--pagi-line);
  --line-strong: var(--pagi-line-strong);
  --on-accent: #ffffff;
}

[data-tema="petang"] {
  --bg: var(--petang-bg);
  --surface: var(--petang-surface);
  --surface-sunk: var(--petang-surface-sunk);
  --text-arabic: var(--petang-ink-1);
  --text-title: var(--petang-ink-1);
  --text-latin: var(--petang-ink-2);
  --text-translation: var(--petang-ink-3);
  --text-muted: var(--petang-ink-4);
  --accent: var(--petang-accent);
  --accent-press: var(--petang-accent-press);
  --accent-soft: var(--petang-accent-soft);
  --line: var(--petang-line);
  --line-strong: var(--petang-line-strong);
  --on-accent: #ffffff;
}

[data-tema="gelap"] {
  --bg: var(--gelap-bg);
  --surface: var(--gelap-surface);
  --surface-sunk: var(--gelap-surface-sunk);
  --text-arabic: var(--gelap-ink-1);
  --text-title: var(--gelap-ink-1);
  --text-latin: var(--gelap-ink-2);
  --text-translation: var(--gelap-ink-3);
  --text-muted: var(--gelap-ink-4);
  --accent: var(--gelap-accent);
  --accent-press: var(--gelap-accent-press);
  --accent-soft: var(--gelap-accent-soft);
  --line: var(--gelap-line);
  --line-strong: var(--gelap-line-strong);
  --on-accent: #0d1315;
}

/* ---------- typography.css ---------- */
:root {
  --arabic-kecil: 22px;         --lh-arabic-kecil: 44px;
  --arabic-sedang: 26px;        --lh-arabic-sedang: 53px;
  --arabic-besar: 32px;         --lh-arabic-besar: 63px;
  --arabic-sangat-besar: 40px;  --lh-arabic-sangat-besar: 76px;

  --text-screen-title: 20px;    --lh-screen-title: 26px;
  --text-mode-tab: 16px;        --lh-mode-tab: 22px;
  --text-label: 15px;           --lh-label: 21px;
  --text-ui: 14px;              --lh-ui: 20px;
  --text-ui-sm: 13px;           --lh-ui-sm: 18px;
  --text-counter-num: 17px;     --lh-counter-num: 20px;
  --text-nomor: 13px;           --lh-nomor: 16px;

  --size-arabic: var(--arabic-sedang);
  --lh-arabic: var(--lh-arabic-sedang);
  --size-card-title: 16px;      --lh-card-title: 22px;
  --size-latin: 15px;           --lh-latin: 24px;
  --size-translation: 15px;     --lh-translation: 25px;
  --size-note: 12px;            --lh-note: 17px;

  --tracking-latin: 0.005em;
  --tracking-label: 0.01em;
  --tracking-nomor: 0.06em;
}

/* ---------- spacing.css ---------- */
:root {
  --space-0: 0px;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 20px;
  --space-7: 24px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 48px;
  --space-11: 64px;

  --screen-edge: var(--space-5);
  --card-pad: var(--space-6);
  --card-gap: var(--space-4);
  --block-gap: var(--space-4);
  --row-pad-y: var(--space-4);
  --touch-min: 48px;
  --touch-comfort: 56px;
  --header-h: 56px;
  --control-bar-h: 48px;
  --content-max: 360px;
}

/* ---------- radius-elevation.css ---------- */
:root {
  --radius-0: 0px;
  --radius-1: 4px;
  --radius-2: 8px;
  --radius-3: 12px;
  --radius-4: 16px;
  --radius-pill: 999px;

  --border-hair: 1px;

  --shadow-none: none;
  --shadow-float: 0 2px 10px rgb(15 29 34 / 0.10);
  --shadow-sheet: 0 -6px 24px rgb(15 29 34 / 0.14);

  --overlay-scrim: rgb(15 29 34 / 0.32);
}

/* ---------- motion.css ---------- */
:root {
  --dur-instant: 90ms;
  --dur-fast: 140ms;
  --dur-base: 200ms;
  --dur-sheet: 260ms;

  --ease-standard: cubic-bezier(0.2, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 0.84, 0.44, 1);

  --press-scale: 0.98;
  --press-opacity: 0.9;
}