/* ARKVIVE: warna merek dari ark-01.png; token UI lainnya merupakan usulan. */
:root {
  --brand-blue: #1323e5;
  --brand-navy: #00115b;
  --brand-white: #ffffff;
  --brand-grey: #e2e2e2;
  --brand-black: #151515;
  --color-bg: var(--brand-white);
  --color-surface: #f6f7fb;
  --color-text: var(--brand-black);
  --color-muted: #555b6b;
  --color-border: var(--brand-grey);
  --color-input-border: #767c8c;
  --color-primary: var(--brand-blue);
  --color-primary-hover: #101dc2;
  --color-primary-active: var(--brand-navy);
  --color-on-primary: var(--brand-white);
  --color-focus: var(--brand-blue);
  --color-success: #17663c;
  --color-success-bg: #eef8f1;
  --color-warning: #795000;
  --color-warning-bg: #fff6df;
  --color-danger: #b42318;
  --color-danger-bg: #fff1ef;
  --font-sans: Arial, Helvetica, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Consolas, monospace;
  --text-caption: .75rem;
  --text-small: .875rem;
  --text-body: 1rem;
  --text-lead: 1.25rem;
  --text-h3: 1.5rem;
  --text-h2: clamp(1.75rem, 3vw, 2.5rem);
  --text-display: clamp(2.5rem, 6vw, 5rem);
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --radius-control: 4px;
  --radius-card: 8px;
  --radius-pill: 999px;
  --shadow-overlay: 0 12px 32px rgb(0 17 91 / 12%);
  --content-max: 1200px;
  --control-height: 44px;
  --duration-fast: 150ms;
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
}