/* ============================================================
   G&B Logistics — Design Tokens
   Source of truth: CI guideline 03/2012 + digital extensions
   ============================================================ */

/* Montserrat is also loaded via <link> in each HTML file (preferred).
   @import is kept as a fallback for standalone use of this stylesheet. */


:root {
  /* ---------- Core CI colors ---------- */
  --gb-grey:    #999999;   /* HKS 91 N 60% · C0 M0 Y0 K40 */
  --gb-red:     #C30017;   /* HKS 23 N     · C15 M100 Y90 K10 */
  --gb-black:   #000000;   /* HKS 97 N     · C0 M0 Y0 K100 */
  --gb-white:   #FFFFFF;

  /* ---------- Extended greyscale (digital) ---------- */
  --gb-grey-950: #0A0A0A;
  --gb-grey-900: #161616;
  --gb-grey-800: #242424;
  --gb-grey-700: #3A3A3A;
  --gb-grey-600: #5C5C5C;
  --gb-grey-500: #7A7A7A;
  --gb-grey-400: #999999;   /* = --gb-grey */
  --gb-grey-300: #BFBFBF;
  --gb-grey-200: #DCDCDC;
  --gb-grey-100: #EDEDED;
  --gb-grey-50:  #F6F6F6;

  /* ---------- Red scale (for hover / bg tints only) ---------- */
  --gb-red-900: #7A000E;
  --gb-red-800: #9C0013;
  --gb-red-700: #C30017;   /* = --gb-red */
  --gb-red-600: #D42234;
  --gb-red-500: #E24458;
  --gb-red-100: #FBE4E7;
  --gb-red-50:  #FDF2F3;

  /* ---------- Semantic roles ---------- */
  --color-bg:         var(--gb-white);
  --color-bg-alt:     var(--gb-grey-50);
  --color-bg-inverse: var(--gb-black);
  --color-surface:    var(--gb-white);
  --color-border:     var(--gb-grey-200);
  --color-border-strong: var(--gb-grey-400);
  --color-text:       var(--gb-black);
  --color-text-muted: var(--gb-grey-600);
  --color-text-soft:  var(--gb-grey-500);
  --color-text-inverse: var(--gb-white);
  --color-accent:     var(--gb-red);
  --color-accent-hover: var(--gb-red-800);

  /* Status (extensions — not in original CI) */
  --color-success: #2F7D3A;
  --color-warning: #C57A00;
  --color-info:    #1E4FA8;
  --color-danger:  var(--gb-red);

  /* ---------- Typography ---------- */
  --font-sans: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale — 1.200 minor third, base 16 */
  --fs-xs:    0.75rem;   /* 12 */
  --fs-sm:    0.875rem;  /* 14 */
  --fs-base:  1rem;      /* 16 */
  --fs-md:    1.125rem;  /* 18 */
  --fs-lg:    1.25rem;   /* 20 */
  --fs-xl:    1.5rem;    /* 24 */
  --fs-2xl:   1.875rem;  /* 30 */
  --fs-3xl:   2.25rem;   /* 36 */
  --fs-4xl:   3rem;      /* 48 */
  --fs-5xl:   3.75rem;   /* 60 */
  --fs-6xl:   4.5rem;    /* 72 */

  --fw-regular:  400; /* @kind font */
  --fw-medium:   500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold:     700; /* @kind font */

  --lh-tight:   1.1; /* @kind font */
  --lh-snug:    1.25; /* @kind font */
  --lh-normal:  1.5; /* @kind font */
  --lh-relaxed: 1.65; /* @kind font */

  --tracking-tight:   -0.02em;
  --tracking-normal:   0;
  --tracking-wide:    0.04em;
  --tracking-widest:  0.12em;  /* eyebrow / label caps */

  /* ---------- Spacing (4pt grid) ---------- */
  --space-0:  0;
  --space-1:  0.25rem;   /*  4 */
  --space-2:  0.5rem;    /*  8 */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.5rem;    /* 24 */
  --space-6:  2rem;      /* 32 */
  --space-7:  2.5rem;    /* 40 */
  --space-8:  3rem;      /* 48 */
  --space-9:  4rem;      /* 64 */
  --space-10: 6rem;      /* 96 */
  --space-11: 8rem;      /* 128 */

  /* ---------- Radii ---------- */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-pill: 999px;

  /* G&B skews sharp/industrial — default radius is small. */
  --radius-default: var(--radius-sm);

  /* ---------- Shadows ---------- */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 6px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg: 0 18px 32px rgba(0,0,0,0.10), 0 4px 8px rgba(0,0,0,0.05);
  --shadow-ring: 0 0 0 3px rgba(195,0,23,0.25);

  /* ---------- Motion ---------- */
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast:     120ms; /* @kind other */
  --dur-base:     200ms; /* @kind other */
  --dur-slow:     360ms; /* @kind other */

  /* ---------- Layout ---------- */
  --container-max: 1200px;
  --container-gutter: var(--space-5);
  --header-h: 72px;
}

/* ---------- Base reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }

/* ---------- Heading utilities ---------- */
.h-display {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: clamp(2.5rem, 5vw, var(--fs-6xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}
.h1 { font-weight: var(--fw-bold);    font-size: var(--fs-4xl); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); }
.h2 { font-weight: var(--fw-bold);    font-size: var(--fs-3xl); line-height: var(--lh-snug);  }
.h3 { font-weight: var(--fw-semibold);font-size: var(--fs-2xl); line-height: var(--lh-snug);  }
.h4 { font-weight: var(--fw-semibold);font-size: var(--fs-xl);  line-height: var(--lh-snug);  }
.eyebrow {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-accent);
}
.lead { font-size: var(--fs-md); color: var(--color-text-muted); line-height: var(--lh-relaxed); }