/* LADENINE design tokens - single source of truth ("industrial premium").
   Light is the default; dark is enabled with <html data-theme="dark">.
   Every other stylesheet must read colors, spacing, radius, type and motion from here. */

:root,[data-theme=light]{
  /* Brand constants (also used by the public website; never themed) */
  --brand-orange:#ff4b00;--brand-charcoal:#202020;--brand-white:#fff;--brand-muted:#6b7280;--brand-border:#e2e9e8;
  --brand-radius:14px;--brand-space-sm:8px;--brand-space-md:16px;--brand-space-lg:24px;--brand-surface:#f6f7f9;
  --brand-font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  --brand-success:#287a52;--brand-warning:#95631c;--brand-danger:#a83b3b;

  color-scheme:light;

  /* Surfaces & lines (light) */
  --bg:#ffffff;
  --surface:#f6f6f7;
  --surface-raised:#f6f6f7;
  --surface-sunken:#efeff1;
  --surface-pop:#ffffff;
  --border:#e6e6e8;
  --border-strong:#cfcfd4;

  /* Text (light) - all pairs meet WCAG AA on --bg and --surface */
  --text:#0b0b0c;
  --text-muted:#55555d;
  --text-faint:#6b6b74;

  /* Accent: orange is the only primary color */
  --accent:#ff4b00;
  --accent-hover:#ff6320;
  --accent-press:#e64300;
  --accent-text:#c23600;
  --accent-soft:#fff0e8;
  --accent-line:#ffc2a6;
  --on-accent:#0b0b0c;
  --focus:#c23600;

  /* Status colors (only for status) */
  --green-text:#136c34;--green-bg:#e6f5ec;--green-line:#b5e2c6;--green:#1f9d55;
  --red-text:#b3261e;--red-bg:#fdecea;--red-line:#f5c2be;--red:#d92d20;
  --yellow-text:#83540a;--yellow-bg:#fff4d4;--yellow-line:#f1d58a;--yellow:#c98a06;
  --gray-text:#4f4f57;--gray-bg:#eeeef0;--gray-line:#d9d9de;

  /* Elevation: very soft in light mode */
  --shadow:0 1px 2px rgb(11 11 12 / .04),0 6px 20px rgb(11 11 12 / .04);
  --shadow-pop:0 12px 36px rgb(11 11 12 / .14),0 0 0 1px var(--border);
  --overlay:rgb(11 11 12 / .5);
  --skeleton-a:#ececef;--skeleton-b:#f6f6f7;

  /* Typography: system stack only */
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --fs-2xs:11px;--fs-xs:12px;--fs-sm:13px;--fs-md:14px;--fs-lg:16px;--fs-xl:20px;--fs-2xl:26px;--fs-3xl:34px;--fs-display:44px;
  --fw-regular:450;--fw-medium:600;--fw-bold:700;--fw-black:800;
  --tracking-tight:-.025em;--tracking-label:.12em;
  --lh-tight:1.15;--lh-body:1.55;

  /* Spacing 4/8/12/16/24/32/48 */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;

  /* Radius 10-14 */
  --r-sm:10px;--r-md:12px;--r-lg:14px;--r-pill:999px;

  /* Control heights */
  --h-control:40px;--h-control-lg:44px;--h-touch:44px;

  /* Motion: 150-200ms ease-out */
  --ease:cubic-bezier(.2,.7,.2,1);
  --t-fast:150ms;--t-base:180ms;--t-slow:200ms;

  /* Component radius: card 14, control (input/button) 10, badge pill */
  --radius-card:14px;--radius-control:10px;--radius-badge:999px;

  /* Soft elevation for cards and popovers */
  --shadow-sm:0 1px 2px rgb(11 11 12 / .04);

  /* Section rhythm (public site + long portal pages): 56 desktop, 44 tablet, 32 phone */
  --section-gap:56px;--section-head-gap:24px;
  --grid-gap:20px;--grid-gap-sm:16px;

  /* Type roles */
  --type-title:var(--fw-black) clamp(24px,2.4vw,30px)/var(--lh-tight) var(--font);
  --type-subtitle:var(--fw-bold) var(--fs-lg)/1.3 var(--font);
  --type-label:var(--fw-bold) var(--fs-2xs)/1.3 var(--font);
  --type-body:var(--fw-regular) var(--fs-md)/var(--lh-body) var(--font);
  --type-number:var(--fw-black) clamp(22px,2.1vw,30px)/1.1 var(--font);

  /* Icons: one outline set, 16/20px, same stroke */
  --icon-sm:16px;--icon-md:20px;--icon-stroke:1.75;

  /* Layout */
  --sidebar-w:248px;--sidebar-w-compact:72px;--topbar-h:64px;--content-max:1280px;

  /* Legacy aliases so older stylesheets keep working and follow the theme */
  --ink:var(--text);--muted:var(--text-muted);--line:var(--border);--teal:var(--accent);--teal-dark:var(--accent-text);
  --paper:var(--surface-raised);--soft:var(--accent-soft);--danger:var(--red-text);

  /* Public website (light). Orange fills stay --brand-orange in both themes; orange text uses --accent-text for AA. */
  --site-bg:#ffffff;
  --site-card-bg:#ffffff;
  --site-card-border:#e6e6e8;
  --site-card-shadow:0 1px 2px rgb(11 11 12 / .04);
  --site-card-shadow-hover:0 1px 2px rgb(11 11 12 / .04),0 8px 20px rgb(11 11 12 / .07);
  --site-divider:#ededf0;
  --site-dot:var(--brand-orange);
  --site-btn-text:#0b0b0c;
  --site-btn-hover:color-mix(in srgb,var(--site-accent,var(--brand-orange)) 86%,#fff);
  --site-btn-ghost-border:#d4d4d8;
  --site-btn-ghost-hover:#f4f4f5;
  --map-bg:#f7f7f8;
  --map-border:#e6e6e8;
  --map-idle:#e4e4e7;
  --map-idle-line:#ffffff;
  --map-coming:#d4d4d8;
  --map-active:var(--brand-orange);
  --map-active-line:#ffffff;
  --map-marker-ring:#ffffff;
  --map-pill-bg:#ffffff;
  --map-pill-text:#0b0b0c;
  --map-pill-border:#e4e4e7;
  --map-pill-shadow:0 1px 2px rgb(11 11 12 / .06),0 2px 8px rgb(11 11 12 / .06);
  /* Timeline "Perjalanan" & logo klien */
  --site-timeline-line:color-mix(in srgb,var(--brand-orange) 55%,transparent);
  --site-timeline-dot:var(--brand-orange);
  --site-timeline-dot-bg:var(--site-bg);
  --site-now-bg:var(--accent-soft);
  --site-now-text:var(--accent-text);
  --site-logo-idle-filter:grayscale(1);
  --site-logo-idle-opacity:.7;
  --site-logo-plate:transparent;
  --site-quote-border:var(--brand-orange);
}

[data-theme=dark]{
  color-scheme:dark;

  --bg:#0b0b0c;
  --surface:#141416;
  --surface-raised:#141416;
  --surface-sunken:#0f0f11;
  --surface-pop:#1a1a1d;
  --border:#26262a;
  --border-strong:#3a3a40;

  --text:#f4f4f5;
  --text-muted:#a5a5ae;
  --text-faint:#8a8a94;

  --accent-hover:#ff6a2b;
  --accent-press:#e64300;
  --accent-text:#ff7a3d;
  --accent-soft:rgb(255 75 0 / .12);
  --accent-line:rgb(255 75 0 / .4);
  --focus:#ff7a3d;

  --green-text:#4ade80;--green-bg:rgb(74 222 128 / .13);--green-line:rgb(74 222 128 / .32);--green:#4ade80;
  --red-text:#ff8a80;--red-bg:rgb(248 113 113 / .13);--red-line:rgb(248 113 113 / .34);--red:#f87171;
  --yellow-text:#fbbf24;--yellow-bg:rgb(251 191 36 / .13);--yellow-line:rgb(251 191 36 / .32);--yellow:#fbbf24;
  --gray-text:#b4b4bd;--gray-bg:rgb(161 161 170 / .13);--gray-line:rgb(161 161 170 / .28);

  /* Dark mode: hairlines instead of shadows */
  --shadow:none;
  --shadow-pop:0 0 0 1px var(--border-strong);
  --overlay:rgb(0 0 0 / .66);
  --skeleton-a:#1c1c1f;--skeleton-b:#26262a;

  /* Public website (dark) */
  --site-bg:#0b0b0c;
  --site-card-bg:#151517;
  --site-card-border:rgb(255 255 255 / .08);
  --site-card-shadow:none;
  --site-card-shadow-hover:0 8px 24px rgb(0 0 0 / .35);
  --site-divider:rgb(255 255 255 / .08);
  --site-btn-ghost-border:rgb(255 255 255 / .22);
  --site-btn-ghost-hover:rgb(255 255 255 / .06);
  --map-bg:#151517;
  --map-border:rgb(255 255 255 / .08);
  --map-idle:#2e2e33;
  --map-idle-line:#0e0e10;
  --map-coming:#3a3a40;
  --map-active-line:#151517;
  --map-marker-ring:#151517;
  --map-pill-bg:#1f1f23;
  --map-pill-text:#ffffff;
  --map-pill-border:rgb(255 255 255 / .12);
  --map-pill-shadow:0 2px 8px rgb(0 0 0 / .4);
  --site-timeline-line:color-mix(in srgb,var(--brand-orange) 65%,transparent);
  --site-logo-plate:rgb(255 255 255 / .9);
  --shadow-sm:none;
}

@media(max-width:1023px){:root{--section-gap:44px;--section-head-gap:22px}}
@media(max-width:767px){:root{--section-gap:32px;--section-head-gap:20px;--grid-gap:16px;--grid-gap-sm:12px}}

/* Logo: dark mode uses the white logo from Pengaturan when present. Never keep a white plate on dark surfaces. */
.brand-logo-light{display:none;background:transparent!important}
[data-theme=dark] .official-brand-logo,[data-theme=dark] .brand-logo-main,[data-theme=dark] .brand-logo-light{background:transparent!important}
[data-theme=dark] .has-light-logo .brand-logo-main:not(.logo-invertible){display:none}
[data-theme=dark] .has-light-logo .brand-logo-light{display:block}
/* Fallback when no white logo was chosen: invert the logo, keep the orange (hue-rotate). */
[data-theme=dark] .brand-logo-main.logo-invertible{filter:invert(1) hue-rotate(180deg);mix-blend-mode:screen}
/* Theme toggle: always the inverse of the surface it sits on - black on light, white on dark.
   Inside a surface that stays dark in both themes, add .on-dark to the button or a parent. */
.theme-toggle{--tt-bg:#0b0b0c;--tt-fg:#fff;--tt-ring:#c23600;position:relative;display:inline-grid;place-items:center;flex:none;width:40px;height:40px;padding:0;border:1px solid var(--tt-bg);border-radius:12px;background:var(--tt-bg);color:var(--tt-fg);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .18s ease,color .18s ease,border-color .18s ease,transform .15s ease}
[data-theme=dark] .theme-toggle{--tt-bg:#fff;--tt-fg:#0b0b0c;--tt-ring:#ff7a3d}
.on-dark .theme-toggle,.theme-toggle.on-dark{--tt-bg:#fff;--tt-fg:#0b0b0c;--tt-ring:#ff7a3d}
.theme-toggle:hover{background:color-mix(in srgb,var(--tt-bg) 84%,var(--tt-fg));border-color:color-mix(in srgb,var(--tt-bg) 84%,var(--tt-fg))}
.theme-toggle:active{transform:scale(.94)}
.theme-toggle:focus-visible{outline:3px solid var(--tt-ring);outline-offset:3px}
.theme-toggle .icon{grid-area:1/1;width:20px;height:20px;transition:opacity .2s ease,transform .3s cubic-bezier(.2,.7,.2,1)}
.theme-toggle .i-sun,[data-theme=dark] .theme-toggle .i-moon{opacity:0;transform:rotate(-90deg) scale(.6)}
[data-theme=dark] .theme-toggle .i-sun{opacity:1;transform:none}
@media(max-width:767px){.theme-toggle{width:44px;height:44px}}
@media(prefers-reduced-motion:reduce){.theme-toggle,.theme-toggle .icon{transition:none}.theme-toggle:active{transform:none}}

@media(min-width:1024px){body[data-desktop-template="executive"] .has-light-logo .brand-logo-main{display:none}body[data-desktop-template="executive"] .has-light-logo .brand-logo-light{display:block}}