/* pantau-mala Design System v2 — Malapetaka Edition. */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/fonts/dm-sans-latin-ext-0d0609aee778.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/fonts/dm-sans-latin-aa530716b0d3.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/fonts/plus-jakarta-sans-latin-ext-0303e02b53b0.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/fonts/plus-jakarta-sans-latin-cd8db90cd950.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;
  /* Primitives: Palet Khusus Pantau Mala (Obsidian, Slate & Alert Ember) */
  --slate-900: #0f172a;
  --slate-800: #1e293b;
  --slate-600: #475569;
  --slate-500: #64748b;
  --slate-400: #94a3b8;
  --slate-200: #e2e8f0;
  --slate-100: #f1f5f9;
  --slate-50: #f8fafc;
  --white: #ffffff;

  --brand-700: #c2410c; /* ember alert */
  --brand-800: #9a3412;
  --brand-900: #7c2d12;
  --amber-500: #d97706; /* alert siaga */
  --red-700: #dc2626;   /* alert bahaya */

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Radius: Compact & Crisp */
  --radius-small: 6px;
  --radius-control: 6px;
  --radius-card: 8px;
  --radius-shell: 12px;
  --radius-pill: 999px;

  /* Tipografi: Compact & Clean — Hindari font ukuran raksasa */
  --type-xs: 10px;
  --type-caption: 11px;
  --type-utility: 12px;
  --type-body: 13px;
  --type-input: 13px;
  --type-card: 14px;
  --type-section: 15px;
  --type-page: 16px;
  --type-hero: 18px;
  --type-phone: 16px;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-heading: 700;
  --line-body: 1.5;
  --line-heading: 1.2;
  --line-code: 1.6;
  --tracking-heading: -0.02em;

  /* Smooth Transitions — No hard jumps */
  --duration-fast: 180ms;
  --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
  --opacity-disabled: 0.5;

  /* Bayangan Halus */
  --shadow-panel: 0 4px 16px -4px rgb(15 23 42 / 0.1);
  --shadow-menu: 0 8px 24px rgb(15 23 42 / 0.12);
  --shadow-control: 0 1px 2px rgb(15 23 42 / 0.06);
  --shadow-focus: 0 0 0 3px rgb(194 65 12 / 0.15);

  /* Semantic Variables */
  --color-background: var(--slate-50);
  --color-surface: var(--white);
  --color-text: var(--slate-900);
  --color-muted: var(--slate-600);
  --color-border: var(--slate-200);
  --color-control-border: var(--slate-400);
  --color-primary: var(--brand-700);
  --color-primary-hover: var(--brand-800);
  --color-primary-active: var(--brand-900);
  --color-on-primary: var(--white);
  --color-soft: var(--slate-100);
  --color-attention: var(--amber-500);
  --color-danger: var(--red-700);
  --color-focus: var(--brand-700);

  --font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-heading: "Plus Jakarta Sans", "DM Sans", -apple-system, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Consolas, monospace;

  /* Component Dimensions: Dense, Compact, Clean */
  --button-radius: var(--radius-control);
  --button-height: 34px;
  --button-font-size: var(--type-utility);
  --input-radius: var(--radius-control);
  --input-height: 34px;
  --card-radius: var(--radius-card);
  --card-padding: var(--space-4);
  --page-gutter: var(--space-5);
  --page-title-size: var(--type-page);
  --workspace-width: 1200px;
  --creation-width: 280px;
  --icon-size: 16px;
}

@media (max-width: 760px) {
  :root {
    --button-height: 36px;
    --card-padding: var(--space-3);
    --page-gutter: var(--space-3);
    --page-title-size: var(--type-section);
  }
}