:root {
  /* Global — merah Sedaya */
  --red-50:#FBF2F2; --red-100:#F6E0E0; --red-200:#EDC0C1; --red-300:#DF9496;
  --red-400:#CB5F62; --red-500:#B5403F; --red-600:#A03033; --red-700:#85272A;
  --red-800:#6B2023; --red-900:#551A1C; --red-950:#2F0D0E;
  /* Global — netral */
  --slate-0:#FFFFFF; --slate-50:#F7F7F8; --slate-100:#EEEFF1; --slate-200:#DFE1E5;
  --slate-300:#C4C8CF; --slate-400:#9AA0AA; --slate-500:#656C78; --slate-600:#535A66;
  --slate-700:#3E4450; --slate-800:#2A2F38; --slate-900:#1A1D23; --slate-950:#0F1115;
  /* Global — status */
  --success-fg:#1F7A4D; --success-bg:#EAF5EF; --success-solid:#166A41;
  --warning-fg:#8A5300; --warning-bg:#FDF3E1;
  --info-fg:#2457A6;    --info-bg:#EAF0FA;
  --danger-fg:#B42318;  --danger-bg:#FDECEA;
  --launch-fg:#5B3FA8;  --launch-bg:#F1EDFA;

  /* Semantik */
  --color-bg-page:var(--slate-50);
  --color-bg-surface:var(--slate-0);
  --color-bg-subtle:var(--slate-100);
  --color-bg-brand-subtle:var(--red-50);
  --color-text-primary:var(--slate-900);
  --color-text-secondary:var(--slate-600);
  --color-text-muted:var(--slate-500);
  --color-text-brand:var(--red-600);
  --color-text-on-brand:var(--slate-0);
  --color-border-default:var(--slate-200);
  --color-border-strong:var(--slate-300);
  --color-border-brand:var(--red-200);
  --color-action-primary:var(--red-600);
  --color-action-primary-hover:var(--red-700);
  --color-action-primary-active:var(--red-800);
  --color-action-danger:var(--danger-fg);
  --color-focus-ring:var(--info-fg);
  --color-overlay-backdrop:rgb(15 17 21 / .56);

  /* Tipografi */
  --font-display:"Plus Jakarta Sans", system-ui, sans-serif;
  --font-body:"Inter", system-ui, sans-serif;
  --font-mono:"IBM Plex Mono", ui-monospace, monospace;
  --text-display-nup:2.5rem; --text-h1:1.875rem; --text-h2:1.5rem; --text-h3:1.25rem;
  --text-body-lg:1.125rem; --text-body:1rem; --text-body-sm:.875rem; --text-caption:.75rem;
  --text-code:.875rem; --text-micro:.5625rem;
  --text-tv-nup:clamp(3rem, 5.5vw, 5.25rem);
  --leading-display:1.1; --leading-h1:1.26; --leading-h2:1.33; --leading-h3:1.4;
  --leading-body:1.5; --leading-tight:1.33;

  /* Spasi Terkalibrasi */
  --space-0:0rem; --space-0-5:2px;
  --space-1:4px; --space-1-5:6px; --space-2:8px; --space-2-5:10px; --space-3:12px; --space-3-5:14px;
  --space-4:16px; --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px;

  /* Bentuk & Ukuran Komponen (DESIGN-SYSTEM 2.4, 2.5, 2.6, 4.1, 5.1–6.2) */
  --radius-sm:6px; --radius-md:10px; --radius-lg:16px; --radius-full:999px;
  --shadow-sm:0 1px 2px rgb(15 17 21 / .06);
  --shadow-md:0 4px 12px rgb(15 17 21 / .08);
  --shadow-lg:0 12px 32px rgb(15 17 21 / .14);
  --control-h:44px; --control-h-lg:52px; --control-h-sm:36px;
  --table-row-h:48px;
  --layout-appbar-h:56px;
  --layout-bottomnav-h:64px;
  --layout-sidebar-w:248px;
  --layout-sidebar-collapsed-w:72px;
  --layout-container-max:1280px;
  --layout-login-max:400px;
  --layout-public-max:480px;
  --layout-modal-max:640px;
  --layout-modal-lg-max:840px;
  --ticket-max-w:520px;
  --qr-size-md:176px;
  --qr-size-sm:148px;
  --qr-frame-pad:10px;
  --stamp-size:88px;
  --perforation-offset:-10px;
  --step-circle-size:28px;
  --border-accent-w:3px;
  --verify-queue-w:320px;
  --preview-img-h:340px;
  --scanner-frame-size:240px;
  --tv-strip-h:88px;
  --tv-card-min-h:200px;
  --chart-h:200px;
  --unit-cell-sm:56px;
  --unit-cell-md:64px;
  --icon-xs:14px; --icon-sm:16px; --icon-md:20px; --icon-lg:24px;
  --upload-min-h:120px;

  /* Token Komponen (DESIGN-SYSTEM 3 & 5.1) */
  --button-bg-primary-default:var(--color-action-primary);
  --button-bg-primary-hover:var(--color-action-primary-hover);
  --button-bg-primary-active:var(--color-action-primary-active);
  --button-fg-primary:var(--color-text-on-brand);
  --button-bg-secondary-default:var(--color-bg-surface);
  --button-bg-secondary-hover:var(--color-bg-subtle);
  --button-border-secondary:var(--color-border-strong);
  --button-fg-secondary:var(--color-text-primary);
  --button-bg-danger-default:var(--color-action-danger);
  --button-bg-danger-hover:var(--red-800);
  --button-fg-danger:var(--color-text-on-brand);
  --button-h-sm:var(--control-h-sm);
  --button-h-md:var(--control-h);
  --button-h-lg:var(--control-h-lg);

  /* Gerak */
  --motion-instant:0ms;
  --motion-fast:120ms; --motion-base:200ms; --motion-slow:320ms;
  --motion-press:90ms; --motion-enter:260ms; --motion-call:900ms;
  --ease-standard:cubic-bezier(.2,0,0,1);
  --ease-out-expo:cubic-bezier(.16,1,.3,1);
  --ease-stamp:cubic-bezier(.3,1.4,.5,1);
  --enter-distance:6px;
  --press-scale:.97;
}

@media (max-width: 767px) {
  :root {
    --text-display-nup: 1.875rem;
    --text-h1: 1.5rem;
    --text-h2: 1.25rem;
    --text-h3: 1.0625rem;
    --text-body-lg: 1rem;
    --text-body: 0.9375rem;
    --text-body-sm: 0.8125rem;
    --text-caption: 0.75rem;
    --control-h: 42px;
    --control-h-sm: 34px;
    --layout-bottomnav-h: 58px;
  }
}

/* Reduced motion: no spatial movement, short fades stay so state changes remain visible. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-slow:120ms; --motion-enter:120ms; --motion-call:240ms;
    --enter-distance:0px; --press-scale:1;
  }
}

:focus-visible { outline:2px solid var(--color-focus-ring); outline-offset:2px; }