/* ═══════════════════════════════════════════════════════════
   LimaQI × Roctez · Shared Design Tokens
   One palette, two brands. Same #0038A8 trust blue.
   - LimaQI: industrial · B2B · big blocks of deep blue
   - Roctez: dark cinematic · cream variant · gold accent
   ═══════════════════════════════════════════════════════════ */

/* ── Fonts: MiSans (Latin + CJK) ─────────────────────────── */
@font-face {
  font-family: "MiSans";
  src: url("fonts/MiSans-Light.woff2") format("woff2");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "MiSans";
  src: url("fonts/MiSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "MiSans";
  src: url("fonts/MiSans-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "MiSans";
  src: url("fonts/MiSans-Semibold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "MiSans";
  src: url("fonts/MiSans-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "MiSans Latin";
  src: url("fonts/MiSansLatin-Light.woff2") format("woff2");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "MiSans Latin";
  src: url("fonts/MiSansLatin-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "MiSans Latin";
  src: url("fonts/MiSansLatin-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "MiSans Latin";
  src: url("fonts/MiSansLatin-Semibold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "MiSans Latin";
  src: url("fonts/MiSansLatin-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  /* ── Shared brand color (both brands use this) ─────── */
  --brand-primary:        #0038A8;  /* trust blue · navigation/CTA */
  --brand-primary-light:  #E3F2FD;  /* hover / selected backgrounds */
  --brand-primary-dark:   #002D7A;  /* button hover / active */

  /* ── Bridge color: SHARED GREEN ───────────────────────
     References: SpacetimeDB terminal-green, SA Logistics
     corporate green, China jade/prosperity green.
     Both brands' surfaces drift toward this green:
       LimaQI = white + trace green
       Roctez = black + trace green
     Red is the secondary shared accent (China-flag red). */
  --bridge:           #1F7A4D;  /* deep jade — works on both */
  --bridge-hi:        #4FB37A;  /* terminal-green · on dark */
  --bridge-lo:        #155A37;  /* corporate green · on light */
  --bridge-red:       #C8362B;  /* China-flag red · shared accent */

  /* Surface drift — green-tinted, never pure black/white */
  --lmq-surface-tint:  #F0F4F1;  /* white + ~3% green */
  --lmq-surface-tint-2:#E2EAE4;  /* white + ~6% green */
  --rcz-surface-tint:  #0F1612;  /* black + ~3% green */
  --rcz-surface-tint-2:#161E18;  /* black + ~6% green */

  /* ── LimaQI palette (industrial · B2B · big blue) ──── */
  --lmq-page-bg:          #F5F7FA;  /* page underlay */
  --lmq-content-bg:       #FFFFFF;  /* card / table surface */
  --lmq-sidebar-bg:       #1A1A2E;  /* deep navy sidebar */
  --lmq-sidebar-text:     #B0BEC5;
  --lmq-border:           #E0E0E0;
  --lmq-text-1:           #212121;  /* primary */
  --lmq-text-2:           #757575;  /* secondary */
  --lmq-text-3:           #9E9E9E;  /* muted / disabled */

  /* Status pills (logistics workflow) */
  --status-pending-bg:    #FFF3E0;  --status-pending-fg:    #E65100;
  --status-active-bg:     #E3F2FD;  --status-active-fg:     #0038A8;
  --status-transit-bg:    #FFF8E1;  --status-transit-fg:    #F57F17;
  --status-customs-bg:    #F3E5F5;  --status-customs-fg:    #7B1FA2;
  --status-success-bg:    #E8F5E9;  --status-success-fg:    #2E7D32;
  --status-error-bg:      #FFEBEE;  --status-error-fg:      #C62828;
  --status-cancelled-bg:  #ECEFF1;  --status-cancelled-fg:  #546E7A;

  /* Semantic */
  --danger:   #D32F2F;
  --warning:  #F57C00;
  --success:  #388E3C;
  --info:     #1976D2;

  /* ── Roctez palette (dark cinematic · gold accent) ─── */
  --rcz-bg-0:        #0A0A0B;  /* void · page edge */
  --rcz-bg-1:        #101012;  /* primary background */
  --rcz-bg-2:        #18181C;  /* card / panel */
  --rcz-bg-3:        #1E1E22;  /* raised */
  --rcz-bg-4:        #26262B;  /* hover / selected */
  --rcz-bg-inset:    #050506;  /* well */

  --rcz-line-1:      rgba(255,255,255,0.08);
  --rcz-line-2:      rgba(255,255,255,0.14);
  --rcz-line-3:      rgba(255,255,255,0.22);
  --rcz-line-gold:   rgba(212,166,74,0.40);

  --rcz-fg-1:        #F5F5F5;
  --rcz-fg-2:        #B8B8BD;
  --rcz-fg-3:        #7C7C82;
  --rcz-fg-4:        #55555B;

  --rcz-gold:        #D4A64A;  /* signature accent */
  --rcz-gold-hi:     #E8BD5C;
  --rcz-gold-lo:     #8C7238;
  --rcz-gold-ink:    #1A1407;  /* ink on gold */

  --rcz-steel:       #5C7289;
  --rcz-steel-hi:    #7A90A8;

  --rcz-success:     #6FB48A;
  --rcz-warning:     #D89844;
  --rcz-danger:      #D26A5C;
  --rcz-info:        #6B8FB8;

  --rcz-route-cn:        #A08A3E;  /* China origin */
  --rcz-route-air:       #6B8FB8;
  --rcz-route-sea:       #507A98;
  --rcz-route-py:        #6FB48A;  /* Paraguay arrival */
  --rcz-route-regional:  #8B9AAE;

  /* Roctez v2 cream alt (light variant for nav-on-light contexts) */
  --rcz-cream:       #F5F2ED;
  --rcz-teal:        #1A5D52;
  --rcz-ink:         #1A1A1A;

  /* ── Spacing (4pt grid) ─────────────────────────────── */
  --s-1: 4px;  --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px; --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px; --s-10: 128px;

  /* Legacy aliases */
  --space-xs: 4px;  --space-sm: 8px;  --space-md: 16px;
  --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px;

  /* ── Radius (no full pill — banned in Roctez) ──────── */
  --r-0: 0px;
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;
  --r-4: 12px;

  /* ── Elevation ──────────────────────────────────────── */
  /* LimaQI: cards have soft drop shadow on light bg */
  --lmq-shadow-card:   0 1px 3px rgba(0,0,0,0.08);
  --lmq-shadow-modal:  0 4px 12px rgba(0,0,0,0.15);
  --lmq-shadow-toast:  0 4px 12px rgba(0,0,0,0.15);

  /* Roctez: inset-only elevation (dark-native) */
  --rcz-ring-inset:    inset 0 0 0 1px var(--rcz-line-2);
  --rcz-ring-inset-hi: inset 0 0 0 1px var(--rcz-line-3);
  --rcz-ring-gold:     inset 0 0 0 1px var(--rcz-line-gold);
  --rcz-shadow-panel:
    inset 0 1px 0 0 rgba(255,255,255,0.04),
    inset 0 0 0 1px var(--rcz-line-2);
  --rcz-gold-glow:     0 0 24px rgba(212,166,74,0.28);

  /* ── Type families ──────────────────────────────────── */
  --font-sans:
    "MiSans Latin", "MiSans", "Inter",
    -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-cjk:
    "MiSans", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono:
    "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  --font-display:
    "MiSans Latin", "Fraunces", Georgia, serif;
  --font-serif:
    "Noto Serif", Georgia, serif;

  /* ── Type scale (panel — operational density) ──────── */
  --t-h1:      24px;  --lh-h1:      1.3;
  --t-h2:      20px;  --lh-h2:      1.35;
  --t-h3:      16px;  --lh-h3:      1.4;
  --t-body:    14px;  --lh-body:    1.5;
  --t-small:   12px;  --lh-small:   1.5;
  --t-tiny:    11px;  --lh-tiny:    1.4;

  /* Warehouse mode (operator hands) — bigger hit targets */
  --t-h1-wh:     28px;
  --t-body-wh:   16px;
  --t-button-wh: 18px;

  /* ── Type scale (Roctez · editorial / cinematic) ───── */
  --t-display:    clamp(48px, 7vw, 88px);
  --t-rcz-h1:     clamp(36px, 4vw, 56px);
  --t-rcz-h2:     36px;
  --t-rcz-h3:     22px;
  --t-rcz-h4:     16px;
  --t-rcz-body:   16px;
  --t-rcz-body-lg:19px;
  --t-rcz-eyebrow:11px;
  --t-rcz-data:   14px;
  --t-rcz-data-lg:22px;

  --lh-tight:    0.95;
  --lh-heading:  1.05;
  --lh-data:     1.25;

  --tr-eyebrow:  0.16em;  /* mono CAPS · §00 marker */
  --tr-caps:     0.08em;  /* generic uppercase */
  --tr-display: -0.02em;
  --tr-body:    -0.005em;

  /* ── Motion ─────────────────────────────────────────── */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 420ms;
  --ease-standard: cubic-bezier(0.2, 0, 0.1, 1);
  --ease-exit:     cubic-bezier(0.4, 0, 1, 1);
  --ease-enter:    cubic-bezier(0, 0, 0.1, 1);
}

/* ── Reduced motion ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Semantic primitives ────────────────────────────── */
.t-display {
  font-family: var(--font-display);
  font-size: var(--t-display);
  font-weight: 300;
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
}
.t-h1 { font-size: var(--t-h1); font-weight: 700; line-height: var(--lh-h1); }
.t-h2 { font-size: var(--t-h2); font-weight: 600; line-height: var(--lh-h2); }
.t-h3 { font-size: var(--t-h3); font-weight: 600; line-height: var(--lh-h3); }
.t-body { font-size: var(--t-body); font-weight: 400; line-height: var(--lh-body); }
.t-small { font-size: var(--t-small); font-weight: 400; line-height: var(--lh-small); }
.t-tiny { font-size: var(--t-tiny); font-weight: 400; line-height: var(--lh-tiny); }

.t-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-rcz-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tr-eyebrow);
  font-weight: 500;
}

.t-data {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-rcz-data);
}
.t-data-lg {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-rcz-data-lg);
  font-weight: 500;
  letter-spacing: -0.01em;
}