/* ChinaImports Design System — tokens (v1, 2026-10-26)
   Source of truth for colour, type, space, radius, elevation and motion.
   Derived from the owner's reference (a logistics app: royal blue, white screens, pale-grey cards,
   3D cut-out illustrations) — values pixel-sampled from _staging/inbox/chinaimports-design/reference-logistics-app.png.
   Rule: components read only these variables. No raw hex outside this file. */

@font-face { font-family: "Inter"; src: url("fonts/InterVariable-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  /* ── brand blue (primary) ───────────────────────── */
  --ci-blue-50:  #EEF3FF;
  --ci-blue-100: #DCE6FF;
  --ci-blue-200: #B9CCFF;
  --ci-blue-300: #8EAAFF;
  --ci-blue-400: #6289FF;   /* light accent seen on the hero card gradient */
  --ci-blue-500: #3A66F0;
  --ci-blue-600: #1E4BDB;   /* PRIMARY — buttons, active tab, hero card, sent bubbles */
  --ci-blue-700: #183EBC;   /* hover / pressed */
  --ci-blue-800: #142F8F;
  --ci-blue-900: #0E2263;   /* deep navy — dark panels, footer, dock */
  --ci-blue-950: #0A173F;

  /* ── neutrals (slightly cool) ───────────────────── */
  --ci-ink:      #111827;   /* headings, primary text */
  --ci-ink-2:    #374151;   /* body */
  --ci-ink-3:    #5B6472;   /* secondary text, labels (4.5:1 or better on every surface) */
  --ci-ink-4:    #9CA3AF;   /* placeholder and disabled ONLY: 2.5:1, never body text */
  --ci-line:     #E7EAEF;   /* hairline borders */
  --ci-line-2:   #D6DBE3;   /* dividers, chips, tracks */
  --ci-line-input:#8A94A3;  /* input borders (3:1 non-text contrast) */
  --ci-surface:  #FFFFFF;   /* screens */
  --ci-surface-2:#F7F8FA;   /* cards on a white screen (reference: #F8FAFB) */
  --ci-surface-3:#EEF1F5;   /* chips, grey chat bubble, pressed rows */
  --ci-canvas:   #E9EBEE;   /* desktop backdrop behind app frames */

  /* ── status ─────────────────────────────────────── */
  --ci-green-600:#16A34A;  --ci-green-700:#15803D;  --ci-green-50:#E8F7EE;   /* Active, delivered, verified */
  --ci-amber-600:#D97706;  --ci-amber-700:#B45309;  --ci-amber-50:#FEF3E2;   /* waiting on you, at customs */
  --ci-red-600:  #DC2626;  --ci-red-50:  #FDECEC;   /* errors, blocked */
  --ci-wa:       #1FA855;                           /* WhatsApp icon tint */
  --ci-wa-strong:#0F7A3E;                           /* WhatsApp button fill (white text 5.3:1) */

  /* semantic aliases */
  --ci-primary: var(--ci-blue-600);
  --ci-primary-hover: var(--ci-blue-700);
  --ci-primary-soft: var(--ci-blue-50);
  --ci-on-primary: #FFFFFF;
  --ci-focus: var(--ci-blue-600);

  /* ── type ───────────────────────────────────────── */
  --ci-font: "Inter", "Inter Display", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ci-font-num: "Inter", ui-sans-serif, system-ui, sans-serif;   /* use with tabular-nums */
  --ci-fs-11: 11px;  --ci-fs-12: 12px;  --ci-fs-13: 13px;  --ci-fs-14: 14px;  --ci-fs-15: 15px;
  --ci-fs-16: 16px;  --ci-fs-18: 18px;  --ci-fs-20: 20px;  --ci-fs-24: 24px;  --ci-fs-30: 30px;
  --ci-fs-40: 40px;  --ci-fs-52: 52px;  --ci-fs-64: 64px;
  --ci-fw-regular: 400; --ci-fw-medium: 500; --ci-fw-semibold: 600; --ci-fw-bold: 700;
  --ci-lh-tight: 1.1;  --ci-lh-snug: 1.3;  --ci-lh-body: 1.5;
  --ci-track-tight: -0.02em; --ci-track-display: -0.035em;

  /* ── space (4px base) ───────────────────────────── */
  --ci-s-1: 4px;  --ci-s-2: 8px;  --ci-s-3: 12px; --ci-s-4: 16px; --ci-s-5: 20px;
  --ci-s-6: 24px; --ci-s-8: 32px; --ci-s-10: 40px; --ci-s-12: 48px; --ci-s-16: 64px; --ci-s-24: 96px;
  --ci-gutter: 16px;          /* phone side gutter */
  --ci-max: 1200px;           /* desktop content width */

  /* ── radius (one scale, never mix more than 3 on a screen) ── */
  --ci-r-xs: 6px;   /* tags */
  --ci-r-sm: 10px;  /* inputs, buttons */
  --ci-r-md: 14px;  /* cards, list groups, quick tiles */
  --ci-r-lg: 18px;  /* hero card, sheets (top corners) */
  --ci-r-xl: 24px;  /* desktop feature panels */
  --ci-r-pill: 999px;

  /* ── elevation: hairline at rest, shadow only when floating ── */
  --ci-shadow-0: none;
  --ci-shadow-1: 0 1px 2px rgba(17, 24, 39, .06);                     /* tiles that sit on grey */
  --ci-shadow-2: 0 8px 24px -10px rgba(17, 24, 39, .18);              /* dropdowns, toasts */
  --ci-shadow-3: 0 24px 60px -16px rgba(17, 24, 39, .30);             /* sheets, dialogs */
  --ci-shadow-blue: 0 14px 30px -14px rgba(30, 75, 219, .55);         /* the hero card only */

  /* ── motion ─────────────────────────────────────── */
  --ci-ease: cubic-bezier(.2, .8, .2, 1);
  --ci-ease-sheet: cubic-bezier(.32, .72, 0, 1);   /* iOS sheet curve */
  --ci-t-fast: 120ms;  --ci-t-base: 180ms;  --ci-t-sheet: 320ms;

  /* ── sizes ──────────────────────────────────────── */
  --ci-touch: 44px;        /* minimum tap target */
  --ci-btn-h: 48px;  --ci-btn-h-sm: 38px;   /* raised to 44px on phones in components.css */
  --ci-input-h: 48px;
  --ci-topbar-h: 64px;  --ci-dock-h: 64px;
}