/* ==========================================================================
   HJT Design Tokens — PT Harizkia Jaya Trans
   Source of truth for web app + driver app. Mirror of tokens.json.
   Brand base: Navy #181C7F · Charcoal #333333 · Fog #F2F2F2 · Acronym
   ========================================================================== */

:root {
  /* ---- Brand (from hjt-branding.pdf) ---- */
  --hjt-navy: #181c7f;
  --hjt-charcoal: #333333;
  --hjt-fog: #f2f2f2;

  /* ---- Navy scale (brand = 700) ---- */
  --navy-50: #eeeffa;
  --navy-100: #dcdef4;
  --navy-200: #b7bbe8;
  --navy-300: #8c92d8;
  --navy-400: #5c63c2;
  --navy-500: #353da6;
  --navy-600: #232a92;
  --navy-700: #181c7f;
  --navy-800: #121565;
  --navy-900: #0d0f47;
  --navy-950: #080a2e;

  /* ---- Neutral scale (brand charcoal = 800, fog = 50) ---- */
  --gray-0: #ffffff;
  --gray-50: #f2f2f2;
  --gray-100: #e8e8e8;
  --gray-200: #d6d6d6;
  --gray-300: #b8b8b8;
  --gray-400: #8f8f8f;
  --gray-500: #6b6b6b;
  --gray-600: #545454;
  --gray-700: #424242;
  --gray-800: #333333;
  --gray-900: #1f1f1f;
  --gray-950: #141414;

  /* ---- Signal (road-sign amber; the only accent outside brand) ---- */
  --signal-400: #ffc53d;
  --signal-500: #f2a900;
  --signal-600: #c98a00;

  /* ---- Status (semantic, fixed meaning across both apps) ---- */
  --status-draft: #6b6b6b;       /* Draft / Menunggu */
  --status-active: #353da6;      /* Berjalan / On Trip */
  --status-done: #17773f;        /* Selesai */
  --status-invoice: #8f6200;     /* Siap Invoice */
  --status-paid: #0f6e5c;        /* Lunas */
  --status-maint: #b4501a;       /* Maintenance */
  --status-alert: #c62828;       /* Perlu Perhatian / Overdue */

  /* ---- Semantic surface / text (light): neutrals tinted toward the brand navy, ink-navy text ---- */
  --color-bg: #f3f4f8;
  --color-surface: var(--gray-0);
  --color-surface-2: #f7f8fb;
  --color-surface-inverse: var(--navy-900);
  --color-border: #e2e4ee;
  --color-border-strong: #c6cad9;
  --color-text: #1c1f3b;
  --color-text-muted: #5b607e;
  --color-text-inverse: var(--gray-50);
  --color-primary: var(--navy-700);
  --color-primary-hover: var(--navy-800);
  --color-primary-soft: #eceefb;
  --color-on-primary: var(--gray-50);
  --color-accent: var(--signal-500);
  --color-focus: var(--navy-600);
  /* App chrome: brand navy sidebar in light; in dark a quiet ink panel so it sits with the content instead of glowing */
  --color-sidebar: var(--navy-900);
  --color-sidebar-motif: var(--navy-800);
  color-scheme: light;

  /* ---- Typography ---- */
  --font-sans: "Acronym", "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* No Pol, No DO, kode */

  --text-2xs: 0.6875rem;  /* 11 */
  --text-xs: 0.75rem;     /* 12 */
  --text-sm: 0.875rem;    /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-lg: 1.125rem;    /* 18 */
  --text-xl: 1.375rem;    /* 22 */
  --text-2xl: 1.75rem;    /* 28 */
  --text-3xl: 2.25rem;    /* 36 */
  --text-display: clamp(2.5rem, 1.5rem + 3vw, 4rem);

  --weight-regular: 400;
  --weight-semibold: 600;

  --leading-tight: 1.15;
  --leading-normal: 1.5;
  --tracking-caps: 0.08em;

  /* ---- Space (4px base) ---- */
  --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;
  --space-16: 64px;

  /* ---- Radius — logo has tight, machined corners: stay small ---- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* ---- Brand motif: logo slant ---- */
  --slant: -14deg;

  /* ---- Elevation ---- */
  --shadow-1: 0 1px 2px rgb(13 15 71 / 0.06), 0 1px 1px rgb(13 15 71 / 0.04);
  --shadow-2: 0 4px 12px rgb(13 15 71 / 0.08), 0 1px 3px rgb(13 15 71 / 0.06);
  --shadow-3: 0 16px 40px rgb(13 15 71 / 0.16), 0 4px 10px rgb(13 15 71 / 0.08);

  /* ---- Motion ---- */
  --duration-fast: 120ms;
  --duration-normal: 220ms;
  --duration-slow: 360ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ---- Layout ---- */
  --sidebar-w: 248px;
  --topbar-h: 60px;
  --tabbar-h: 64px;
  --touch-min: 44px;
  --content-max: 1440px;
}

/* ---- Dark theme ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-focus: var(--signal-400);
    --color-bg: #0b0d19;
    --color-surface: #12152a;
    --color-surface-2: #181b33;
    --color-surface-inverse: var(--gray-50);
    --color-border: #242843;
    --color-border-strong: #353a5e;
    --color-text: #e6e8f2;
    --color-text-muted: #a1a6c4;
    --color-text-inverse: var(--navy-900);
    --color-primary: #8a91ee;
    --color-primary-hover: #a4aaf4;
    --color-primary-soft: #1d2147;
    --color-on-primary: var(--navy-950);
    --status-active: #8a91ee;
    --status-done: #46c482;
    --status-invoice: #f5bd3d;
    --status-paid: #3cc7ab;
    --status-maint: #f29257;
    --status-alert: #ff7b7b;
    --status-draft: #a1a6c4;
    --color-sidebar: #0e1124;
    --color-sidebar-motif: #161a38;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --color-focus: var(--signal-400);
  --color-bg: #0b0d19;
  --color-surface: #12152a;
  --color-surface-2: #181b33;
  --color-surface-inverse: var(--gray-50);
  --color-border: #242843;
  --color-border-strong: #353a5e;
  --color-text: #e6e8f2;
  --color-text-muted: #a1a6c4;
  --color-text-inverse: var(--navy-900);
  --color-primary: #8a91ee;
  --color-primary-hover: #a4aaf4;
  --color-primary-soft: #1d2147;
  --color-on-primary: var(--navy-950);
  --status-active: #8a91ee;
  --status-done: #46c482;
  --status-invoice: #f5bd3d;
  --status-paid: #3cc7ab;
  --status-maint: #f29257;
  --status-alert: #ff7b7b;
  --status-draft: #a1a6c4;
  --color-sidebar: #0e1124;
  --color-sidebar-motif: #161a38;
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-normal: 0ms;
    --duration-slow: 0ms;
  }
}