/* ============================================================
   PASSADU — Design Token System
   Source of Truth: docs/governance/style.md v3.0.0
   Approved: 2026-09-25 by คุณเดย์
   DO NOT modify without updating style.md first
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* ── Brand Accent ── */
  --primary:              #cc785c;
  --primary-active:       #a9583e;
  --primary-disabled:     #e6dfd8;
  --primary-bg:           rgba(204, 120, 92, 0.10);

  /* ── Ink & Text ── */
  --ink:                  #141413;
  --body:                 #3d3d3a;
  --body-strong:          #252523;
  --muted:                #6c6a64;
  --muted-soft:           #8e8b82;

  /* ── Surfaces ── */
  --canvas:               #faf9f5;
  --surface-soft:         #f5f0e8;
  --surface-card:         #efe9de;
  --surface-cream-strong: #e8e0d2;
  --hairline:             #e6dfd8;
  --hairline-soft:        #ebe6df;

  /* ── Dark Navy Product Surfaces ── */
  --surface-dark:          #181715;
  --surface-dark-elevated: #252320;
  --surface-dark-soft:     #1f1e1b;
  --on-dark:               #faf9f5;
  --on-dark-soft:          #a09d96;

  /* ── Semantic Status ── */
  --accent-teal:          #5db8a6;
  --accent-amber:         #e8a55a;
  --success:              #5db872;
  --success-bg:           rgba(93, 184, 114, 0.12);
  --warning:              #d4a017;
  --warning-bg:           rgba(212, 160, 23, 0.12);
  --error:                #c64545;
  --error-bg:             rgba(198, 69, 69, 0.12);

  /* ── Carrier Badges ── */
  --carrier-spx:   #ee4d2d;
  --carrier-flash: #ed1c24;
  --carrier-kerry: #ed6b00;
  --carrier-jnt:   #e30613;
  --carrier-post:  #ba0c2f;

  /* ── Border Radii ── */
  --rounded-xs:   4px;
  --rounded-sm:   6px;
  --rounded-md:   8px;
  --rounded-lg:   12px;
  --rounded-xl:   16px;
  --rounded-pill: 9999px;

  /* ── Typography Stacks ── */
  --font-sans:  'Prompt', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:  'JetBrains Mono', ui-monospace, monospace;
  --font-num:   'JetBrains Mono', 'Inter', 'Prompt', monospace, sans-serif;
  --font-serif: 'Cormorant Garamond', Georgia, serif;

  /* ── Spacing (8-point grid) ── */
  --sp-xs:  4px;
  --sp-sm:  8px;
  --sp-md:  16px;
  --sp-lg:  24px;
  --sp-xl:  32px;
  --sp-2xl: 48px;

  /* ── App Shell Dimensions ── */
  --header-h:     60px;
  --bottom-nav-h: 60px;
  --sidebar-w:    260px;

  /* ── Transitions ── */
  --t-fast: 0.12s ease;
  --t-med:  0.25s ease;
}

/* ── Dark Mode Override ── */
[data-theme="dark"] {
  --canvas:               #181715;
  --surface-soft:         #1f1e1b;
  --surface-card:         #252320;
  --surface-cream-strong: #2e2b27;
  --hairline:             #383430;
  --hairline-soft:        #2d2a26;
  --ink:                  #faf9f5;
  --body:                 #d4d0c8;
  --body-strong:          #ede9e1;
  --muted:                #a09d96;
  --muted-soft:           #78756f;
  --surface-dark:         #100f0e;
  --surface-dark-elevated:#1c1b18;
  --surface-dark-soft:    #161513;
}

/* ── Base Body ── */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  color: var(--body);
  background-color: var(--canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color var(--t-med), color var(--t-med);
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

/* ── Utility: Tabular Numerals (MANDATORY for all numbers) ── */
.num {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums lining-nums;
}

/* ── Carrier Badge Colors ── */
.cp-shopee { background: var(--carrier-spx); }
.cp-flash  { background: var(--carrier-flash); }
.cp-kerry  { background: var(--carrier-kerry); }
.cp-jnt    { background: var(--carrier-jnt); }
.cp-post   { background: var(--carrier-post); }