/* ============================================================
   Shoope · Cargorocks Design System
   colors_and_type.css
   ----------------------------------------------------------------
   Drop into any page that already loads Tabler + Bootstrap;
   these tokens override / extend the defaults.
   ============================================================ */

/* ---------- 1. Fonts ---------- */
/* Loaded from Google Fonts. If you need offline, drop .woff2 into fonts/
   and uncomment the @font-face blocks below. */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/*
@font-face {
  font-family: 'Noto Sans TC';
  src: url('fonts/NotoSansTC-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
*/

/* ---------- 2. Color tokens ---------- */
:root {
  /* Brand — Focus Logistics red */
  --brand-primary:        #E40509;
  --brand-primary-soft:   #F03134;
  --brand-primary-strong: #C00407;
  --brand-primary-tint:   #FBE9EA;
  --brand-primary-tint-2: #F4CFD1;

  /* Accents (used for charts / warning) */
  --accent-warm:          #f59e0b;
  --accent-mint:          #38c9c9;
  --accent-violet:        #6b5b95;

  /* Text — light theme */
  --ink-1: #25324a;  /* primary text, headings */
  --ink-2: #2b3a55;  /* strong table cells */
  --ink-3: #4b5875;  /* body */
  --ink-4: #6b7992;  /* secondary / captions */
  --ink-5: #98a6bf;  /* meta / hint */
  --ink-inverse: #ffffff;

  /* Surfaces — light theme */
  --surface-page:   #f8f9fd;
  --surface-card:   #ffffff;
  --surface-soft:   #f6f8fd;
  --surface-soft-2: #FBE9EA;

  /* Borders */
  --border-soft:   #eef1f6;
  --border-soft-2: #edf1f8;
  --border-strong: #e6ebf4;

  /* Status */
  --success-bg:    #ecfdf3;
  --success-ink:   #027a48;
  --success-border:#abefc6;

  --warning-bg:    #fffaeb;
  --warning-ink:   #b54708;
  --warning-border:#fde6a8;

  --danger-bg:     #fff5f5;
  --danger-ink:    #b42318;
  --danger-border: #ffe2e2;

  --info-bg:       #eef4ff;
  --info-ink:      #175cd3;
  --info-border:   #c7d7fe;

  /* Dark dashboard variant (preserve from _Layout.cshtml.css) */
  --dash-bg:      #2b2c3a;
  --dash-panel:   #323445;
  --dash-panel-2: #2d2f40;
  --dash-stroke:  rgba(255, 255, 255, 0.08);
  --dash-text:    #e8ecf8;
  --dash-muted:   #a2abc1;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(20, 28, 51, 0.06);
  --shadow-sm: 0 4px 10px rgba(20, 28, 51, 0.05);
  --shadow-md: 0 6px 16px rgba(20, 28, 51, 0.06);
  --shadow-lg: 0 10px 24px rgba(20, 28, 51, 0.06);
  --shadow-kpi-inset: inset 0 -6px 16px rgba(0, 0, 0, 0.15);
  --shadow-dash: 0 16px 40px rgba(0, 0, 0, 0.4);

  /* Radii */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* Spacing (matches site.css gaps/paddings) */
  --space-1: 4px;
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 10px;
  --space-5: 12px;
  --space-6: 14px;
  --space-7: 16px;
  --space-8: 18px;
  --space-9: 22px;
  --space-10: 24px;
  --space-12: 32px;

  /* Motion */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --duration-fast: 120ms;
  --duration-base: 160ms;
  --duration-slow: 240ms;

  /* Typography stacks */
  --font-sans: 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei',
               -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Cascadia Code', 'SF Mono', Consolas, 'Liberation Mono', monospace;

  /* Type scale (modular, 1.2 ratio, anchored at 14px body) */
  --step-xs:   12px;  /* meta, badge, time stamp                   */
  --step-sm:   13px;  /* table small, captions                     */
  --step-base: 14px;  /* body, form labels, table cell             */
  --step-md:   16px;  /* panel-title small, list strong            */
  --step-lg:   18px;  /* card title (h5)                            */
  --step-xl:   22px;  /* page section heading (h2)                  */
  --step-2xl:  28px;  /* page title (h1) — small dashboards         */
  --step-3xl:  34px;  /* page title (h1) — flagship dashboard       */
  --step-kpi:  36px;  /* KPI number                                 */
}

/* ---------- 3. Base typography ---------- */
html, body {
  font-family: var(--font-sans);
  font-size: var(--step-base);
  line-height: 1.55;
  color: var(--ink-3);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-size: var(--step-2xl);
  font-weight: 700;
  color: var(--ink-1);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-3);
}

h2, .h2 {
  font-size: var(--step-xl);
  font-weight: 700;
  color: var(--ink-1);
  line-height: 1.3;
  letter-spacing: -0.005em;
  margin: 0 0 var(--space-3);
}

h3, .h3 {
  font-size: var(--step-lg);
  font-weight: 600;
  color: var(--ink-1);
  line-height: 1.35;
  margin: 0 0 var(--space-2);
}

h4, .h4, h5, .h5 {
  font-size: var(--step-md);
  font-weight: 600;
  color: var(--ink-1);
  line-height: 1.4;
  margin: 0 0 var(--space-2);
}

p { margin: 0 0 var(--space-4); color: var(--ink-3); }

.eyebrow {
  font-size: var(--step-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin: 0 0 var(--space-1);
}

.muted    { color: var(--ink-4); }
.muted-strong { color: var(--ink-3); }
.meta     { font-size: var(--step-xs); color: var(--ink-5); }

.num, .mono, code, pre, .number-display {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.kpi-number {
  font-family: var(--font-mono);
  font-size: var(--step-kpi);
  font-weight: 700;
  color: var(--ink-1);
  line-height: 1;
  letter-spacing: -0.02em;
}

/* ---------- 4. Semantic primitives ---------- */
.btn-primary,
.btn-primary:focus {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--ink-inverse);
  transition: background-color var(--duration-base) var(--ease-standard);
}
.btn-primary:hover  { background-color: #C00407; border-color: #C00407; }
.btn-primary:active { background-color: #A00306; border-color: #A00306; }

.btn-outline-primary {
  color: var(--brand-primary);
  border-color: var(--brand-primary);
  background: transparent;
}
.btn-outline-primary:hover {
  background: var(--brand-primary-tint);
  color: var(--brand-primary);
  border-color: var(--brand-primary);
}

a { color: var(--brand-primary); text-decoration: none; }
a:hover { color: #A00306; text-decoration: underline; text-underline-offset: 3px; }

/* Cards */
.card,
.panel,
.wk-card,
.wk-panel,
.report-card {
  background: var(--surface-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

/* Pill chips (warehouse nav) */
.wn-link {
  background: var(--brand-primary-tint);
  color: var(--ink-3);
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-5);
  font-weight: 600;
  font-size: var(--step-sm);
  transition: background-color var(--duration-base) var(--ease-standard);
}
.wn-link:hover {
  background: var(--brand-primary-tint-2);
  color: var(--ink-1);
}
.wn-link.is-active {
  background: var(--brand-primary);
  color: #fff;
}

/* Status badges */
.badge.text-bg-warning  { background: var(--warning-bg) !important; color: var(--warning-ink) !important; border: 1px solid var(--warning-border); }
.badge.text-bg-success  { background: var(--success-bg) !important; color: var(--success-ink) !important; border: 1px solid var(--success-border); }
.badge.text-bg-danger   { background: var(--danger-bg)  !important; color: var(--danger-ink)  !important; border: 1px solid var(--danger-border); }
.badge.text-bg-info     { background: var(--info-bg)    !important; color: var(--info-ink)    !important; border: 1px solid var(--info-border); }

/* Focus ring (sharper than Bootstrap default) */
.btn:focus, .form-control:focus, .form-select:focus, .form-check-input:focus {
  box-shadow: 0 0 0 2px var(--surface-card), 0 0 0 4px var(--brand-primary);
  outline: none;
}