/* ============================================================
   ARDI Design Tokens — compiled from the ARDI Design System
   (colors, typography, spacing, elevation, base reset).
   Fonts (Archivo, IBM Plex Sans, IBM Plex Mono) are loaded via
   <link> to Google Fonts in index.html. To self-host, place font
   files in assets/fonts/ and add @font-face rules here.
   ============================================================ */


/* ==== tokens/colors.css ==== */
/* ============================================================
   ARDI — Color tokens
   ------------------------------------------------------------
   Grounded in the source: near-black containers/logo, the green
   "EXPRESS" wordmark, cool steel racking & concrete, kraft cartons,
   and the Amazon-orange partner context.

   Two operating divisions get distinct accents:
     • ARDI Express   → GREEN   (warehouse / fulfillment / 3PL / FBA)
     • ARDI Logistics → MARINE  (freight forwarding / ocean+air / trucking)
   The green is sampled/normalized from the painted logo; the marine
   blue is an intentional extension (source shows no Logistics color).
   ============================================================ */

:root {
  /* ---- Base neutrals — cool steel (industrial infrastructure) ---- */
  --white:   #ffffff;
  --ink-50:  #f5f6f8;
  --ink-100: #edeff2;
  --ink-200: #dfe2e7;
  --ink-300: #c4c9d1;
  --ink-400: #9aa0aa;
  --ink-500: #737983;
  --ink-600: #565b64;
  --ink-700: #3c4046;
  --ink-800: #2a2d33;
  --ink-900: #1d1f23;
  --ink-950: #141518;   /* ARDI near-black — logo, containers, apparel */

  /* ---- ARDI Express — green (fulfillment / warehouse) ---- */
  --express-50:  #eaf3ec;
  --express-100: #d5e9db;
  --express-200: #a9d2b4;
  --express-300: #74b487;
  --express-400: #479a61;
  --express-500: #2e8b4e;   /* base — normalized from painted logo */
  --express-600: #21713d;
  --express-700: #185831;
  --express-800: #123f24;

  /* ---- ARDI Logistics — marine steel blue (freight / trucking) ---- */
  /* EXTENSION: source shows no distinct Logistics color (see readme). */
  --logistics-50:  #e9f1f7;
  --logistics-100: #d2e4ef;
  --logistics-200: #a4c8e0;
  --logistics-300: #6aa3c9;
  --logistics-400: #3980ad;
  --logistics-500: #1f6595;   /* base */
  --logistics-600: #17527b;
  --logistics-700: #113f60;
  --logistics-800: #0d3049;

  /* ---- Amazon partner orange (FBA / SPN partner context only) ---- */
  --amazon-100: #ffedcf;
  --amazon-500: #ff9900;   /* Amazon brand orange — partner cues only */
  --amazon-600: #e88900;

  /* ---- Signal ---- */
  --amber-100: #fbeecb;
  --amber-500: #e0a219;   /* caution / in-transit / demurrage warnings */
  --red-100:   #f7dcd8;
  --red-500:   #c0392b;   /* error / exception */

  /* ============ Semantic aliases (default = ARDI master brand) ============ */

  /* Surfaces */
  --surface-page:      var(--ink-50);
  --surface-card:      var(--white);
  --surface-raised:    var(--white);
  --surface-sunken:    var(--ink-100);
  --surface-inverse:   var(--ink-950);   /* dark hero / footer bands */
  --surface-inverse-2: var(--ink-900);
  --surface-kraft:     #f3ead9;          /* warm section tint (cartons) */

  /* Text */
  --text-strong:        var(--ink-950);
  --text-body:          var(--ink-700);
  --text-muted:         var(--ink-500);
  --text-faint:         var(--ink-400);
  --text-inverse:       var(--white);
  --text-inverse-muted: #aab0ba;
  --text-on-accent:     var(--white);

  /* Borders */
  --border-hair:    var(--ink-200);
  --border-strong:  var(--ink-300);
  --border-inverse: rgba(255,255,255,.14);
  --border-focus:   var(--express-500);

  /* Brand + primary action (default action = Express green) */
  --brand:         var(--ink-950);
  --accent:        var(--express-500);
  --accent-hover:  var(--express-600);
  --accent-active: var(--express-700);
  --accent-soft:   var(--express-100);
  --accent-on:     var(--white);
  --link:          var(--express-600);
  --link-hover:    var(--express-700);

  /* Division quick-refs (both always available) */
  --express:   var(--express-500);
  --logistics: var(--logistics-500);

  /* Semantic states */
  --success: var(--express-500);
  --info:    var(--logistics-500);
  --warning: var(--amber-500);
  --danger:  var(--red-500);

  /* Focus ring */
  --ring: 0 0 0 3px color-mix(in srgb, var(--border-focus) 34%, transparent);
}

/* ============ Division theme scopes ============
   Wrap any subtree to retint accents to a division.
   e.g. <section class="theme-logistics"> … </section>            */

.theme-express {
  --accent:        var(--express-500);
  --accent-hover:  var(--express-600);
  --accent-active: var(--express-700);
  --accent-soft:   var(--express-100);
  --link:          var(--express-600);
  --link-hover:    var(--express-700);
  --border-focus:  var(--express-500);
}

.theme-logistics {
  --accent:        var(--logistics-500);
  --accent-hover:  var(--logistics-600);
  --accent-active: var(--logistics-700);
  --accent-soft:   var(--logistics-100);
  --link:          var(--logistics-600);
  --link-hover:    var(--logistics-700);
  --border-focus:  var(--logistics-500);
}

/* Neutral / master scope — for cross-division UI (e.g. the "About" area of
   the header) that belongs to neither operating division. Uses the near-black
   ink ramp instead of a division accent. */
.theme-neutral {
  --accent:        var(--ink-800);
  --accent-hover:  var(--ink-900);
  --accent-active: var(--ink-950);
  --accent-soft:   var(--ink-100);
  --link:          var(--ink-800);
  --link-hover:    var(--ink-950);
  --border-focus:  var(--ink-800);
}


/* ==== tokens/typography.css ==== */
/* ============================================================
   ARDI — Typography tokens
   ------------------------------------------------------------
   Display: Archivo (industrial grotesque; nearest match to the
            bespoke ARDI wordmark).
   Body/UI: IBM Plex Sans (engineered, operational).
   Data:    IBM Plex Mono (tracking #s, IDs, dims, stats, labels).

   Signature move: wide-tracked UPPERCASE micro-labels
   ("C O R E   S O L U T I O N S") — see --tracking-label.
   ============================================================ */

:root {
  /* Families */
  --font-display: 'Archivo', 'Arial Narrow', system-ui, sans-serif;
  --font-sans:    'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Weights */
  --fw-regular:  400; /* @kind font */
  --fw-medium:   500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold:     700; /* @kind font */
  --fw-black:    800; /* @kind font */
  --fw-heavy:    900; /* @kind font */

  /* Type scale (px @ 16px root) */
  --text-2xs:  11px;
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  38px;
  --text-4xl:  48px;
  --text-5xl:  62px;
  --text-6xl:  80px;

  /* Line height */
  --leading-none:    1;
  --leading-tight:   1.06;
  --leading-snug:    1.2;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* Letter-spacing */
  --tracking-tighter: -0.03em;
  --tracking-tight:   -0.015em;
  --tracking-normal:  0;
  --tracking-wide:    0.03em;
  --tracking-label:   0.14em;   /* wide uppercase eyebrows / micro-labels */
}

/* ---- Type role utilities (optional, brand-prefixed) ---- */
.ardi-eyebrow {
  font-family: var(--font-mono);
  font-weight: var(--fw-medium);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}
.ardi-display {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
}
.ardi-stat {
  font-family: var(--font-display);
  font-weight: var(--fw-heavy);
  font-variant-numeric: tabular-nums;
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
}
.ardi-mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}


/* ==== tokens/spacing.css ==== */
/* ============================================================
   ARDI — Spacing, radius, layout tokens
   ------------------------------------------------------------
   4px base grid. Radii are restrained/crisp — this is an
   operational, infrastructure brand, not a soft SaaS one.
   ============================================================ */

:root {
  /* Spacing scale (4px grid) */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* Radii — crisp corners */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-xl:   14px;
  --radius-2xl:  20px;
  --radius-pill: 999px;

  /* Border widths */
  --border-width:        1px;
  --border-width-strong: 2px;

  /* Container widths */
  --container-sm: 640px;
  --container-md: 880px;
  --container-lg: 1120px;
  --container-xl: 1320px;

  /* Section rhythm */
  --section-y:      var(--space-24);
  --section-y-tight: var(--space-16);
}


/* ==== tokens/elevation.css ==== */
/* ============================================================
   ARDI — Elevation (shadows) + motion tokens
   ------------------------------------------------------------
   Functional, grounded shadows on a cool-ink base. No glow,
   no glass. Borders do most of the separation; shadow adds a
   little physical lift. Motion is quick and mechanical.
   ============================================================ */

:root {
  /* Shadows (light surfaces) */
  --shadow-xs: 0 1px 2px rgba(20,21,24,.06);
  --shadow-sm: 0 1px 2px rgba(20,21,24,.06), 0 1px 3px rgba(20,21,24,.09);
  --shadow-md: 0 2px 4px rgba(20,21,24,.06), 0 6px 16px rgba(20,21,24,.08);
  --shadow-lg: 0 2px 6px rgba(20,21,24,.06), 0 12px 28px rgba(20,21,24,.11);
  --shadow-xl: 0 24px 56px rgba(20,21,24,.18);

  /* On dark surfaces */
  --shadow-dark:    0 10px 30px rgba(0,0,0,.42);
  --shadow-dark-lg: 0 24px 60px rgba(0,0,0,.55);

  /* Hairline top-highlight for pressed/inset pieces */
  --inset-top: inset 0 1px 0 rgba(255,255,255,.55);

  /* Motion — quick, mechanical, no bounce */
  --ease-standard: cubic-bezier(.2, 0, 0, 1); /* @kind other */
  --ease-out:      cubic-bezier(.16, 1, .3, 1); /* @kind other */
  --dur-fast:   120ms; /* @kind other */
  --dur-normal: 180ms; /* @kind other */
  --dur-slow:   280ms; /* @kind other */
}


/* ==== base.css ==== */
/* ============================================================
   ARDI — Base element defaults (light reset)
   ------------------------------------------------------------
   Minimal, override-friendly. Consumers get sensible body type,
   branded link colors, and selection color out of the box.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--text-strong);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
  font-weight: var(--fw-bold);
}

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; text-underline-offset: 2px; }

code, kbd, samp, pre { font-family: var(--font-mono); }

::selection { background: color-mix(in srgb, var(--accent) 24%, transparent); }

:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-xs); }