/* =================================================================
   SALLAUM LOGISTICS — Design Tokens: Colors & Type
   Single bold-red + ink + grayscale system. Heavy display sans,
   editorial photography, generous pill CTAs.
   Font substitute: Archivo (Google Fonts) stands in for the
   proprietary wordmark face — see README "Font substitution".
   ================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');

:root {
  /* ---- Brand & accent ---------------------------------------- */
  --sl-red:            #e92233;  /* Sallaum Red — sampled from logo */
  --sl-red-deep:       #c4121f;  /* hover / pressed red             */
  --sl-on-red:         #ffffff;

  /* ---- Ink / surface ----------------------------------------- */
  --sl-ink:            #1c2226;  /* near-black hull navy            */
  --sl-ink-soft:       #2b343a;  /* raised dark surface             */
  --sl-canvas:         #ffffff;  /* default light background        */
  --sl-canvas-soft:    #f2f3f4;  /* chip / section tint             */
  --sl-canvas-line:    #e3e5e7;  /* hairline on light               */

  /* ---- Text -------------------------------------------------- */
  --sl-fg:             #1c2226;  /* headings + body on light        */
  --sl-fg-muted:       #5f676d;  /* secondary copy, captions        */
  --sl-fg-faint:       #9aa1a6;  /* metadata, placeholders          */
  --sl-on-dark:        #ffffff;  /* text on ink / red               */
  --sl-on-dark-muted:  rgba(255,255,255,0.62);

  /* ---- Semantic (in-product only) ---------------------------- */
  --sl-success:        #1f8a4c;
  --sl-warning:        #d98a00;
  --sl-danger:         var(--sl-red);

  /* ---- Type families ----------------------------------------- */
  --sl-font:  'Roboto', 'Helvetica Neue', Arial, sans-serif;

  /* ---- Type scale (size / weight / line-height / tracking) --- */
  --sl-display-hero-size: 128px; --sl-display-hero-weight: 800; --sl-display-hero-lh: 0.92; --sl-display-hero-ls: -2px;
  --sl-display-xxl-size:  104px; --sl-display-xxl-weight:  800; --sl-display-xxl-lh: 0.94; --sl-display-xxl-ls: -1.5px;
  --sl-display-xl-size:    72px; --sl-display-xl-weight:   800; --sl-display-xl-lh: 0.96; --sl-display-xl-ls: -1px;
  --sl-display-lg-size:    48px; --sl-display-lg-weight:   300; --sl-display-lg-lh: 1.08;
  --sl-display-md-size:    40px; --sl-display-md-weight:   300; --sl-display-md-lh: 1.1;
  --sl-display-sm-size:    30px; --sl-display-sm-weight:   700; --sl-display-sm-lh: 1.2;
  --sl-display-xs-size:    22px; --sl-display-xs-weight:   700; --sl-display-xs-lh: 1.2;

  --sl-eyebrow-size:       14px; --sl-eyebrow-weight:      800; --sl-eyebrow-ls: 2px;
  --sl-body-lg-size:       21px; --sl-body-lg-lh: 1.5;
  --sl-body-md-size:       17px; --sl-body-md-lh: 1.6;
  --sl-body-sm-size:       15px; --sl-body-sm-lh: 1.5;
  --sl-caption-size:       13px; --sl-caption-lh: 1.4;
  --sl-caption-up-size:    12px; --sl-caption-up-ls: 1px;

  /* ---- Radius ------------------------------------------------ */
  --sl-r-none: 0px;
  --sl-r-sm:   6px;    /* cards, inputs, images           */
  --sl-r-md:   10px;   /* larger panels                   */
  --sl-r-pill-sm: 32px;
  --sl-r-pill:    60px; /* signature CTA pill             */
  --sl-r-full:    9999px;

  /* ---- Spacing (4px base) ------------------------------------ */
  --sl-sp-xxs: 2px;  --sl-sp-xs: 4px;  --sl-sp-sm: 8px;  --sl-sp-md: 12px;
  --sl-sp-lg: 16px;  --sl-sp-xl: 20px; --sl-sp-2xl: 24px; --sl-sp-3xl: 32px;
  --sl-sp-4xl: 48px; --sl-sp-5xl: 64px; --sl-sp-6xl: 96px;

  /* ---- Elevation (used sparingly — brand prefers polarity) --- */
  --sl-shadow-sm: 0 1px 2px rgba(28,34,38,0.06);
  --sl-shadow-md: 0 8px 28px rgba(28,34,38,0.10);

  --sl-container: 1280px;
}

/* =================================================================
   SEMANTIC ELEMENT STYLES — apply with classes inside .sl-scope
   ================================================================= */
.sl-scope { font-family: var(--sl-font); color: var(--sl-fg); -webkit-font-smoothing: antialiased; }

.sl-hero       { font-size: var(--sl-display-hero-size); font-weight: var(--sl-display-hero-weight); line-height: var(--sl-display-hero-lh); letter-spacing: var(--sl-display-hero-ls); text-transform: uppercase; }
.sl-display-xxl{ font-size: var(--sl-display-xxl-size); font-weight: var(--sl-display-xxl-weight); line-height: var(--sl-display-xxl-lh); letter-spacing: var(--sl-display-xxl-ls); text-transform: uppercase; }
.sl-display-xl { font-size: var(--sl-display-xl-size); font-weight: var(--sl-display-xl-weight); line-height: var(--sl-display-xl-lh); letter-spacing: var(--sl-display-xl-ls); text-transform: uppercase; }
.sl-display-lg { font-size: var(--sl-display-lg-size); font-weight: var(--sl-display-lg-weight); line-height: var(--sl-display-lg-lh); }
.sl-display-md { font-size: var(--sl-display-md-size); font-weight: var(--sl-display-md-weight); line-height: var(--sl-display-md-lh); }
.sl-display-sm { font-size: var(--sl-display-sm-size); font-weight: var(--sl-display-sm-weight); line-height: var(--sl-display-sm-lh); }
.sl-display-xs { font-size: var(--sl-display-xs-size); font-weight: var(--sl-display-xs-weight); line-height: var(--sl-display-xs-lh); }

.sl-eyebrow    { font-size: var(--sl-eyebrow-size); font-weight: var(--sl-eyebrow-weight); letter-spacing: var(--sl-eyebrow-ls); text-transform: uppercase; color: var(--sl-red); }
.sl-body-lg    { font-size: var(--sl-body-lg-size); line-height: var(--sl-body-lg-lh); font-weight: 400; }
.sl-body-md    { font-size: var(--sl-body-md-size); line-height: var(--sl-body-md-lh); font-weight: 400; }
.sl-body-sm    { font-size: var(--sl-body-sm-size); line-height: var(--sl-body-sm-lh); font-weight: 400; }
.sl-caption    { font-size: var(--sl-caption-size); line-height: var(--sl-caption-lh); color: var(--sl-fg-muted); }
.sl-caption-up { font-size: var(--sl-caption-up-size); letter-spacing: var(--sl-caption-up-ls); text-transform: uppercase; font-weight: 600; color: var(--sl-fg-muted); }

/* =================================================================
   CORE COMPONENT PRIMITIVES
   ================================================================= */
.sl-btn { font-family: var(--sl-font); font-size: 17px; font-weight: 600; line-height: 1; border-radius: var(--sl-r-pill);
  padding: 16px 30px; border: 1.5px solid transparent; cursor: pointer; display: inline-flex; align-items: center; gap: 10px;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .06s ease; text-decoration: none; white-space: nowrap; }
.sl-btn:active { transform: translateY(1px); }
.sl-btn--primary { background: var(--sl-red); color: var(--sl-on-red); border-color: var(--sl-red); }
.sl-btn--primary:hover { background: var(--sl-red-deep); border-color: var(--sl-red-deep); }
.sl-btn--outline-red { background: transparent; color: var(--sl-red); border-color: var(--sl-red); }
.sl-btn--outline-red:hover { background: var(--sl-red); color: var(--sl-on-red); }
.sl-btn--outline-dark { background: transparent; color: var(--sl-ink); border-color: var(--sl-ink); }
.sl-btn--outline-dark:hover { background: var(--sl-ink); color: var(--sl-on-dark); }
.sl-btn--on-dark { background: transparent; color: var(--sl-on-dark); border-color: rgba(255,255,255,.6); }
.sl-btn--on-dark:hover { background: var(--sl-on-dark); color: var(--sl-ink); }

.sl-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--sl-canvas-soft); color: var(--sl-ink);
  font-size: 13px; font-weight: 700; padding: 6px 14px; border-radius: var(--sl-r-pill-sm); }

.sl-input { font-family: var(--sl-font); font-size: 15px; color: var(--sl-ink); background: var(--sl-canvas);
  border: 1.5px solid var(--sl-canvas-line); border-radius: var(--sl-r-sm); padding: 12px 16px; width: 100%; outline: none;
  transition: border-color .15s ease; }
.sl-input::placeholder { color: var(--sl-fg-faint); }
.sl-input:focus { border-color: var(--sl-ink); }

.sl-card { background: var(--sl-canvas); border-radius: var(--sl-r-sm); overflow: hidden; }