/* ELS divisi — token warna dan ukuran (KONTRAK §10: tokens.css dari template). Komponen: app.css.
   DARI TEMPLATE (D:\Aplikasi\_template) — jangan diubah di aplikasi divisi; perbaiki di template lalu salin ulang.

   Warna = palet Sales Kit (keputusan GM 2 Nov 2026, SPEC portal §17 no. 16), sama dengan portal elsapp.dev dan ELS
   Manager: blok "palet Sales Kit" disalin apa adanya dari D:\Aplikasi\Sales Kit\app\css\tokens.css (dark palette,
   light palette, explicit dark). Bila Sales Kit mengganti paletnya, salin ulang blok itu saja (di portal dan di sini).
   Aturan hanya memakai token --color-* di bawah. Tema mengikuti sistem (gelap = dasar); data-theme="light"/"dark" di
   <html> memaksa salah satunya. CSP: style-src 'self' (tanpa style inline). */

/* ================================================================== palet Sales Kit (salinan) */
:root {
  color-scheme: dark;

  /* ---- dark palette ---- */
  --bg: #050816;
  --bg-2: #0B1130;
  --surface: rgba(13, 19, 52, .78);
  --surface-solid: #0B1130;
  --surface-raised: #10183F;
  --surface-2: rgba(255, 255, 255, .045);
  --surface-3: rgba(255, 255, 255, .08);
  --text: #EEF2FF;
  --muted: #A7B1D6;
  --dim: #8A94BF;
  --stroke: rgba(165, 180, 252, .16);
  --stroke-strong: rgba(165, 180, 252, .30);
  --backdrop: rgba(2, 4, 14, .62);
  --glass: rgba(8, 12, 34, .72);
  --highlight: rgba(255, 255, 255, .06);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35), 0 1px 1px rgba(0, 0, 0, .2);
  --shadow: 0 12px 32px -12px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .25);
  --shadow-lg: 0 30px 80px -20px rgba(0, 0, 0, .7), 0 8px 24px rgba(0, 0, 0, .35);

  --aurora-opacity: .22;

  /* brand gradient (raised [+] / FAB) and small shared effects */
  --on-brand: #050816;                      /* icon/text on the cyan -> violet brand gradient */
  --brand-glow: rgba(34, 211, 238, .45);    /* glow under the brand mark */
  --knob: #FFFFFF;                          /* toggle thumb */
  --knob-shadow: 0 2px 6px rgba(0, 0, 0, .28), 0 0 0 .5px rgba(0, 0, 0, .06);
  --inset-hi: rgba(255, 255, 255, .18);     /* top highlight on gradient buttons */
  --shimmer: rgba(255, 255, 255, .35);      /* progress shimmer */
  --shadow-up: 0 -10px 30px -18px rgba(0, 0, 0, .45); /* bottom nav */

  --cyan: #22D3EE;  --cyan-soft: rgba(34, 211, 238, .14);   --cyan-ink: #67E8F9;   --on-cyan: #04121A;   --cyan-glow: rgba(34, 211, 238, .38);
  --violet: #A78BFA; --violet-soft: rgba(167, 139, 250, .15); --violet-ink: #C4B5FD; --on-violet: #0B1030; --violet-glow: rgba(167, 139, 250, .40);
  --pink: #F472B6;   --pink-soft: rgba(244, 114, 182, .14);   --pink-ink: #F9A8D4;   --on-pink: #1A0610;   --pink-glow: rgba(244, 114, 182, .38);
  --amber: #FBBF24;  --amber-soft: rgba(251, 191, 36, .14);   --amber-ink: #FCD34D;  --on-amber: #1A1002;  --amber-glow: rgba(251, 191, 36, .36);
  --green: #34D399;  --green-soft: rgba(52, 211, 153, .14);   --green-ink: #6EE7B7;  --on-green: #031A12;  --green-glow: rgba(52, 211, 153, .36);
  --blue: #60A5FA;   --blue-soft: rgba(96, 165, 250, .15);    --blue-ink: #93C5FD;   --on-blue: #06102A;   --blue-glow: rgba(96, 165, 250, .38);
  --red: #FB7185;    --red-soft: rgba(251, 113, 133, .15);    --red-ink: #FDA4AF;    --on-red: #1F050B;    --red-glow: rgba(251, 113, 133, .38);
  --slate: #94A3B8;  --slate-soft: rgba(148, 163, 184, .15);  --slate-ink: #CBD5E1;  --on-slate: #0B1030;  --slate-glow: rgba(148, 163, 184, .30);

  /* default accent */
  --accent: var(--cyan);
  --accent-2: var(--violet);
  --accent-soft: var(--cyan-soft);
  --accent-ink: var(--cyan-ink);
  --accent-glow: var(--cyan-glow);
  --on-accent: var(--on-cyan);
}

/* ---- light palette: system preference (when no explicit dark) ---- */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #F3F6FF;
    --bg-2: #FFFFFF;
    --surface: rgba(255, 255, 255, .86);
    --surface-solid: #FFFFFF;
    --surface-raised: #FFFFFF;
    --surface-2: rgba(11, 16, 48, .035);
    --surface-3: rgba(11, 16, 48, .07);
    --text: #0B1030;
    --muted: #48527D;
    --dim: #5F6991;
    --stroke: rgba(40, 50, 120, .12);
    --stroke-strong: rgba(40, 50, 120, .24);
    --backdrop: rgba(11, 16, 48, .38);
    --glass: rgba(255, 255, 255, .78);
    --highlight: rgba(255, 255, 255, .7);
    --shadow-sm: 0 1px 2px rgba(30, 40, 100, .07), 0 1px 1px rgba(30, 40, 100, .04);
    --shadow: 0 14px 34px -14px rgba(30, 40, 100, .20), 0 2px 6px rgba(30, 40, 100, .05);
    --shadow-lg: 0 30px 70px -20px rgba(30, 40, 100, .32), 0 8px 20px rgba(30, 40, 100, .08);
    --aurora-opacity: .13;
    --on-brand: #FFFFFF;
    --brand-glow: rgba(14, 116, 144, .32);
    --knob-shadow: 0 2px 6px rgba(30, 40, 100, .25), 0 0 0 .5px rgba(30, 40, 100, .08);
    --shimmer: rgba(255, 255, 255, .45);
    --shadow-up: 0 -10px 30px -18px rgba(30, 40, 100, .22);
    --cyan: #0E7490;   --cyan-soft: rgba(14, 116, 144, .10);  --cyan-ink: #155E75;   --on-cyan: #FFFFFF;   --cyan-glow: rgba(14, 116, 144, .28);
    --violet: #7C3AED; --violet-soft: rgba(124, 58, 237, .10); --violet-ink: #6D28D9; --on-violet: #FFFFFF; --violet-glow: rgba(124, 58, 237, .28);
    --pink: #DB2777;   --pink-soft: rgba(219, 39, 119, .10);  --pink-ink: #BE185D;   --on-pink: #FFFFFF;   --pink-glow: rgba(219, 39, 119, .26);
    --amber: #B45309;  --amber-soft: rgba(180, 83, 9, .10);   --amber-ink: #92400E;  --on-amber: #FFFFFF;  --amber-glow: rgba(180, 83, 9, .26);
    --green: #047857;  --green-soft: rgba(4, 120, 87, .10);   --green-ink: #065F46;  --on-green: #FFFFFF;  --green-glow: rgba(4, 120, 87, .26);
    --blue: #2563EB;   --blue-soft: rgba(37, 99, 235, .10);   --blue-ink: #1D4ED8;   --on-blue: #FFFFFF;   --blue-glow: rgba(37, 99, 235, .26);
    --red: #BE123C;    --red-soft: rgba(190, 18, 60, .10);    --red-ink: #9F1239;    --on-red: #FFFFFF;    --red-glow: rgba(190, 18, 60, .26);
    --slate: #475569;  --slate-soft: rgba(71, 85, 105, .10);  --slate-ink: #334155;  --on-slate: #FFFFFF;  --slate-glow: rgba(71, 85, 105, .22);
  }
}

/* ---- light palette: explicit choice ---- */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #F3F6FF;
  --bg-2: #FFFFFF;
  --surface: rgba(255, 255, 255, .86);
  --surface-solid: #FFFFFF;
  --surface-raised: #FFFFFF;
  --surface-2: rgba(11, 16, 48, .035);
  --surface-3: rgba(11, 16, 48, .07);
  --text: #0B1030;
  --muted: #48527D;
  --dim: #5F6991;
  --stroke: rgba(40, 50, 120, .12);
  --stroke-strong: rgba(40, 50, 120, .24);
  --backdrop: rgba(11, 16, 48, .38);
  --glass: rgba(255, 255, 255, .78);
  --highlight: rgba(255, 255, 255, .7);
  --shadow-sm: 0 1px 2px rgba(30, 40, 100, .07), 0 1px 1px rgba(30, 40, 100, .04);
  --shadow: 0 14px 34px -14px rgba(30, 40, 100, .20), 0 2px 6px rgba(30, 40, 100, .05);
  --shadow-lg: 0 30px 70px -20px rgba(30, 40, 100, .32), 0 8px 20px rgba(30, 40, 100, .08);
  --aurora-opacity: .13;
  --on-brand: #FFFFFF;
  --brand-glow: rgba(14, 116, 144, .32);
  --knob-shadow: 0 2px 6px rgba(30, 40, 100, .25), 0 0 0 .5px rgba(30, 40, 100, .08);
  --shimmer: rgba(255, 255, 255, .45);
  --shadow-up: 0 -10px 30px -18px rgba(30, 40, 100, .22);
  --cyan: #0E7490;   --cyan-soft: rgba(14, 116, 144, .10);  --cyan-ink: #155E75;   --on-cyan: #FFFFFF;   --cyan-glow: rgba(14, 116, 144, .28);
  --violet: #7C3AED; --violet-soft: rgba(124, 58, 237, .10); --violet-ink: #6D28D9; --on-violet: #FFFFFF; --violet-glow: rgba(124, 58, 237, .28);
  --pink: #DB2777;   --pink-soft: rgba(219, 39, 119, .10);  --pink-ink: #BE185D;   --on-pink: #FFFFFF;   --pink-glow: rgba(219, 39, 119, .26);
  --amber: #B45309;  --amber-soft: rgba(180, 83, 9, .10);   --amber-ink: #92400E;  --on-amber: #FFFFFF;  --amber-glow: rgba(180, 83, 9, .26);
  --green: #047857;  --green-soft: rgba(4, 120, 87, .10);   --green-ink: #065F46;  --on-green: #FFFFFF;  --green-glow: rgba(4, 120, 87, .26);
  --blue: #2563EB;   --blue-soft: rgba(37, 99, 235, .10);   --blue-ink: #1D4ED8;   --on-blue: #FFFFFF;   --blue-glow: rgba(37, 99, 235, .26);
  --red: #BE123C;    --red-soft: rgba(190, 18, 60, .10);    --red-ink: #9F1239;    --on-red: #FFFFFF;    --red-glow: rgba(190, 18, 60, .26);
  --slate: #475569;  --slate-soft: rgba(71, 85, 105, .10);  --slate-ink: #334155;  --on-slate: #FFFFFF;  --slate-glow: rgba(71, 85, 105, .22);
}

/* ---- explicit dark keeps the base palette (declared for clarity / specificity parity) ---- */
:root[data-theme="dark"] { color-scheme: dark; }

/* ================================================================== token divisi */
:root {
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --fs-xs: .75rem;
  --fs-sm: .875rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --lh: 1.5;

  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --tap: 44px;
  --content-max: 960px;

  /* peran warna → palet Sales Kit (nilai terang/gelap ikut palet) */
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-surface-solid: var(--surface-solid);
  --color-surface-raised: var(--surface-raised);
  --color-surface-2: var(--surface-2);
  --color-surface-3: var(--surface-3);
  --color-glass: var(--glass);
  --color-highlight: var(--highlight);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-dim: var(--dim);
  --color-border: var(--stroke);
  --color-border-strong: var(--stroke-strong);
  --color-primary: var(--accent);
  --color-primary-2: var(--accent-2);
  --color-on-primary: var(--on-accent);
  --color-primary-soft: var(--accent-soft);
  --color-primary-glow: var(--accent-glow);
  --color-link: var(--accent-ink);
  --color-focus: var(--accent);
  --color-inset-hi: var(--inset-hi);
  --color-danger: var(--red);
  --color-on-danger: var(--on-red);
  --color-danger-glow: var(--red-glow);
  --color-danger-text: var(--red-ink);
  --color-danger-bg: var(--red-soft);
  --color-danger-border: var(--red-glow);
  --color-warning-text: var(--amber-ink);
  --color-warning-bg: var(--amber-soft);
  --color-warning-border: var(--amber-glow);
  --color-success-text: var(--green-ink);
  --color-success-bg: var(--green-soft);
  --color-success-border: var(--green-glow);
  --color-info-text: var(--blue-ink);
  --color-info-bg: var(--blue-soft);
  --color-info-border: var(--blue-glow);
  --color-backdrop: var(--backdrop);
  --color-aurora-3: var(--violet); /* noda aurora ketiga; opasitas: --aurora-opacity dari palet */
  --gradient-primary: linear-gradient(135deg, var(--color-primary), var(--color-primary-2));
  /* --shadow-sm / --shadow / --shadow-lg: dari palet Sales Kit */
}