/* ============================================================
   Design Tokens, sumber kebenaran visual (mirror Laravel nanti)
   Tema: :root = LIGHT (default), [data-theme="dark"] = override.
   Brand surfaces (hero/page-hero/footer/ctaBand) tetap navy di kedua tema.
   ============================================================ */
:root {
  /* Brand palette (tema-independen) */
  --c-primary: #0f2a43;       /* baja industri */
  --c-primary-700: #123a5e;
  --c-primary-900: #0a1d30;
  --c-accent: #14a0b8;        /* air terproses */
  --c-accent-600: #0a6d80;    /* bg tombol + teks accent di light */
  --c-support: #2e8b57;       /* hijau lingkungan */
  --c-warn: #e8743b;          /* oranye besi */

  /* Netral & semantik, LIGHT (default) */
  --c-bg: #ffffff;
  --c-surface: #f5f7fa;
  --c-surface-2: #eef2f6;
  --c-card: #ffffff;
  --c-border: #dde4ec;
  --c-text: #1b2330;
  --c-text-muted: #5b6776;
  --c-heading: #0f2a43;
  --c-on-dark: #f4f7fb;              /* teks di atas brand navy */
  --c-on-dark-muted: rgba(244,247,251,.78);
  --c-accent-fg: #0a6d80;            /* teks accent di atas kartu (light) */
  --c-accent-tint: rgba(20,160,184,.12);
  --c-support-tint: rgba(46,139,87,.14);
  --c-support-fg: #1f6b40;
  --c-header-bg: #ffffff;             /* opaque: header solid (backdrop-filter dihapus) */

  /* Tipografi (tema-independen) */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-xs: 0.78rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 2.25rem;
  --fs-4xl: 3rem;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-normal: 1.6;

  /* Spacing scale */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  /* Radius & shadow */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(15, 42, 67, .06), 0 1px 3px rgba(15, 42, 67, .08);
  --shadow-md: 0 6px 18px rgba(15, 42, 67, .10);
  --shadow-lg: 0 18px 40px rgba(15, 42, 67, .14);

  /* Layout */
  --container: 1320px;
  --header-h: 68px;

  /* Motion */
  --t-fast: 120ms ease;
  --t-base: 200ms ease;

  color-scheme: light;
}

/* ---------- DARK (override) ---------- */
[data-theme="dark"] {
  --c-bg: #0a1828;
  --c-surface: #0f2236;
  --c-surface-2: #163049;
  --c-card: #102a41;
  --c-border: #24405e;
  --c-text: #e9eff7;
  --c-text-muted: #9db1c6;
  --c-heading: #eaf2fb;
  --c-on-dark: #ffffff;
  --c-on-dark-muted: rgba(255,255,255,.78);
  --c-accent-fg: #3fb8cc;            /* accent lebih terang utk teks di kartu dark */
  --c-accent-tint: rgba(20,160,184,.18);
  --c-support-tint: rgba(46,139,87,.22);
  --c-support-fg: #4ade80;
  --c-header-bg: #0f2236;             /* opaque dark */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.40);
  --shadow-md: 0 6px 18px rgba(0,0,0,.45);
  --shadow-lg: 0 18px 40px rgba(0,0,0,.55);
  color-scheme: dark;
}