/* SP GROUP CARGO marketing site v1 — design tokens (2026-09-13). Loaded FIRST; every stylesheet uses these names.
   The existing SPG colour format: GRAPHITE ground + SP RED, ink greys, semantic state colours. Dark by design
   (the live platform is graphite everywhere). */
:root{
  /* graphite ground */
  --sp-void:#161B21;
  --sp-ground:#1E242C;      /* the platform's register background */
  --sp-deep:#242C35;
  --sp-panel:#2A323C;
  --sp-panel-2:#313A45;
  --sp-line:rgba(255,255,255,.10);
  --sp-line-2:#3A434F;
  /* ink */
  --sp-ink:#F2F5F8;
  --sp-ink-2:#C3CBD4;
  --sp-ink-3:#98A3AF;
  --sp-ink-4:#6E7884;
  /* brand */
  --sp-red:#E8323F;         /* SP red on graphite */
  --sp-red-deep:#C8202E;    /* house red (documents, pressed states) */
  --sp-red-glow:rgba(232,50,63,.28);
  --sp-navy:#16202B;        /* house navy, used for the deepest panels and the seal */
  /* lanes and modes (the route map) */
  --sp-ocean:#E8323F;       /* ocean lanes = red (as on the live map) */
  --sp-air:#6FA8DC;         /* air = cool blue */
  --sp-road:#B8C2CC;        /* drayage / road = light grey */
  /* semantic state (bright variants for dark ground; house hexes in comments) */
  --sp-ok:#3FB37F;          /* house green #0f7a48 */
  --sp-info:#4C9BE8;        /* house blue  #0b4f8a */
  --sp-warn:#E0A43A;        /* house amber #a5701a */
  /* type: IBM Plex, already loaded by the platform */
  --sp-display:"IBM Plex Sans Condensed","IBM Plex Sans","Helvetica Neue",Arial,"Noto Sans KR","Noto Sans SC",sans-serif;
  --sp-sans:"IBM Plex Sans","Helvetica Neue",Arial,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR","PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
  --sp-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sp-fs-display:clamp(2.6rem,5.8vw,5.6rem);
  --sp-fs-h2:clamp(1.9rem,3.6vw,3.3rem);
  --sp-fs-h3:clamp(1.15rem,1.5vw,1.4rem);
  --sp-fs-body:1.0625rem;
  --sp-fs-small:.9375rem;
  --sp-fs-data:.8125rem;
  --sp-track-display:-.015em;
  /* layout */
  --sp-maxw:1280px;
  --sp-pad:clamp(20px,4.5vw,64px);
  --sp-gutter:clamp(16px,2vw,28px);
  --sp-nav-h:68px;
  --sp-r-sm:6px; --sp-r:10px; --sp-r-lg:14px;
  /* motion: crisp, logistics-grade (no long glide) */
  --sp-ease:cubic-bezier(.2,.8,.2,1);
  --sp-ease-snap:cubic-bezier(.3,1.2,.4,1);
  --sp-t-fast:.18s; --sp-t:.35s; --sp-t-slow:.8s;
}