/* VENDORED — do not edit here.
 *
 * Copied verbatim from `siaporder/tokens/tokens.css` (the design team's source
 * of truth), the same way the console vendors it. Change the design there, then
 * re-vendor. The landing page is static HTML with no build step, so it links
 * this file directly rather than importing it.
 */
/* SiapOrder design system — tokens
 * Framework-free custom properties for the CLIENT-FACING surface.
 * Import once at the root. Light (Kertas) is the default; dark (Malam) is full parity.
 *
 * This is NOT the Siap Studio token set. Nothing is shared — a shop owner's tool and an
 * internal operator console have different jobs. Do not import both.
 */

:root {
  color-scheme: light dark;

  /* ---------- Surfaces (Kertas / light) ---------- */
  --so-ground: #FBF8F3;          /* page background */
  --so-ground-alt: #F3EDE3;      /* list header, app chrome, assistant bubble */
  --so-surface: #FFFFFF;         /* cards, panels, customer bubble */
  --so-surface-raised: #F7F1E7;  /* hover, selected row */
  --so-surface-overlay: #FFFFFF; /* sheet, menu, toast — floating only */

  /* ---------- Lines ---------- */
  --so-line: #EBE3D8;
  --so-line-strong: #D8CCBB;

  /* ---------- Text ---------- */
  --so-ink: #1F1B16;
  --so-ink-muted: #4A423A;
  --so-ink-grey: #6B6055;
  --so-ink-dim: #8A7C6D;

  /* ---------- Accent — the one next action ---------- */
  --so-accent: #C64B1A;
  --so-accent-hover: #A93D12;
  --so-accent-on: #FFF8F2;       /* text on accent */
  --so-accent-tint: #FBEAE0;     /* your own replies, highlighted row */
  --so-accent-border: #E9B99F;

  /* ---------- Status — always paired with a word ---------- */
  --so-new: #8A4B00;         --so-new-tint: #FBE7CF;      /* new order, needs you */
  --so-ok: #1F6B3F;          --so-ok-tint: #DDEEDF;       /* accepted */
  --so-neutral: #4A423A;     --so-neutral-tint: #EDE6DB;  /* done, archived */
  --so-bad: #B3261E;         --so-bad-tint: #F8DEDB;      --so-bad-border: #E9AFA9;
  --so-info: #1D5B8F;        --so-info-tint: #DCE9F5;     --so-info-border: #B9D2EA;

  /* ---------- Type: families ---------- */
  --so-font-display: "Bricolage Grotesque", "Noto Sans SC", ui-sans-serif, system-ui, sans-serif;
  --so-font-body: "Figtree", "Noto Sans SC", ui-sans-serif, system-ui, sans-serif;
  --so-font-data: "JetBrains Mono", "Noto Sans SC", ui-monospace, monospace;

  /* ---------- Type: scale ---------- */
  --so-text-display: 40px;    --so-leading-display: 1.08;  --so-tracking-display: -0.02em;
  --so-text-page: 28px;       --so-leading-page: 1.15;     --so-tracking-page: -0.02em;
  --so-text-section: 20px;    --so-leading-section: 28px;
  --so-text-card: 17px;       --so-leading-card: 24px;
  --so-text-body-lg: 16px;    --so-leading-body-lg: 26px;
  --so-text-body: 15px;       --so-leading-body: 25px;     /* the default */
  --so-text-ui: 15px;         --so-leading-ui: 22px;       /* buttons, nav, tabs */
  --so-text-sm: 14px;         --so-leading-sm: 21px;
  --so-text-xs: 13px;         --so-leading-xs: 19px;       /* meta, help text */
  --so-text-label: 11px;      --so-tracking-label: 0.12em; /* mono, uppercase */
  --so-text-data: 14px;
  --so-text-data-lg: 24px;
  --so-text-data-xl: 40px;    --so-tracking-data-xl: -0.03em;

  /* CJK: +2px leading, no tracking. Apply on [lang="zh"] subtrees. */
  --so-leading-body-cjk: 27px;

  /* ---------- Weights ---------- */
  --so-weight-regular: 400;
  --so-weight-medium: 500;
  --so-weight-semibold: 600;
  --so-weight-bold: 700;   /* display + page titles */

  /* ---------- Space (4px base) ---------- */
  --so-space-1: 4px;   --so-space-2: 8px;   --so-space-3: 12px;  --so-space-4: 16px;
  --so-space-5: 20px;  --so-space-6: 24px;  --so-space-8: 32px;  --so-space-10: 40px;
  --so-space-12: 48px; --so-space-16: 64px; --so-space-20: 80px;

  /* ---------- Radius ---------- */
  --so-radius-sm: 8px;       /* badge, segment, skeleton */
  --so-radius-control: 12px; /* button, input, select, nav item */
  --so-radius-bubble: 16px;  /* chat bubble (tail corner drops to 4px) */
  --so-radius-card: 20px;    /* card, panel, sheet, table */
  --so-radius-full: 999px;

  /* ---------- Elevation — two shadows, no third ---------- */
  --so-shadow-card: 0 1px 2px rgba(31, 27, 22, 0.05);
  --so-shadow-overlay: 0 12px 32px -8px rgba(31, 27, 22, 0.18);
  --so-backdrop: rgba(31, 27, 22, 0.4);
  --so-blur-chrome: 12px;

  /* ---------- Controls & rows — touch-first ---------- */
  --so-control-h: 48px;      /* default */
  --so-control-h-sm: 40px;   /* inside a row or toolbar */
  --so-row-h: 56px;          /* list and table rows */
  --so-tap-min: 44px;        /* absolute floor */

  /* ---------- Layout ---------- */
  --so-sidebar-w: 264px;
  --so-topbar-h: 64px;
  --so-bottomnav-h: 64px;    /* below md */
  --so-list-w: 400px;        /* chat list pane */
  --so-page-margin: 32px;
  --so-page-margin-sm: 20px;
  --so-container: 1360px;
  --so-prose: 62ch;

  /* ---------- Motion ---------- */
  --so-duration-hover: 120ms;
  --so-duration-disclosure: 180ms;
  --so-duration-overlay: 200ms;
  --so-duration-entrance: 240ms;
  --so-ease: cubic-bezier(0.16, 0.84, 0.44, 1);

  /* ---------- Focus ---------- */
  --so-focus-ring: 0 0 0 2px var(--so-ground), 0 0 0 4px var(--so-accent);

  /* ---------- Z-index ---------- */
  --so-z-sticky: 10;
  --so-z-chrome: 30;
  --so-z-menu: 40;
  --so-z-sheet: 50;
  --so-z-toast: 70;
}

/* ---------- Malam (dark) — full parity, same meanings ---------- */
[data-theme="dark"] {
  --so-ground: #17140F;
  --so-ground-alt: #1C1813;
  --so-surface: #201C16;
  --so-surface-raised: #2A251D;
  --so-surface-overlay: #2A251D;

  --so-line: #322C23;
  --so-line-strong: #4A4136;

  --so-ink: #F6F1E8;
  --so-ink-muted: #D6CCBD;
  --so-ink-grey: #A2937F;
  --so-ink-dim: #7A6C5B;

  --so-accent: #F97B3D;
  --so-accent-hover: #FF9866;
  --so-accent-on: #2B1206;
  --so-accent-tint: rgba(249, 123, 61, 0.14);
  --so-accent-border: rgba(249, 123, 61, 0.35);

  --so-new: #F5C15E;      --so-new-tint: rgba(245, 193, 94, 0.14);
  --so-ok: #6FCF97;       --so-ok-tint: rgba(111, 207, 151, 0.14);
  --so-neutral: #D6CCBD;  --so-neutral-tint: rgba(162, 147, 127, 0.16);
  --so-bad: #F08A80;      --so-bad-tint: rgba(240, 138, 128, 0.14);  --so-bad-border: rgba(240, 138, 128, 0.38);
  --so-info: #7FB3E8;     --so-info-tint: rgba(127, 179, 232, 0.14); --so-info-border: rgba(127, 179, 232, 0.35);

  --so-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3);
  --so-shadow-overlay: 0 12px 32px -8px rgba(0, 0, 0, 0.5);
  --so-backdrop: rgba(0, 0, 0, 0.6);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --so-ground: #17140F;
    --so-ground-alt: #1C1813;
    --so-surface: #201C16;
    --so-surface-raised: #2A251D;
    --so-surface-overlay: #2A251D;
    --so-line: #322C23;
    --so-line-strong: #4A4136;
    --so-ink: #F6F1E8;
    --so-ink-muted: #D6CCBD;
    --so-ink-grey: #A2937F;
    --so-ink-dim: #7A6C5B;
    --so-accent: #F97B3D;
    --so-accent-hover: #FF9866;
    --so-accent-on: #2B1206;
    --so-accent-tint: rgba(249, 123, 61, 0.14);
    --so-accent-border: rgba(249, 123, 61, 0.35);
    --so-new: #F5C15E;      --so-new-tint: rgba(245, 193, 94, 0.14);
    --so-ok: #6FCF97;       --so-ok-tint: rgba(111, 207, 151, 0.14);
    --so-neutral: #D6CCBD;  --so-neutral-tint: rgba(162, 147, 127, 0.16);
    --so-bad: #F08A80;      --so-bad-tint: rgba(240, 138, 128, 0.14);  --so-bad-border: rgba(240, 138, 128, 0.38);
    --so-info: #7FB3E8;     --so-info-tint: rgba(127, 179, 232, 0.14); --so-info-border: rgba(127, 179, 232, 0.35);
    --so-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3);
    --so-shadow-overlay: 0 12px 32px -8px rgba(0, 0, 0, 0.5);
    --so-backdrop: rgba(0, 0, 0, 0.6);
  }
}

/* Chinese typesetting: looser leading, no tracking. */
[lang="zh"], [lang^="zh-"] {
  --so-leading-body: var(--so-leading-body-cjk);
  letter-spacing: 0;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --so-duration-hover: 0ms;
    --so-duration-disclosure: 0ms;
    --so-duration-overlay: 0ms;
    --so-duration-entrance: 0ms;
  }
}