/* ==========================================================================
   tokens.css — salinan token console Vaultanesia (apps/web/src/styles/tokens.css) untuk panel license server; sinkronkan bila berubah.
   Arah "Brankas rapi" (docs/uiux-brief.md): netral baja dingin (hue 230) + satu aksen hijau laut
   (hue 185), Operate Tier 0. Tiga lapis: primitive (oklch mentah, tidak dipakai komponen) →
   semantic (--bg, --surface, --accent, …; satu-satunya lapis yang berganti per tema) → component.
   Satu-satunya file (selain cermin Mantine di app/theme.ts) yang boleh memuat nilai warna mentah.
   Tema di-set theme-init.js di index.html: <html data-theme="light|dark">.
   Setelah mengubah hue/lightness jalankan: pnpm --filter ./apps/web check:contrast
   ========================================================================== */

@layer reset, base, components, utilities;

/* 1. PRIMITIVE */
:root {
  --hue-neutral: 230;
  --hue-accent: 185;

  --neutral-0: oklch(99.4% 0.002 var(--hue-neutral));
  --neutral-50: oklch(97.8% 0.004 var(--hue-neutral));
  --neutral-100: oklch(95.4% 0.006 var(--hue-neutral));
  --neutral-150: oklch(92.8% 0.008 var(--hue-neutral));
  --neutral-200: oklch(89.8% 0.009 var(--hue-neutral));
  --neutral-300: oklch(83% 0.011 var(--hue-neutral));
  --neutral-400: oklch(71% 0.013 var(--hue-neutral));
  --neutral-500: oklch(58% 0.014 var(--hue-neutral));
  --neutral-600: oklch(48.5% 0.015 var(--hue-neutral));
  --neutral-700: oklch(39% 0.015 var(--hue-neutral));
  --neutral-800: oklch(30% 0.014 var(--hue-neutral));
  --neutral-850: oklch(25.5% 0.013 var(--hue-neutral));
  --neutral-900: oklch(21.5% 0.012 var(--hue-neutral));
  --neutral-950: oklch(17% 0.01 var(--hue-neutral));
  --neutral-975: oklch(14% 0.009 var(--hue-neutral));

  /* Hijau laut: chroma dijaga ≤ 0.10 agar tidak jatuh ke "mint neon" di dark (SLP-6). */
  --accent-50: oklch(97% 0.016 var(--hue-accent));
  --accent-100: oklch(94% 0.035 var(--hue-accent));
  --accent-200: oklch(88% 0.06 var(--hue-accent));
  --accent-300: oklch(80% 0.095 var(--hue-accent));
  --accent-400: oklch(72% 0.1 var(--hue-accent));
  --accent-500: oklch(62% 0.1 var(--hue-accent));
  --accent-600: oklch(52% 0.09 var(--hue-accent));
  --accent-700: oklch(45% 0.08 var(--hue-accent));
  --accent-800: oklch(37% 0.065 var(--hue-accent));
  --accent-900: oklch(29% 0.05 var(--hue-accent));
  --accent-950: oklch(23% 0.038 var(--hue-accent));

  --green-50: oklch(97% 0.02 150);
  --green-300: oklch(82% 0.12 150);
  --green-400: oklch(73% 0.15 150);
  --green-600: oklch(52% 0.13 150);
  --green-700: oklch(45% 0.11 150);
  --green-950: oklch(24% 0.05 150);
  --amber-50: oklch(97.5% 0.02 80);
  --amber-300: oklch(86% 0.13 80);
  --amber-400: oklch(79% 0.15 75);
  --amber-600: oklch(61% 0.13 65);
  --amber-700: oklch(48% 0.11 60);
  --amber-950: oklch(25% 0.05 65);
  --red-50: oklch(97% 0.012 25);
  --red-300: oklch(80% 0.1 25);
  --red-400: oklch(71% 0.16 25);
  --red-600: oklch(54% 0.19 27);
  --red-700: oklch(47% 0.17 27);
  --red-950: oklch(24% 0.07 25);
  --blue-50: oklch(97% 0.013 245);
  --blue-300: oklch(80% 0.09 245);
  --blue-400: oklch(71% 0.13 245);
  --blue-600: oklch(53% 0.15 250);
  --blue-700: oklch(46% 0.14 252);
  --blue-950: oklch(24% 0.06 250);

  /* Tipografi (Operate: Poppins; mono hanya data) */
  --font-family-base:
    "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-family-display: var(--font-family-base);
  --font-family-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.2rem;
  --font-size-xl: 1.44rem;
  --font-size-2xl: 1.728rem;
  --leading-heading: 1.2;
  --leading-ui: 1.4;
  --leading-body: 1.6;
  --tracking-heading: -0.01em;
  --tracking-label: 0.06em;

  /* Spacing 4px, ritme 8 */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --header-h: 3.5rem; /* topbar 56px; dipakai scroll-padding-top */
  --ribbon-h: 3px; /* pita kesehatan (signature) */
  --sidebar-w: 15rem;

  /* Radius: keluarga produk/SaaS kecil-sedang; anak ≤ induk */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 9999px;
  --radius-control: var(--radius-md);
  --radius-card: var(--radius-lg);
  --border-width: 1px;
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;

  /* Motion Tier 0 */
  --dur-micro: 120ms;
  --dur-ui: 200ms;
  --dur-ui-exit: 150ms;
  --dur-overlay: 200ms;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in: cubic-bezier(0.5, 0, 0.75, 0);

  --z-sticky: 100;
  --z-header: 200;
  --z-dropdown: 300;
  --z-overlay: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-toast: 700;
  --z-tooltip: 800;
}

/* 2. SEMANTIC — LIGHT */
:root,
[data-theme="light"] {
  --bg: var(--neutral-50);
  --surface: var(--neutral-0);
  --surface-raised: var(--neutral-0);
  --surface-sunken: var(--neutral-100);
  --surface-inverse: var(--neutral-900);
  --surface-hover: oklch(21.5% 0.012 var(--hue-neutral) / 0.05);
  --surface-active: oklch(21.5% 0.012 var(--hue-neutral) / 0.09);
  --text-primary: var(--neutral-900);
  --text-secondary: var(--neutral-700);
  --text-muted: var(--neutral-600);
  --text-disabled: var(--neutral-400);
  --text-inverse: var(--neutral-50);
  --text-link: var(--accent-700);
  --border-subtle: var(--neutral-150);
  --border: var(--neutral-200);
  --border-strong: var(--neutral-500);
  --accent: var(--accent-600);
  --accent-hover: var(--accent-700);
  --accent-active: var(--accent-800);
  --on-accent: var(--neutral-0);
  --accent-soft: var(--accent-50);
  --accent-text: var(--accent-700);
  --success: var(--green-600);
  --success-text: var(--green-700);
  --success-soft: var(--green-50);
  --on-success: var(--neutral-0);
  --warning: var(--amber-600);
  --warning-text: var(--amber-700);
  --warning-soft: var(--amber-50);
  --on-warning: var(--neutral-975);
  --danger: var(--red-600);
  --danger-text: var(--red-700);
  --danger-soft: var(--red-50);
  --on-danger: var(--neutral-0);
  --info: var(--blue-600);
  --info-text: var(--blue-700);
  --info-soft: var(--blue-50);
  --on-info: var(--neutral-0);
  --focus-ring: var(--accent-600);
  --overlay: oklch(21.5% 0.012 var(--hue-neutral) / 0.45);
  --selection-bg: var(--accent-200);
  --selection-text: var(--neutral-900);
  --chart-1: oklch(52% 0.09 185);
  --chart-2: oklch(60% 0.15 50);
  --chart-3: oklch(52% 0.13 290);
  --chart-4: oklch(55% 0.12 145);
  --chart-5: oklch(55% 0.17 355);
  --chart-6: oklch(56% 0.11 95);
  --chart-grid: var(--neutral-150);
  --chart-axis: var(--neutral-600);
  --shadow-1:
    0 1px 2px oklch(21.5% 0.02 var(--hue-neutral) / 0.06),
    0 1px 1px oklch(21.5% 0.02 var(--hue-neutral) / 0.04);
  --shadow-2:
    0 2px 4px oklch(21.5% 0.02 var(--hue-neutral) / 0.06),
    0 8px 20px oklch(21.5% 0.02 var(--hue-neutral) / 0.07);
  --shadow-3:
    0 4px 8px oklch(21.5% 0.02 var(--hue-neutral) / 0.06),
    0 20px 48px oklch(21.5% 0.02 var(--hue-neutral) / 0.12);
  --image-filter: none;
}

:root {
  color-scheme: light dark;
}
[data-theme="light"] {
  color-scheme: light;
}
[data-theme="dark"] {
  color-scheme: dark;
}

/* 3. SEMANTIC — DARK (dirancang sendiri: elevasi = surface lebih terang) */
[data-theme="dark"] {
  --bg: var(--neutral-950);
  --surface: var(--neutral-900);
  --surface-raised: var(--neutral-850);
  --surface-sunken: var(--neutral-975);
  --surface-inverse: var(--neutral-100);
  --surface-hover: oklch(97.8% 0.004 var(--hue-neutral) / 0.06);
  --surface-active: oklch(97.8% 0.004 var(--hue-neutral) / 0.1);
  --text-primary: var(--neutral-100);
  --text-secondary: var(--neutral-300);
  --text-muted: var(--neutral-400);
  --text-disabled: var(--neutral-600);
  --text-inverse: var(--neutral-900);
  --text-link: var(--accent-300);
  --border-subtle: var(--neutral-850);
  --border: var(--neutral-800);
  --border-strong: var(--neutral-500);
  --accent: var(--accent-400);
  --accent-hover: var(--accent-300);
  --accent-active: var(--accent-200);
  --on-accent: var(--neutral-975);
  --accent-soft: var(--accent-950);
  --accent-text: var(--accent-300);
  --success: var(--green-400);
  --success-text: var(--green-300);
  --success-soft: var(--green-950);
  --on-success: var(--neutral-975);
  --warning: var(--amber-400);
  --warning-text: var(--amber-300);
  --warning-soft: var(--amber-950);
  --on-warning: var(--neutral-975);
  --danger: var(--red-400);
  --danger-text: var(--red-300);
  --danger-soft: var(--red-950);
  --on-danger: var(--neutral-975);
  --info: var(--blue-400);
  --info-text: var(--blue-300);
  --info-soft: var(--blue-950);
  --on-info: var(--neutral-975);
  --focus-ring: var(--accent-300);
  --overlay: oklch(8% 0.005 var(--hue-neutral) / 0.65);
  --selection-bg: var(--accent-800);
  --selection-text: var(--neutral-50);
  --chart-1: oklch(75% 0.1 185);
  --chart-2: oklch(76% 0.13 55);
  --chart-3: oklch(72% 0.12 290);
  --chart-4: oklch(74% 0.13 145);
  --chart-5: oklch(72% 0.14 355);
  --chart-6: oklch(80% 0.12 95);
  --chart-grid: var(--neutral-850);
  --chart-axis: var(--neutral-400);
  --shadow-1: 0 0 0 1px oklch(100% 0 0 / 0.05);
  --shadow-2: 0 0 0 1px oklch(100% 0 0 / 0.07), 0 8px 20px oklch(0% 0 0 / 0.35);
  --shadow-3: 0 0 0 1px oklch(100% 0 0 / 0.09), 0 20px 48px oklch(0% 0 0 / 0.5);
  --image-filter: brightness(0.92) contrast(1.05);
}

/* Mode system / JS mati di OS gelap — WAJIB identik dengan blok [data-theme="dark"] */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--neutral-950);
    --surface: var(--neutral-900);
    --surface-raised: var(--neutral-850);
    --surface-sunken: var(--neutral-975);
    --surface-inverse: var(--neutral-100);
    --surface-hover: oklch(97.8% 0.004 var(--hue-neutral) / 0.06);
    --surface-active: oklch(97.8% 0.004 var(--hue-neutral) / 0.1);
    --text-primary: var(--neutral-100);
    --text-secondary: var(--neutral-300);
    --text-muted: var(--neutral-400);
    --text-disabled: var(--neutral-600);
    --text-inverse: var(--neutral-900);
    --text-link: var(--accent-300);
    --border-subtle: var(--neutral-850);
    --border: var(--neutral-800);
    --border-strong: var(--neutral-500);
    --accent: var(--accent-400);
    --accent-hover: var(--accent-300);
    --accent-active: var(--accent-200);
    --on-accent: var(--neutral-975);
    --accent-soft: var(--accent-950);
    --accent-text: var(--accent-300);
    --success: var(--green-400);
    --success-text: var(--green-300);
    --success-soft: var(--green-950);
    --on-success: var(--neutral-975);
    --warning: var(--amber-400);
    --warning-text: var(--amber-300);
    --warning-soft: var(--amber-950);
    --on-warning: var(--neutral-975);
    --danger: var(--red-400);
    --danger-text: var(--red-300);
    --danger-soft: var(--red-950);
    --on-danger: var(--neutral-975);
    --info: var(--blue-400);
    --info-text: var(--blue-300);
    --info-soft: var(--blue-950);
    --on-info: var(--neutral-975);
    --focus-ring: var(--accent-300);
    --overlay: oklch(8% 0.005 var(--hue-neutral) / 0.65);
    --selection-bg: var(--accent-800);
    --selection-text: var(--neutral-50);
    --chart-1: oklch(75% 0.1 185);
    --chart-2: oklch(76% 0.13 55);
    --chart-3: oklch(72% 0.12 290);
    --chart-4: oklch(74% 0.13 145);
    --chart-5: oklch(72% 0.14 355);
    --chart-6: oklch(80% 0.12 95);
    --chart-grid: var(--neutral-850);
    --chart-axis: var(--neutral-400);
    --shadow-1: 0 0 0 1px oklch(100% 0 0 / 0.05);
    --shadow-2: 0 0 0 1px oklch(100% 0 0 / 0.07), 0 8px 20px oklch(0% 0 0 / 0.35);
    --shadow-3: 0 0 0 1px oklch(100% 0 0 / 0.09), 0 20px 48px oklch(0% 0 0 / 0.5);
    --image-filter: brightness(0.92) contrast(1.05);
  }
}

/* Alias lama --nv-* agar komponen yang belum dimigrasi tetap konsisten dengan token baru. */
:root {
  --nv-accent: var(--accent);
  --nv-accent-soft: var(--accent-soft);
  --nv-danger: var(--danger);
  --nv-warning: var(--warning);
  --nv-success: var(--success);
  --nv-surface: var(--bg);
  --nv-surface-raised: var(--surface);
  --nv-border: var(--border);
  --nv-text-primary: var(--text-primary);
  --nv-text-muted: var(--text-muted);
  --nv-radius: var(--radius-md);
  --nv-space-page: var(--space-6);
  --nv-duration-fast: var(--dur-micro);
  --nv-font-mono: var(--font-family-mono);
}

/* 4. BASE */
@layer base {
  html {
    background: var(--bg);
    color: var(--text-primary);
    font-family: var(--font-family-base);
    font-size: 100%;
    line-height: var(--leading-body);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: calc(var(--header-h) + var(--ribbon-h) + var(--space-2));
  }
  body {
    margin: 0;
  }
  [data-theme] {
    color: var(--text-primary);
  }
  [hidden] {
    display: none !important;
  }
  h1,
  h2,
  h3 {
    text-wrap: balance;
    line-height: var(--leading-heading);
    letter-spacing: var(--tracking-heading);
  }
  p {
    text-wrap: pretty;
  }
  ::selection {
    background: var(--selection-bg);
    color: var(--selection-text);
  }
  :focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }
  .theme-switching,
  .theme-switching *,
  .theme-switching *::before,
  .theme-switching *::after {
    transition: none !important;
  }
  /* Skip link (rules §11.4): tersembunyi sampai fokus */
  .nv-skip-link {
    position: absolute;
    inset-inline-start: var(--space-4);
    inset-block-start: calc(-1 * var(--space-16));
    z-index: var(--z-tooltip);
    padding: var(--space-2) var(--space-3);
    background: var(--surface-raised);
    color: var(--text-primary);
    border: var(--border-width) solid var(--border-strong);
    border-radius: var(--radius-control);
    box-shadow: var(--shadow-2);
    &:focus-visible {
      inset-block-start: var(--space-4);
    }
  }
}

@layer utilities {
  .nv-mono {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-sm);
    font-variant-numeric: tabular-nums;
  }
  .nv-num {
    font-variant-numeric: tabular-nums;
    text-align: end;
  }
  /* Artwork SVG kustom (imagery.md §6b): warna dari token, jalan di dua tema */
  .art {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    color: var(--text-secondary);
  }
  .art .art-bg {
    fill: var(--surface-sunken);
  }
  .art .art-fill {
    fill: var(--surface-raised);
  }
  .art .art-line {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
  }
  .art .art-thin {
    stroke-width: 1;
    opacity: 0.55;
  }
  .art .art-accent {
    fill: var(--accent);
  }
  .art .art-accent-line {
    fill: none;
    stroke: var(--accent);
    stroke-width: 3;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
  }
  .art .art-soft {
    fill: var(--accent-soft);
  }
  .art .art-shade {
    fill: currentColor;
    opacity: 0.08;
  }
}