/* ==========================================================================
   Design Tokens  —  GS Logistics (v2)
   Factory baseline with the brand PALETTE overridden for the approved
   "variant-E" look: dark base (#0a0d0b) + logistics green (#22c55e).
   The type / space / radius SCALE is kept from the factory; only palette and
   a few brand-specific tokens are added. Load AFTER reset.css.
   This site is intentionally dark-only (approved art direction).
   ========================================================================== */

:root {
  /* ---- Type: system font stack (fast, no web-font download) ---------------- */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --font-serif: Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  /* ---- Fluid type scale (clamp: min .. viewport .. max) -------------------- */
  /* Small end of the scale — UI labels, captions, secondary copy. Ranges are
     tuned so the desktop (max) value matches the previous fixed sizes, keeping
     the look identical while making small text fluid like the rest of the scale. */
  --step--4: clamp(0.68rem, 0.66rem + 0.1vw, 0.72rem);  /* micro labels / badges */
  --step--3: clamp(0.74rem, 0.72rem + 0.12vw, 0.79rem); /* small uppercase labels */
  --step--2: clamp(0.8rem, 0.78rem + 0.14vw, 0.86rem);  /* captions / small meta */
  --step--1: clamp(0.83rem, 0.78rem + 0.24vw, 0.94rem);
  --step-sm: clamp(0.9rem, 0.87rem + 0.14vw, 0.96rem);  /* secondary body / card copy */
  --step-0: clamp(1rem, 0.96rem + 0.18vw, 1.09rem); /* body ~15-17px */
  --step-1: clamp(1.1rem, 1.02rem + 0.35vw, 1.3rem);
  --step-2: clamp(1.3rem, 1.16rem + 0.6vw, 1.7rem);
  --step-3: clamp(1.6rem, 1.35rem + 1.05vw, 2.4rem);
  --step-4: clamp(1.9rem, 1.5rem + 1.7vw, 2.9rem);
  --step-5: clamp(2.1rem, 1.5rem + 2.8vw, 3.6rem); /* hero H1 */

  --leading-tight: 1.08;
  --leading-normal: 1.55;
  --tracking-tight: -0.02em;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;

  /* ---- Spacing scale (fluid) ---------------------------------------------- */
  --space-3xs: clamp(0.25rem, 0.24rem + 0.05vw, 0.31rem);
  --space-2xs: clamp(0.5rem, 0.47rem + 0.16vw, 0.63rem);
  --space-xs: clamp(0.75rem, 0.71rem + 0.22vw, 0.94rem);
  --space-s: clamp(1rem, 0.93rem + 0.33vw, 1.25rem);
  --space-m: clamp(1.5rem, 1.4rem + 0.49vw, 1.88rem);
  --space-l: clamp(2rem, 1.86rem + 0.65vw, 2.5rem);
  --space-xl: clamp(3rem, 2.8rem + 0.98vw, 3.75rem);
  --space-2xl: clamp(4rem, 3.73rem + 1.3vw, 5rem);
  --space-3xl: clamp(5rem, 4.4rem + 3vw, 7rem);

  /* ---- Layout ------------------------------------------------------------- */
  --content-max: 66ch;
  --wrapper-max: 1200px;
  --gutter: clamp(1.125rem, 4vw, 2rem);

  /* ---- Radius ------------------------------------------------------------- */
  --radius-sm: 0.375rem;   /* 6px  */
  --radius-md: 0.6875rem;  /* 11px — buttons */
  --radius-card: 0.875rem; /* 14px — cards */
  --radius-lg: 1.25rem;    /* 20px — large panels */
  --radius-full: 999px;

  /* ---- Shadows ------------------------------------------------------------ */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 12px 20px -8px rgba(0, 0, 0, 0.55);
  --shadow-elevated: 0 20px 50px -18px rgba(0, 0, 0, 0.7);
  --shadow-brand: 0 16px 40px -14px rgba(34, 197, 94, 0.35);

  /* ---- Motion ------------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 150ms var(--ease-out);
  --transition-base: 250ms var(--ease-out);

  /* ==== PALETTE — GS Logistics (dark + green) ============================= */
  /* Brand */
  --color-brand: #22c55e;
  --color-brand-strong: #16a34a;
  --color-brand-hover: #2fe066;
  --color-brand-deep: #0e7a37;
  --color-on-brand: #06120a;
  --color-accent: #22c55e;

  /* Neutrals (dark by design) */
  --color-bg: #0a0d0b;
  --color-surface: #0f1512;      /* panel  */
  --color-surface-2: #0c110e;    /* panel2 */
  --color-surface-3: #101613;    /* raised cards / chips */
  --color-surface-inset: #0b100d;/* inputs / pills */
  --color-border: #212e26;       /* line    */
  --color-border-strong: #2c3d33;/* line-hi */
  --color-text: #eaf3ee;         /* ink     */
  --color-text-soft: #cfe0d6;    /* lede / body-on-photo */
  --color-text-muted: #9db0a6;   /* mut     */
  --color-text-faint: #748578;   /* mut-d   */
  --color-focus: var(--color-brand);

  /* Soft body-on-dark tints (readable copy inside cards / articles) */
  --color-text-2: #dbe8e0;       /* feature lists          */
  --color-text-3: #d7e4db;       /* list / obligation text */
  --color-text-4: #cadbd0;       /* quotes / intros        */
  --color-text-5: #c6d5cb;       /* long-form legal copy   */

  /* Extra dark surfaces / hover states */
  --color-map-top: #0d1310;      /* map card gradient top (bottom = surface-inset) */
  --color-hover-bg: #121a15;     /* row / chip / card hover fill */
  --color-note-bg: #101c14;      /* inline note panel background */

  /* Brand-tinted icon chip surface */
  --color-icon-bg: #12211a;
  --color-icon-border: #1f3a2a;

  /* Sea / maritime accent (Incoterms sea-only terms) */
  --color-sea: #38bdf8;
  --color-sea-bg: #0d1a22;
  --color-sea-border: #1c3543;
  --color-risk: #f59e6b;
  --color-risk-bg: #2a1512;
  --color-risk-border: #4a2620;

  /* Semantic */
  --color-success: #22c55e;
  --color-warning: #eab308;
  --color-danger: #f87171;

  color-scheme: dark;
}