/* ==========================================================================
   Pure Trucking — brand tokens
   Direction: Deep Water — navy ground, cyan accent, red for action.

   Every colour, font and radius the site uses is declared here. Nothing else
   hardcodes a brand colour, so this file re-skins the whole site on its own.

   Two accent roles, deliberately separate:
     --accent  cyan. Eyebrows, icons, links, active states, the road stripe.
               Used often, never for the thing you most want clicked.
     --cta     red. Primary buttons only. Scarce on purpose — the moment red
               appears on three things at once it stops meaning "click this".
   ========================================================================== */

:root {
  /* --- core palette --- */
  --ink-900:     #04172B;   /* deepest navy — header, hero, footer            */
  --ink-800:     #0A2540;   /* raised navy — panels sitting on ink-900        */
  --ink-700:     #123458;   /* navy used in gradients                         */
  --ink-500:     #47607A;   /* steel — hover borders, muted marks on light    */

  --accent:      #0FA9E6;   /* cyan                                           */
  --accent-hover:#0C8EC2;
  --accent-soft: #E4F4FC;   /* cyan tint for chips, checked states            */
  --accent-deep: #0971CE;   /* mid blue, for gradients and hover on tint      */

  /* Bright cyan is only 2.7:1 on white — fine as a graphic, illegible as
     small text. Anything cyan-coloured that carries meaning on a light
     background uses this darker blue instead (5.8:1). */
  --accent-on-light: #0A66B8;

  --cta:         #D42B1F;   /* red — primary buttons                          */
  --cta-hover:   #B21F15;
  --on-cta:      #FFFFFF;

  --highlight:   #F2B705;   /* amber — eyebrows on dark, warning notices      */

  --surface-1:   #F5F8FB;   /* page alt background                            */
  --surface-2:   #E4EDF5;   /* tinted panel                                   */

  /* --- semantic --- */
  --bg:             #FFFFFF;
  --bg-alt:         var(--surface-1);
  --bg-inverse:     var(--ink-900);
  --surface:        #FFFFFF;
  --border:         #DDE5EE;
  --border-strong:  #C2CEDC;

  --text:           #0B1B2B;
  --text-muted:     #5A6B7D;
  --text-faint:     #667585;
  --text-inverse:   #FFFFFF;
  --text-inverse-muted: #9FB3C8;

  --on-accent:      #04172B;   /* cyan is light — dark text sits on it        */

  /* Amber, because it has to stay visible on navy, on cyan, on red and on
     white. A blue focus ring would vanish against half this palette. */
  --focus:          #FFB020;

  --danger:         #C0342B;
  --danger-soft:    #FBEAE8;
  --success:        #1E7A4C;
  --success-soft:   #E6F4EC;

  /* --- type --- */
  --font-display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-body:    "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display-transform: uppercase;
  --display-tracking: .005em;
  --display-weight: 700;

  /* --- shape --- */
  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* --- elevation --- */
  --shadow-sm: 0 1px 2px rgba(4,23,43,.06);
  --shadow:    0 4px 16px rgba(4,23,43,.10);
  --shadow-lg: 0 18px 48px rgba(4,23,43,.18);

  /* --- rhythm --- */
  --gutter: clamp(20px, 5vw, 48px);
  --section-y: clamp(56px, 8vw, 104px);
  --maxw: 1200px;
  --maxw-prose: 68ch;
}

/* --------------------------------------------------------------------------
   Previous direction — Roadline Heritage (charcoal + safety orange).
   To go back, paste this over the :root block above and swap
   site/assets/img/logo-mark*.svg for the concept-b-icon* files in brand/logos/.

     --ink-900:#17181A; --ink-800:#212327; --ink-700:#2B2D31; --ink-500:#3E4247;
     --accent:#F26522; --accent-hover:#D8551A; --accent-soft:#FDEAE0;
     --accent-deep:#D8551A;
     --cta:#F26522; --cta-hover:#D8551A; --on-cta:#FFFFFF;
     --highlight:#FDBA3B; --surface-1:#F6F5F2; --surface-2:#E7E4DE;
     --border:#E2DFD8; --border-strong:#CFCAC0;
     --text:#17181A; --on-accent:#FFFFFF; --focus:#1D7FD9;

   The two other original directions are documented in brand/brand-board.html.
   -------------------------------------------------------------------------- */