/* ==========================================================================
   GoCargo — token layer
   Product: GoCargo, by Aeroinis · aeroinis.com
   Build step 02 (colour, geometry, elevation, motion) + 03 (type)

   Extends the existing aeroinis.com identity. Every legacy --ai-* value is
   preserved somewhere in a ramp; nothing about the brand is thrown away.
   Legacy aliases at the bottom let old markup keep working during migration.

   Rules that are not negotiable:
     1. Colour is only ever consumed through a ROLE token (--gc-text-*,
        --gc-bg-*, --gc-action-*). Never reach into a ramp from a component.
     2. Gold is brand + action. It is NEVER a status colour.
     3. Status is never colour-alone. Every status chip carries an icon,
        because warning and gold sit only 2.18:1 apart.
     4. Gold as TEXT on light = --gc-gold-700 only. gold-400/500 are fills.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · PRIMITIVES — the ramps. Do not consume these directly in components.
   -------------------------------------------------------------------------- */
:root{
  /* Navy — primary. 500 is the Aeroinis brand navy. */
  --gc-navy-50:#F2F6FB;  --gc-navy-100:#DFE9F5; --gc-navy-200:#C4D6EB;
  --gc-navy-300:#99B4D4; --gc-navy-400:#5477A0; --gc-navy-500:#163A5F;
  --gc-navy-600:#112F50; --gc-navy-700:#0D253E; --gc-navy-800:#102238;
  --gc-navy-900:#0F1E33; --gc-navy-950:#0B0D0F;

  /* Gold — accent + primary action. 200/400/500/700 are existing site values. */
  --gc-gold-50:#FDF9F0;  --gc-gold-100:#FAEFDC; --gc-gold-200:#F0DFBB;
  --gc-gold-300:#E1C594; --gc-gold-400:#C8A96A; --gc-gold-500:#B58A3C;
  --gc-gold-600:#9B772F; --gc-gold-700:#806536; --gc-gold-800:#5A4723;
  --gc-gold-900:#382C14;

  /* Signal — links, info, active states. 500 is the existing --tc-blue. */
  --gc-signal-50:#F0F7FC;  --gc-signal-100:#DBECFA; --gc-signal-200:#BCD9F1;
  --gc-signal-300:#8BB7D9; --gc-signal-400:#5589B0; --gc-signal-500:#2A638A;
  --gc-signal-600:#1A5074; --gc-signal-700:#0F3E5D; --gc-signal-800:#0A2C42;
  --gc-signal-900:#071B29;

  /* Warm neutrals — page grounds and prose. Hue-biased toward the gold. */
  --gc-warm-0:#FFFFFF;   --gc-warm-25:#FBFAF6;  --gc-warm-50:#F7F5F0;
  --gc-warm-100:#F5F4F0; --gc-warm-200:#E2DFD6; --gc-warm-300:#D0CCC2;
  --gc-warm-400:#A9A49A; --gc-warm-500:#6A6C62; --gc-warm-600:#6A6C62;
  --gc-warm-700:#4A4D46; --gc-warm-800:#38352E; --gc-warm-900:#23201C;

  /* Cool neutrals — DATA surfaces only: tables, dashboards, the funnel. */
  --gc-cool-50:#EEF3F6;  --gc-cool-100:#E3E9ED; --gc-cool-200:#D9E0E6;
  --gc-cool-300:#C3CCD3; --gc-cool-400:#94A0AA; --gc-cool-500:#5F6E7B;
  --gc-cool-600:#455561; --gc-cool-700:#2F3C47;

  /* Semantic ramps */
  --gc-ok-50:#ECF7F1;   --gc-ok-100:#D3EEDF; --gc-ok-300:#7FC8A5;
  --gc-ok-500:#176547;  --gc-ok-600:#0A5438; --gc-ok-700:#07402A;

  --gc-warn-50:#FFF1EB; --gc-warn-100:#FFE1D2; --gc-warn-300:#E39A62;
  --gc-warn-500:#B25720;--gc-warn-600:#994712;--gc-warn-700:#79380F;

  --gc-bad-50:#FFEFEE;  --gc-bad-100:#FFDDDA; --gc-bad-300:#E8867F;
  --gc-bad-500:#A33737; --gc-bad-600:#8D292A; --gc-bad-700:#701E20;
}

/* --------------------------------------------------------------------------
   2 · ROLES — light theme. This is the layer components are allowed to use.
   -------------------------------------------------------------------------- */
:root{
  /* Grounds */
  --gc-bg-page:var(--gc-warm-50);        /* cream. The Aeroinis signature. */
  --gc-bg-surface:var(--gc-warm-0);      /* cards, panels */
  --gc-bg-raised:var(--gc-warm-25);
  --gc-bg-sunken:var(--gc-warm-200);
  --gc-bg-data:var(--gc-cool-50);        /* input panels, table headers */
  --gc-bg-inverse:var(--gc-navy-900);    /* dark bands inside a light page */
  --gc-bg-cinema:var(--gc-navy-950);     /* full-bleed photographic sections */
  --gc-bg-accent-soft:var(--gc-gold-100);
  --gc-bg-signal-soft:var(--gc-signal-50);

  /* Scrims. These sit between a photograph and the type on top of it, and they
     are the only roles in this file that deliberately do NOT flip with the
     theme: the band they cover is --gc-bg-cinema, which is dark in every theme,
     so a scrim that lightened in light mode would destroy the contrast it exists
     to protect. --gc-scrim is what a headline needs behind it; --gc-scrim-soft
     is for the part of the frame where the photograph should still be read. */
  --gc-scrim:rgba(0, 0, 0, .78);
  --gc-scrim-soft:rgba(0, 0, 0, .44);

  /* A wash for shapes drawn ON a dark ground — the disc behind an icon on the
     benefit band, for example. Light rather than a named colour, so it works on
     --gc-bg-inverse and --gc-bg-cinema alike and needs no second value when the
     theme flips the ground underneath it. */
  --gc-bg-on-inverse-soft:rgba(247, 245, 240, .07);
  --gc-bg-on-inverse-line:rgba(247, 245, 240, .16);

  /* Text */
  --gc-text:var(--gc-navy-800);          /* body. 14.7:1 on page. */
  --gc-text-strong:var(--gc-navy-900);   /* headings */
  --gc-text-muted:var(--gc-cool-500);    /* 4.8:1 — captions, meta */
  --gc-text-subtle:var(--gc-warm-500);   /* large text only */
  --gc-text-on-dark:var(--gc-warm-100);        /* fixed: for grounds that are ALWAYS dark */
  --gc-text-on-dark-muted:#A7ABA6;
  --gc-text-on-dark-subtle:#8F8A80;      /* ≥18px only */
  --gc-text-on-inverse:var(--gc-warm-100);     /* flips with --gc-bg-inverse */
  --gc-text-on-inverse-muted:#A7ABA6;
  --gc-text-on-gold:var(--gc-navy-950);  /* 8.7:1 on gold-400 */
  --gc-text-gold:var(--gc-gold-700);     /* the ONLY gold that may be text */
  /* --gc-text-gold is tuned for the page ground. On --gc-bg-cinema, which never
     flips, gold-700 measures 3.55:1 — this is the same gold at the lightness the
     dark theme already uses, and it is still the only gold that may be text. */
  --gc-text-gold-on-dark:var(--gc-gold-300);
  --gc-text-link:var(--gc-signal-600);   /* 7.9:1 */
  --gc-text-link-hover:var(--gc-signal-700);

  /* Lines */
  --gc-line:var(--gc-warm-200);
  --gc-line-strong:var(--gc-warm-300);
  --gc-line-data:var(--gc-cool-200);
  --gc-line-on-dark:rgba(245,244,240,.16);
  --gc-line-on-inverse:rgba(245,244,240,.20);  /* hairline on --gc-bg-inverse; flips with it */
  --gc-line-focus:var(--gc-gold-500);

  /* Actions — two, and only two.
     PRIMARY GOLD converts (Get quote, Top up, Book).
     SECONDARY NAVY proceeds (Continue, View details, Contact the desk). */
  --gc-action:var(--gc-gold-400);
  --gc-action-hover:var(--gc-gold-500);
  --gc-action-active:var(--gc-gold-600);
  --gc-action-ink:var(--gc-navy-950);
  --gc-action-soft:var(--gc-gold-100);

  --gc-action-2:var(--gc-navy-500);
  --gc-action-2-hover:var(--gc-navy-600);
  --gc-action-2-active:var(--gc-navy-700);
  --gc-action-2-ink:var(--gc-warm-50);

  --gc-action-ghost-ink:var(--gc-navy-500);
  --gc-action-ghost-line:var(--gc-navy-300);
  --gc-action-disabled:var(--gc-warm-300);
  --gc-action-disabled-ink:var(--gc-warm-500);

  /* Status — always paired with an icon */
  --gc-ok:var(--gc-ok-500);     --gc-ok-bg:var(--gc-ok-50);     --gc-ok-ink:var(--gc-ok-700);
  --gc-warn:var(--gc-warn-500); --gc-warn-bg:var(--gc-warn-50); --gc-warn-ink:var(--gc-warn-700);
  --gc-bad:var(--gc-bad-500);   --gc-bad-bg:var(--gc-bad-50);   --gc-bad-ink:var(--gc-bad-700);
  --gc-info:var(--gc-signal-500);--gc-info-bg:var(--gc-signal-50);--gc-info-ink:var(--gc-signal-700);
  --gc-neutral:var(--gc-cool-500);--gc-neutral-bg:var(--gc-cool-50);--gc-neutral-ink:var(--gc-cool-700);

  /* Shipment lifecycle — the one place GoCargo needs more than the reference had */
  --gc-st-draft:var(--gc-neutral);        --gc-st-draft-bg:var(--gc-neutral-bg);
  --gc-st-quoted:var(--gc-info);          --gc-st-quoted-bg:var(--gc-info-bg);
  --gc-st-booked:var(--gc-navy-500);      --gc-st-booked-bg:var(--gc-navy-50);
  --gc-st-collected:var(--gc-signal-600); --gc-st-collected-bg:var(--gc-signal-50);
  --gc-st-transit:var(--gc-signal-500);   --gc-st-transit-bg:var(--gc-signal-50);
  --gc-st-customs:var(--gc-warn-600);     --gc-st-customs-bg:var(--gc-warn-bg);
  --gc-st-exception:var(--gc-bad);        --gc-st-exception-bg:var(--gc-bad-bg);
  --gc-st-delivered:var(--gc-ok);         --gc-st-delivered-bg:var(--gc-ok-bg);
  --gc-st-cancelled:var(--gc-warm-700);   --gc-st-cancelled-bg:var(--gc-warm-200);

  /* Wallet — balance is the payment rail, so it gets first-class tokens */
  --gc-wallet-ink:var(--gc-navy-800);
  --gc-wallet-bg:var(--gc-gold-50);
  --gc-wallet-line:var(--gc-gold-300);
  --gc-wallet-positive:var(--gc-ok-600);
  --gc-wallet-low:var(--gc-warn-600);      /* below the next booking's cost */
  --gc-wallet-negative:var(--gc-bad-600);
  --gc-wallet-pending:var(--gc-cool-500);  /* top-up cleared but not settled */
  /* The hero band is --gc-bg-cinema, which does not flip, so the wallet states
     shown on it need light-ground values in every theme. */
  --gc-wallet-positive-on-dark:var(--gc-ok-300);
  --gc-wallet-low-on-dark:var(--gc-warn-300);
  --gc-wallet-negative-on-dark:var(--gc-bad-300);
  --gc-wallet-pending-on-dark:var(--gc-cool-300);
  --gc-wallet-topup:var(--gc-action);
  --gc-wallet-topup-ink:var(--gc-action-ink);

  /* Elevation */
  --gc-shadow-sm:0 1px 2px rgba(16,34,56,.06);
  --gc-shadow:0 10px 30px rgba(16,34,56,.08);          /* legacy --ai-shadow */
  --gc-shadow-raised:0 18px 48px rgba(10,28,47,.16);   /* legacy --ai-shadow-raised */
  --gc-shadow-overlay:0 32px 80px rgba(10,28,47,.28);
  --gc-focus-ring:0 0 0 3px rgba(181,138,60,.45);
  --gc-focus-ring-dark:0 0 0 3px rgba(200,169,106,.55);
}

/* --------------------------------------------------------------------------
   3 · ROLES — dark theme. Tokens only; never style a component in here.
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --gc-bg-page:var(--gc-navy-950);
    --gc-bg-surface:#101215;
    --gc-bg-raised:#131A22;
    --gc-bg-sunken:#0B0D0F;
    --gc-bg-data:#131A22;
    --gc-bg-inverse:var(--gc-warm-50);
    --gc-bg-cinema:#000000;
    --gc-bg-accent-soft:rgba(200,169,106,.12);
    --gc-bg-signal-soft:rgba(42,99,138,.16);

    --gc-text:var(--gc-warm-100);
    --gc-text-strong:#FBFAF6;
    --gc-text-muted:#A7ABA6;
    --gc-text-subtle:#8F8A80;
    --gc-text-on-dark:var(--gc-warm-100);
    --gc-text-on-dark-muted:#A7ABA6;
    --gc-text-on-dark-subtle:#8F8A80;
    --gc-text-on-inverse:var(--gc-navy-800);
    --gc-text-on-inverse-muted:var(--gc-cool-500);
    --gc-text-on-gold:var(--gc-navy-950);
    --gc-text-gold:var(--gc-gold-300);
    --gc-text-gold-on-dark:var(--gc-gold-300);
    --gc-text-link:var(--gc-signal-300);
    --gc-text-link-hover:var(--gc-signal-200);

    --gc-line:rgba(245,244,240,.14);
    --gc-line-strong:rgba(245,244,240,.24);
    --gc-line-data:rgba(245,244,240,.10);
    --gc-line-on-dark:rgba(245,244,240,.16);
    --gc-line-on-inverse:rgba(14,26,43,.18);
    --gc-line-focus:var(--gc-gold-400);

    --gc-action:var(--gc-gold-400);
    --gc-action-hover:var(--gc-gold-300);
    --gc-action-active:var(--gc-gold-500);
    --gc-action-ink:var(--gc-navy-950);
    --gc-action-soft:rgba(200,169,106,.14);

    --gc-action-2:var(--gc-navy-300);
    --gc-action-2-hover:var(--gc-navy-200);
    --gc-action-2-active:var(--gc-navy-400);
    --gc-action-2-ink:var(--gc-navy-950);

    --gc-action-ghost-ink:var(--gc-warm-100);
    --gc-action-ghost-line:rgba(245,244,240,.40);
    --gc-action-disabled:rgba(245,244,240,.10);
    --gc-action-disabled-ink:#6A6C62;

    --gc-ok:var(--gc-ok-300);     --gc-ok-bg:rgba(23,101,71,.18);    --gc-ok-ink:var(--gc-ok-300);
    --gc-warn:var(--gc-warn-300); --gc-warn-bg:rgba(178,87,32,.20);  --gc-warn-ink:var(--gc-warn-300);
    --gc-bad:var(--gc-bad-300);   --gc-bad-bg:rgba(163,55,55,.20);   --gc-bad-ink:var(--gc-bad-300);
    --gc-info:var(--gc-signal-300);--gc-info-bg:rgba(42,99,138,.20); --gc-info-ink:var(--gc-signal-300);
    --gc-neutral:var(--gc-cool-400);--gc-neutral-bg:rgba(148,160,170,.14);--gc-neutral-ink:var(--gc-cool-300);

    --gc-st-draft:var(--gc-cool-400);    --gc-st-draft-bg:rgba(148,160,170,.14);
    --gc-st-quoted:var(--gc-signal-300); --gc-st-quoted-bg:rgba(42,99,138,.20);
    --gc-st-booked:var(--gc-navy-300);   --gc-st-booked-bg:rgba(84,119,160,.20);
    --gc-st-collected:var(--gc-signal-300);--gc-st-collected-bg:rgba(42,99,138,.20);
    --gc-st-transit:var(--gc-signal-200);--gc-st-transit-bg:rgba(42,99,138,.20);
    --gc-st-customs:var(--gc-warn-300);  --gc-st-customs-bg:rgba(178,87,32,.20);
    --gc-st-exception:var(--gc-bad-300); --gc-st-exception-bg:rgba(163,55,55,.20);
    --gc-st-delivered:var(--gc-ok-300);  --gc-st-delivered-bg:rgba(23,101,71,.18);
    --gc-st-cancelled:#8F8A80;           --gc-st-cancelled-bg:rgba(245,244,240,.08);

    --gc-wallet-ink:var(--gc-warm-100);
    --gc-wallet-bg:rgba(200,169,106,.10);
    --gc-wallet-line:rgba(200,169,106,.32);
    --gc-wallet-positive:var(--gc-ok-300);
    --gc-wallet-low:var(--gc-warn-300);
    --gc-wallet-negative:var(--gc-bad-300);
    --gc-wallet-pending:var(--gc-cool-400);
    /* The hero band is --gc-bg-cinema, which does not flip, so the wallet states
       shown on it need light-ground values in every theme. */
    --gc-wallet-positive-on-dark:var(--gc-ok-300);
    --gc-wallet-low-on-dark:var(--gc-warn-300);
    --gc-wallet-negative-on-dark:var(--gc-bad-300);
    --gc-wallet-pending-on-dark:var(--gc-cool-300);
    --gc-wallet-topup:var(--gc-gold-400);
    --gc-wallet-topup-ink:var(--gc-navy-950);

    --gc-shadow-sm:0 1px 2px rgba(0,0,0,.5);
    --gc-shadow:0 10px 30px rgba(0,0,0,.55);
    --gc-shadow-raised:0 18px 48px rgba(0,0,0,.65);
    --gc-shadow-overlay:0 32px 80px rgba(0,0,0,.75);
    --gc-focus-ring:var(--gc-focus-ring-dark);
  }
}

/* Explicit dark choice must also beat a light OS. Same tokens, no drift. */
:root[data-theme="dark"]{
    --gc-bg-page:var(--gc-navy-950);
    --gc-bg-surface:#101215;
    --gc-bg-raised:#131A22;
    --gc-bg-sunken:#0B0D0F;
    --gc-bg-data:#131A22;
    --gc-bg-inverse:var(--gc-warm-50);
    --gc-bg-cinema:#000000;
    --gc-bg-accent-soft:rgba(200,169,106,.12);
    --gc-bg-signal-soft:rgba(42,99,138,.16);

    --gc-text:var(--gc-warm-100);
    --gc-text-strong:#FBFAF6;
    --gc-text-muted:#A7ABA6;
    --gc-text-subtle:#8F8A80;
    --gc-text-on-dark:var(--gc-warm-100);
    --gc-text-on-dark-muted:#A7ABA6;
    --gc-text-on-dark-subtle:#8F8A80;
    --gc-text-on-inverse:var(--gc-navy-800);
    --gc-text-on-inverse-muted:var(--gc-cool-500);
    --gc-text-on-gold:var(--gc-navy-950);
    --gc-text-gold:var(--gc-gold-300);
    --gc-text-gold-on-dark:var(--gc-gold-300);
    --gc-text-link:var(--gc-signal-300);
    --gc-text-link-hover:var(--gc-signal-200);

    --gc-line:rgba(245,244,240,.14);
    --gc-line-strong:rgba(245,244,240,.24);
    --gc-line-data:rgba(245,244,240,.10);
    --gc-line-on-dark:rgba(245,244,240,.16);
    --gc-line-on-inverse:rgba(14,26,43,.18);
    --gc-line-focus:var(--gc-gold-400);

    --gc-action:var(--gc-gold-400);
    --gc-action-hover:var(--gc-gold-300);
    --gc-action-active:var(--gc-gold-500);
    --gc-action-ink:var(--gc-navy-950);
    --gc-action-soft:rgba(200,169,106,.14);

    --gc-action-2:var(--gc-navy-300);
    --gc-action-2-hover:var(--gc-navy-200);
    --gc-action-2-active:var(--gc-navy-400);
    --gc-action-2-ink:var(--gc-navy-950);

    --gc-action-ghost-ink:var(--gc-warm-100);
    --gc-action-ghost-line:rgba(245,244,240,.40);
    --gc-action-disabled:rgba(245,244,240,.10);
    --gc-action-disabled-ink:#6A6C62;

    --gc-ok:var(--gc-ok-300);     --gc-ok-bg:rgba(23,101,71,.18);    --gc-ok-ink:var(--gc-ok-300);
    --gc-warn:var(--gc-warn-300); --gc-warn-bg:rgba(178,87,32,.20);  --gc-warn-ink:var(--gc-warn-300);
    --gc-bad:var(--gc-bad-300);   --gc-bad-bg:rgba(163,55,55,.20);   --gc-bad-ink:var(--gc-bad-300);
    --gc-info:var(--gc-signal-300);--gc-info-bg:rgba(42,99,138,.20); --gc-info-ink:var(--gc-signal-300);
    --gc-neutral:var(--gc-cool-400);--gc-neutral-bg:rgba(148,160,170,.14);--gc-neutral-ink:var(--gc-cool-300);

    --gc-st-draft:var(--gc-cool-400);    --gc-st-draft-bg:rgba(148,160,170,.14);
    --gc-st-quoted:var(--gc-signal-300); --gc-st-quoted-bg:rgba(42,99,138,.20);
    --gc-st-booked:var(--gc-navy-300);   --gc-st-booked-bg:rgba(84,119,160,.20);
    --gc-st-collected:var(--gc-signal-300);--gc-st-collected-bg:rgba(42,99,138,.20);
    --gc-st-transit:var(--gc-signal-200);--gc-st-transit-bg:rgba(42,99,138,.20);
    --gc-st-customs:var(--gc-warn-300);  --gc-st-customs-bg:rgba(178,87,32,.20);
    --gc-st-exception:var(--gc-bad-300); --gc-st-exception-bg:rgba(163,55,55,.20);
    --gc-st-delivered:var(--gc-ok-300);  --gc-st-delivered-bg:rgba(23,101,71,.18);
    --gc-st-cancelled:#8F8A80;           --gc-st-cancelled-bg:rgba(245,244,240,.08);

    --gc-wallet-ink:var(--gc-warm-100);
    --gc-wallet-bg:rgba(200,169,106,.10);
    --gc-wallet-line:rgba(200,169,106,.32);
    --gc-wallet-positive:var(--gc-ok-300);
    --gc-wallet-low:var(--gc-warn-300);
    --gc-wallet-negative:var(--gc-bad-300);
    --gc-wallet-pending:var(--gc-cool-400);
    /* The hero band is --gc-bg-cinema, which does not flip, so the wallet states
       shown on it need light-ground values in every theme. */
    --gc-wallet-positive-on-dark:var(--gc-ok-300);
    --gc-wallet-low-on-dark:var(--gc-warn-300);
    --gc-wallet-negative-on-dark:var(--gc-bad-300);
    --gc-wallet-pending-on-dark:var(--gc-cool-300);
    --gc-wallet-topup:var(--gc-gold-400);
    --gc-wallet-topup-ink:var(--gc-navy-950);

    --gc-shadow-sm:0 1px 2px rgba(0,0,0,.5);
    --gc-shadow:0 10px 30px rgba(0,0,0,.55);
    --gc-shadow-raised:0 18px 48px rgba(0,0,0,.65);
    --gc-shadow-overlay:0 32px 80px rgba(0,0,0,.75);
    --gc-focus-ring:var(--gc-focus-ring-dark);
  }

/* --------------------------------------------------------------------------
   4 · GEOMETRY, LAYOUT, MOTION — theme-independent
   -------------------------------------------------------------------------- */
:root{
  /* Spacing — 4px base, 8px rhythm */
  --gc-space-1:4px;   --gc-space-2:8px;   --gc-space-3:12px;  --gc-space-4:16px;
  --gc-space-5:20px;  --gc-space-6:24px;  --gc-space-8:32px;  --gc-space-10:40px;
  --gc-space-12:48px; --gc-space-16:64px; --gc-space-20:80px; --gc-space-24:96px;
  --gc-space-section:clamp(56px, 8vw, 104px);   /* legacy --ai-section-space */
  --gc-space-section-lg:clamp(72px, 10vw, 128px);

  /* Radii — 8/14/22 are the existing Aeroinis values */
  --gc-radius-xs:4px;
  --gc-radius-sm:8px;
  --gc-radius:14px;
  --gc-radius-lg:22px;
  --gc-radius-xl:32px;
  --gc-radius-pill:999px;
  --gc-radius-circle:50%;

  /* Layout */
  --gc-shell:1180px;                              /* legacy --ai-shell-width */
  --gc-shell-wide:1320px;                         /* funnel + dashboard */
  --gc-gutter:clamp(16px, 4vw, 32px);             /* legacy --ai-gutter */
  --gc-measure:66ch;
  --gc-field-height:52px;
  --gc-header-height:72px;
  --gc-header-height-sm:60px;

  /* Breakpoints — for JS and container queries; media queries inline the px */
  --gc-bp-xs:480px; --gc-bp-sm:768px; --gc-bp-md:992px; --gc-bp-lg:1200px; --gc-bp-xl:1440px;

  /* Z */
  --gc-z-base:0; --gc-z-sticky:20; --gc-z-header:100; --gc-z-drawer:200;
  --gc-z-overlay:300; --gc-z-modal:400; --gc-z-toast:500;

  /* Motion — deliberately small. Trust comes from stability. */
  --gc-ease:cubic-bezier(.2,.6,.25,1);
  --gc-ease-out:cubic-bezier(.16,1,.3,1);
  --gc-dur-fast:120ms;
  --gc-dur:200ms;
  --gc-dur-slow:320ms;
}
@media (prefers-reduced-motion: reduce){
  :root{ --gc-dur-fast:0ms; --gc-dur:0ms; --gc-dur-slow:0ms; }
}

/* --------------------------------------------------------------------------
   5 · TYPE — step 03
   Three faces, already loaded on aeroinis.com and all licensable for free:
     Newsreader      (Google Fonts)  — display serif, the brand voice
     Satoshi         (Fontshare)     — UI and body
     Cabinet Grotesk (Fontshare)     — eyebrows, labels, data
   The reference site set everything in one geometric sans. GoCargo keeps
   Aeroinis's serif/sans split instead: the serif is what makes a self-serve
   freight tool read as a broker rather than a parcel marketplace.
   -------------------------------------------------------------------------- */
:root{
  --gc-font-display:"Newsreader","Iowan Old Style",Georgia,"Times New Roman",serif;
  --gc-font-ui:"Satoshi","Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --gc-font-label:"Cabinet Grotesk","Satoshi",ui-sans-serif,system-ui,sans-serif;
  --gc-font-mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,monospace;

  /* Fluid scale. Ratios follow the reference's finding: nothing tighter than
     1.30 line-height on display, 1.55 on body. */
  --gc-t-display:clamp(40px, 6.2vw, 72px);        --gc-t-display-lh:1.04;
  --gc-t-h1:clamp(34px, 4.6vw, 54px);             --gc-t-h1-lh:1.10;
  --gc-t-h2:clamp(28px, 3.4vw, 42px);             --gc-t-h2-lh:1.16;
  --gc-t-h3:clamp(22px, 2.2vw, 30px);             --gc-t-h3-lh:1.28;
  --gc-t-h4:clamp(18px, 1.5vw, 21px);             --gc-t-h4-lh:1.36;
  --gc-t-lead:clamp(18px, 1.5vw, 21px);           --gc-t-lead-lh:1.62;
  --gc-t-body:17px;                               --gc-t-body-lh:1.62;
  --gc-t-body-sm:15px;                            --gc-t-body-sm-lh:1.58;
  --gc-t-caption:13px;                            --gc-t-caption-lh:1.45;
  --gc-t-label:11px;                              --gc-t-label-lh:1.2;
  --gc-t-price:clamp(26px, 2.6vw, 34px);          --gc-t-price-lh:1.05;

  --gc-tracking-display:-0.025em;
  --gc-tracking-h:-0.015em;
  --gc-tracking-body:0;
  --gc-tracking-label:0.14em;

  --gc-weight-display:500;   /* Newsreader looks wrong above 600 */
  --gc-weight-body:400;
  --gc-weight-medium:500;
  --gc-weight-bold:700;
  --gc-weight-label:700;
}

/* Type roles as utility classes. Components should use these, not raw sizes. */
.gc-display{
  font-family:var(--gc-font-display); font-weight:var(--gc-weight-display);
  font-size:var(--gc-t-display); line-height:var(--gc-t-display-lh);
  letter-spacing:var(--gc-tracking-display); color:var(--gc-text-strong);
  text-wrap:balance;
}
.gc-display em{ font-style:italic; } /* the Aeroinis two-line hero device */
.gc-h1{font-family:var(--gc-font-display);font-weight:var(--gc-weight-display);font-size:var(--gc-t-h1);line-height:var(--gc-t-h1-lh);letter-spacing:var(--gc-tracking-display);color:var(--gc-text-strong);text-wrap:balance}
.gc-h2{font-family:var(--gc-font-display);font-weight:var(--gc-weight-display);font-size:var(--gc-t-h2);line-height:var(--gc-t-h2-lh);letter-spacing:var(--gc-tracking-h);color:var(--gc-text-strong);text-wrap:balance}
.gc-h3{font-family:var(--gc-font-ui);font-weight:var(--gc-weight-bold);font-size:var(--gc-t-h3);line-height:var(--gc-t-h3-lh);letter-spacing:var(--gc-tracking-h);color:var(--gc-text-strong)}
.gc-h4{font-family:var(--gc-font-ui);font-weight:var(--gc-weight-bold);font-size:var(--gc-t-h4);line-height:var(--gc-t-h4-lh);color:var(--gc-text-strong)}
.gc-lead{font-family:var(--gc-font-ui);font-weight:var(--gc-weight-body);font-size:var(--gc-t-lead);line-height:var(--gc-t-lead-lh);color:var(--gc-text);max-width:var(--gc-measure)}
.gc-body{font-family:var(--gc-font-ui);font-weight:var(--gc-weight-body);font-size:var(--gc-t-body);line-height:var(--gc-t-body-lh);color:var(--gc-text);max-width:var(--gc-measure)}
.gc-body-sm{font-family:var(--gc-font-ui);font-size:var(--gc-t-body-sm);line-height:var(--gc-t-body-sm-lh);color:var(--gc-text)}
.gc-caption{font-family:var(--gc-font-ui);font-size:var(--gc-t-caption);line-height:var(--gc-t-caption-lh);color:var(--gc-text-muted)}
.gc-label{font-family:var(--gc-font-label);font-weight:var(--gc-weight-label);font-size:var(--gc-t-label);line-height:var(--gc-t-label-lh);letter-spacing:var(--gc-tracking-label);text-transform:uppercase;color:var(--gc-text-muted)}
.gc-price{font-family:var(--gc-font-ui);font-weight:var(--gc-weight-bold);font-size:var(--gc-t-price);line-height:var(--gc-t-price-lh);letter-spacing:-.02em;color:var(--gc-text-strong);font-variant-numeric:tabular-nums}
.gc-num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* --------------------------------------------------------------------------
   6 · BASE — the minimum a page needs so nothing borrows the host's theme
   -------------------------------------------------------------------------- */
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--gc-bg-page);
  color:var(--gc-text);
  font-family:var(--gc-font-ui);
  font-size:var(--gc-t-body);
  line-height:var(--gc-t-body-lh);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
:where(a){ color:var(--gc-text-link); text-decoration-thickness:1px; text-underline-offset:2px; }
:where(a):hover{ color:var(--gc-text-link-hover); }
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--gc-line-focus);
  outline-offset:2px;
  border-radius:var(--gc-radius-xs);
}
::selection{ background:var(--gc-gold-200); color:var(--gc-navy-900); }

/* --------------------------------------------------------------------------
   7 · LEGACY BRIDGE — keeps existing aeroinis.com markup working while the
   site migrates. Delete a line the day nothing references it any more.
   -------------------------------------------------------------------------- */
:root{
  --ai-ink:var(--gc-navy-800);
  --ai-navy:var(--gc-navy-500);
  --ai-navy-deep:var(--gc-navy-700);
  --ai-paper:var(--gc-bg-page);
  --ai-surface:var(--gc-bg-surface);
  --ai-surface-soft:var(--gc-bg-data);
  --ai-line:var(--gc-line-data);
  --ai-gold:var(--gc-gold-500);
  --ai-gold-soft:var(--gc-gold-200);
  --ai-muted:var(--gc-text-muted);
  --ai-success:var(--gc-ok-500);
  --ai-danger:var(--gc-bad-500);
  --ai-radius-sm:var(--gc-radius-sm);
  --ai-radius:var(--gc-radius);
  --ai-radius-lg:var(--gc-radius-lg);
  --ai-shadow:var(--gc-shadow);
  --ai-shadow-raised:var(--gc-shadow-raised);
  --ai-shell-width:var(--gc-shell);
  --ai-gutter:var(--gc-gutter);
  --ai-section-space:var(--gc-space-section);
  --ai-font-sans:var(--gc-font-ui);
  --ai-font-display:var(--gc-font-display);
  --gold-ink:var(--gc-gold-700);
  --tc-blue:var(--gc-signal-500);
  --tc-gold-text:var(--gc-gold-700);
  /* dark cargo/fleet pages */
  --black:var(--gc-navy-950);
  --black2:#101215;
  --white:var(--gc-warm-100);
  --cream:var(--gc-warm-25);
  --grey:#A7ABA6;
  --mut:#8F8A80;          /* was #77796F — raised to clear AA on the dark ground */
  --gold:var(--gc-gold-400);
  --navy:var(--gc-navy-900);
  --navy-l:#1B3050;
}

/* touch-type:start — generated by tools/touch-type.mjs, do not edit by hand */
/* iOS zooms the page when a focused control's text is under 16px and does not
   zoom back. max(16px, 1em) raises only what is below the floor: a control
   designed larger keeps its size, and nothing has to be listed by name — which
   matters, because the worst offenders inherit their size rather than being
   given one. Checkboxes and radios are left alone; they have no text. */
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea { font-size: max(16px, 1em) !important; }
}
/* touch-type:end */