/* ============================================================
   DrayageDirect Design System — Colors + Type
   Source: app-drayagedirect/styles/globals.css + ui-system.md
   Brand mark: blue "D" (#2563eb), black wordmark on off-white.
   ============================================================ */

/* --- Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap');
/* Note: Geist is the codebase's intended font (next/font → Geist Sans/Mono).
   We load the Google Fonts version as the display substitute. */

:root {
  /* ---------- BRAND ---------- */
  --dd-blue:        #2563eb;  /* Primary blue — logo D, primary buttons */
  --dd-blue-light:  #3b82f6;  /* Hover / accents in dark mode */
  --dd-blue-dark:   #1d4ed8;  /* Hover on primary buttons */
  --dd-blue-50:     #eff6ff;
  --dd-blue-100:    #dbeafe;
  --dd-blue-600:    #2563eb;
  --dd-blue-700:    #1d4ed8;
  --dd-blue-400:    #60a5fa;
  --dd-ink:         #0f172a;  /* slate-900 — wordmark, dark sidebar */
  --dd-canvas:      #f5f5f4;  /* off-white background of logo plate */

  /* ---------- NEUTRALS (LIGHT) ---------- */
  --bg:              #ffffff;
  --bg-soft:         #f9fafb;  /* gray-50 — page + section-card header */
  --bg-app:          #f9fafb;  /* dashboard/app chrome */
  --fg:              #171717;
  --fg-strong:       #111827;  /* gray-900 — primary text */
  --fg-muted:        #6b7280;  /* gray-500 — secondary text */
  --fg-subtle:       #9ca3af;  /* gray-400 — tertiary / placeholder */
  --border:          #e5e7eb;  /* gray-200 — card + divider */
  --border-strong:   #d1d5db;  /* gray-300 — input border */

  /* ---------- NEUTRALS (DARK) ---------- */
  --dk-bg:           #0f172a;  /* slate-950/900 — page */
  --dk-bg-soft:      #1e293b;  /* slate-800 — thead, section-card header */
  --dk-bg-card:      #0f172a;  /* slate-900 — cards */
  --dk-fg-strong:    #f1f5f9;  /* slate-100 */
  --dk-fg-muted:     #94a3b8;  /* slate-400 */
  --dk-border:       #1e293b;  /* slate-800 */

  /* ---------- SEMANTIC STATE ---------- */
  --ok:              #059669;  /* emerald-600 — delivered / ready */
  --ok-soft:         #ecfdf5;  /* emerald-50 */
  --warn:            #d97706;  /* amber-600 — in transit / pending docs */
  --warn-soft:       #fffbeb;  /* amber-50 */
  --danger:          #dc2626;  /* red-600 — cancelled / errors */
  --danger-soft:     #fef2f2;  /* red-50 */
  --info:            #0284c7;  /* sky-600 — arriving / available */
  --info-soft:       #f0f9ff;
  --accent-purple:   #7c3aed;  /* violet-600 — dropped */
  --accent-teal:     #0d9488;  /* teal-600 — in transit */

  /* ---------- LOAD TYPE COLORS ---------- */
  --lt-import:       #3b82f6;
  --lt-inbound:      #0ea5e9;
  --lt-export:       #8b5cf6;
  --lt-outbound:     #a855f7;
  --lt-road:         #f97316;
  --lt-bill-only:    #6b7280;

  /* ---------- TYPE FAMILIES ---------- */
  --font-sans:  'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --font-mono:  'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-display: var(--font-sans); /* DrayageDirect uses a single family */

  /* ---------- TYPE SCALE (marketing/deck) ---------- */
  --type-hero:     clamp(2.75rem, 6vw, 4.5rem);   /* 44–72px */
  --type-h1:       clamp(2rem, 4vw, 3rem);        /* 32–48px */
  --type-h2:       1.875rem;  /* 30px */
  --type-h3:       1.25rem;   /* 20px */
  --type-lead:     1.125rem;  /* 18px — marketing lead paragraph */
  --type-body:     1rem;      /* 16px */
  --type-small:    0.875rem;  /* 14px — app body, default */
  --type-xs:       0.75rem;   /* 12px — field labels, helpers */
  --type-eyebrow:  0.75rem;   /* 12px uppercase tracked */

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --lh-tight:  1.15;
  --lh-snug:   1.3;
  --lh-body:   1.5;
  --lh-loose:  1.65;

  --tracking-eyebrow: 0.08em;
  --tracking-tight:   -0.015em;

  /* ---------- APP SEMANTIC TOKENS (verbatim from app) ---------- */
  --text-page-title-size: 1.5rem;        /* 24px */
  --text-page-title-weight: 700;
  --text-section-title-size: 0.875rem;   /* 14px */
  --text-section-title-weight: 600;
  --text-field-label-size: 0.75rem;      /* 12px uppercase */
  --text-field-label-weight: 500;
  --text-body-size: 0.875rem;            /* 14px */
  --text-helper-size: 0.75rem;           /* 12px */

  /* ---------- SPACING (verbatim from app) ---------- */
  --space-page-x:        1.5rem;
  --space-page-y:        1.5rem;
  --space-section:       1.5rem;
  --space-section-pad:   1.25rem;
  --space-field:         1rem;
  --space-field-label:   0.375rem;
  --space-row:           0.75rem;
  --space-inline:        0.5rem;

  /* ---------- RADII (from usage audit: rounded-lg/xl/full dominate) ---------- */
  --radius-sm:   0.375rem;   /* 6px  — badges small */
  --radius:      0.5rem;     /* 8px  — inputs, buttons (rounded-lg) */
  --radius-lg:   0.75rem;    /* 12px — cards (rounded-xl) */
  --radius-pill: 9999px;     /* pills, avatars */

  /* ---------- SHADOWS ---------- */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.10), 0 4px 8px rgba(15, 23, 42, 0.04);
  --shadow-ring-blue: 0 0 0 4px rgba(37, 99, 235, 0.15);

  /* ---------- MOTION ---------- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   320ms;
}

/* ============================================================
   SEMANTIC ROLE CLASSES — drop-in classes used by preview cards
   and UI kits. Mirror the app's @utility classes.
   ============================================================ */

.text-page-title   { font: var(--weight-bold) var(--text-page-title-size)/1.2 var(--font-sans); }
.text-section-title{ font: var(--weight-semibold) var(--text-section-title-size)/1.4 var(--font-sans); }
.text-field-label  { font: var(--weight-medium) var(--text-field-label-size)/1.4 var(--font-sans); text-transform: uppercase; letter-spacing: 0.04em; color: var(--fg-muted); }
.text-body         { font: var(--weight-regular) var(--text-body-size)/1.5 var(--font-sans); }
.text-helper       { font: var(--weight-regular) var(--text-helper-size)/1.4 var(--font-sans); }
.text-muted        { color: var(--fg-muted); }
.text-strong       { color: var(--fg-strong); }

/* ============================================================
   MARKETING TYPE ROLES — used on the website
   ============================================================ */

.mk-eyebrow { font: var(--weight-semibold) var(--type-eyebrow)/1.2 var(--font-sans); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--dd-blue-600); }
.mk-hero    { font: var(--weight-bold) var(--type-hero)/var(--lh-tight) var(--font-sans); letter-spacing: var(--tracking-tight); color: var(--fg-strong); }
.mk-h1      { font: var(--weight-bold) var(--type-h1)/var(--lh-tight) var(--font-sans); letter-spacing: var(--tracking-tight); color: var(--fg-strong); }
.mk-h2      { font: var(--weight-bold) var(--type-h2)/var(--lh-snug) var(--font-sans); letter-spacing: var(--tracking-tight); color: var(--fg-strong); }
.mk-h3      { font: var(--weight-semibold) var(--type-h3)/var(--lh-snug) var(--font-sans); color: var(--fg-strong); }
.mk-lead    { font: var(--weight-regular) var(--type-lead)/var(--lh-body) var(--font-sans); color: var(--fg-muted); }
.mk-body    { font: var(--weight-regular) var(--type-body)/var(--lh-body) var(--font-sans); color: var(--fg-strong); }
.mk-caption { font: var(--weight-medium) var(--type-xs)/1.4 var(--font-sans); color: var(--fg-muted); }
.mk-mono    { font-family: var(--font-mono); font-size: 0.875rem; }