/* ==========================================================================
   BLOX Commercial — Unified Design Tokens
   Single source of truth for colour and type across the whole site.
   Created 2026-05-21 · Phase 1 of the design-consistency unification.
   Reference: reports/2026-05-21-design-consistency-audit.html

   Canonical dark  = Ink #0D1320
   Sole accent     = Blox Orange #FF6700
   Light surfaces  = White #FFFFFF / Cream #FAF8F4

   Retire across the site: #000, #0A0A0F, #0D1117, #14181F, gold #F5A623.
   ========================================================================== */

:root {
  /* Brand dark */
  --blox-ink:        #0D1320;   /* every dark surface: nav, hero, footer */
  --blox-ink-soft:   #151C2A;   /* raised panels on dark */
  --blox-ink-card:   #1C2433;   /* cards on dark */

  /* Accent */
  --blox-orange:       #FF6700;
  --blox-orange-hover: #E05A00;
  --blox-accent:       var(--blox-orange);        /* semantic alias — change here only if piloting another direction */
  --blox-accent-hover: var(--blox-orange-hover);
  --blox-accent-ink:   #FFFFFF;                    /* text/icon colour that sits on the accent fill */

  /* Light surfaces */
  --blox-white: #FFFFFF;        /* primary content surface */
  --blox-cream: #FAF8F4;        /* alternating sections */

  /* Text */
  --blox-text:      #1A2030;   /* body copy on light */
  --blox-muted:      #5B6573;   /* secondary text on light */
  --blox-on-dark:    #FFFFFF;   /* body copy on dark */
  --blox-muted-dark: #C3C4C8;   /* secondary text on dark */
  --blox-faint-dark: #9A9CA2;   /* tertiary text on dark */

  /* Lines */
  --blox-line:      #E8E4DC;
  --blox-line-dark: rgba(255,255,255,0.10);

  /* Type (already consistent sitewide) */
  --blox-font-display: 'Barlow Condensed', -apple-system, BlinkMacSystemFont, sans-serif;
  --blox-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Motion + geometry */
  --blox-ease:   cubic-bezier(0.22, 1, 0.36, 1);
  --blox-radius: 8px;
  --blox-max:    1280px;

  /* ------------------------------------------------------------------
     Legacy aliases. The bespoke page templates declare their own :root
     using these short names. As each page is migrated and its local
     :root is removed, it will fall back to these canonical values
     instead of its old one-off colour. Pages that still declare a local
     :root keep overriding these until migrated (no visual change today).
     ------------------------------------------------------------------ */
  --brand: var(--blox-orange);
  --ink:   var(--blox-ink);
  --cream: var(--blox-cream);
  --line:  var(--blox-line);
}

/* Optional utilities for migrated pages (no effect until used) */
.blox-bg-ink   { background: var(--blox-ink);   color: var(--blox-on-dark); }
.blox-bg-white { background: var(--blox-white); color: var(--blox-text); }
.blox-bg-cream { background: var(--blox-cream); color: var(--blox-text); }
.blox-accent   { color: var(--blox-orange); }

.blox-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--blox-font-display); font-weight: 700;
  font-size: 0.875rem; letter-spacing: 0.01em; text-decoration: none;
  border: none; cursor: pointer; border-radius: 2px; padding: 12px 24px;
  transition: background 0.2s, transform 0.2s; line-height: 1;
}
.blox-btn-primary { background: var(--blox-orange); color: #fff; }
.blox-btn-primary:hover { background: var(--blox-orange-hover); transform: translateY(-1px); }