/* ==========================================================================
   labelsnlanes.com - Design Tokens (CSS Custom Properties)
   Version: 3.0.0 - Last updated: 5 May 2026
   Source of truth for colour, type, spacing, motion.
   All component styles resolve to these variables. No hard-coded hex.
   ========================================================================== */

:root {
  /* ----- COLOUR — BRAND ----------------------------------------------------- */
  --ll-ink-forest:    #1e2a22;  /* Primary: headings, CTAs, dark bands, footer */
  --ll-bone:          #efeae1;  /* Primary background: warmer than ivory */
  --ll-tobacco:       #8b6b3f;  /* Accent: eyebrows, numerals, small actions */
  --ll-porcelain:     #f7f5ef;  /* Premium surface: cleaner than bone */
  --ll-blueprint:     #245a73;  /* Cool institutional counterpoint */
  --ll-cabernet:      #5e2537;  /* Editorial accent for convergence states */
  --ll-brass:         #b28a44;  /* High-value accent for rules and marks */
  --ll-copper:        #a45d3d;  /* Warm active state, never dominant */
  --ll-verdigris:     #4d7c70;  /* Subtle success / spatial accent */

  /* ----- COLOUR — NEUTRAL --------------------------------------------------- */
  --ll-graphite:      #1c1c1b;  /* Body text on bone */
  --ll-stone:         #86827a;  /* Metadata, timestamps, footer secondary */
  --ll-pale-stone:    #d8d3c7;  /* Borders, dividers, separators */
  --ll-paper:         #f5f1e6;  /* Secondary surface: card interiors */
  --ll-deep-forest:   #14180f;  /* Footer band, darker than ink-forest */

  /* ----- COLOUR — STATE ----------------------------------------------------- */
  --ll-focus-ring:    #1e2a22;
  --ll-link-hover:    #8b6b3f;
  --ll-error:         #7a2a1a;
  --ll-success:       #2e4a2a;

  /* ----- TYPOGRAPHY — FAMILIES --------------------------------------------- */
  --ll-font-serif:    "Lora", Georgia, "Times New Roman", serif;
  --ll-font-sans:     "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --ll-font-mono:     "JetBrains Mono", ui-monospace, Consolas, "Liberation Mono", monospace;

  /* ----- TYPOGRAPHY — WEIGHTS --------------------------------------------- */
  --ll-fw-regular:    400;
  --ll-fw-medium:     500;
  --ll-fw-semibold:   600;

  /* ----- TYPOGRAPHY — SCALE ------------------------------------------------- */
  --ll-fs-11: 0.6875rem;  --ll-lh-11: 1.4;
  --ll-fs-12: 0.75rem;    --ll-lh-12: 1.4;
  --ll-fs-13: 0.8125rem;  --ll-lh-13: 1.5;
  --ll-fs-14: 0.875rem;   --ll-lh-14: 1.55;
  --ll-fs-15: 0.9375rem;  --ll-lh-15: 1.6;
  --ll-fs-16: 1rem;       --ll-lh-16: 1.65;
  --ll-fs-18: 1.125rem;   --ll-lh-18: 1.55;
  --ll-fs-21: 1.3125rem;  --ll-lh-21: 1.45;
  --ll-fs-24: 1.5rem;     --ll-lh-24: 1.35;
  --ll-fs-28: 1.75rem;    --ll-lh-28: 1.28;
  --ll-fs-34: 2.125rem;   --ll-lh-34: 1.2;
  --ll-fs-42: 2.625rem;   --ll-lh-42: 1.14;
  --ll-fs-52: 3.25rem;    --ll-lh-52: 1.08;

  /* ----- SPACING — 8pt grid ------------------------------------------------- */
  --ll-space-0:  0;
  --ll-space-1:  4px;
  --ll-space-2:  8px;
  --ll-space-3:  12px;
  --ll-space-4:  16px;
  --ll-space-5:  24px;
  --ll-space-6:  32px;
  --ll-space-7:  40px;
  --ll-space-8:  48px;
  --ll-space-9:  64px;
  --ll-space-10: 80px;
  --ll-space-11: 96px;
  --ll-space-12: 128px;

  /* ----- RADIUS ------------------------------------------------------------- */
  --ll-radius-0:    0;
  --ll-radius-1:    2px;
  --ll-radius-2:    4px;
  --ll-radius-pill: 999px;

  /* ----- BORDER ------------------------------------------------------------- */
  --ll-border-hair:   1px;
  --ll-border-rule:   2px;
  --ll-border-strong: 3px;

  /* ----- ELEVATION ---------------------------------------------------------- */
  --ll-shadow-soft:   0 18px 60px rgba(20, 24, 15, 0.08);
  --ll-shadow-raised: 0 28px 80px rgba(20, 24, 15, 0.14);
  --ll-shadow-line:   inset 0 1px 0 rgba(255, 255, 255, 0.45);

  /* ----- MOTION ------------------------------------------------------------- */
  --ll-duration-fast:    150ms;
  --ll-duration-base:    200ms;
  --ll-duration-slow:    300ms;
  --ll-easing-standard:  cubic-bezier(0.2, 0, 0, 1);

  /* ----- LAYOUT ------------------------------------------------------------- */
  --ll-max-content: 760px;   /* Long-form (Perspectives) */
  --ll-max-page:    1140px;  /* Tier 1 pages */
  --ll-max-wide:    1320px;  /* Wide band (three verticals, Integrated Advisory) */

  --ll-gutter-mobile:  20px;
  --ll-gutter-tablet:  28px;
  --ll-gutter-desktop: 48px;

  /* ----- FOCUS RING — WCAG 2.1 AA ------------------------------------------ */
  --ll-focus-width:  3px;
  --ll-focus-offset: 2px;

  /* Legacy inline-block aliases retained for imported page markup. */
  --space-0:  var(--ll-space-0);
  --space-1:  var(--ll-space-1);
  --space-2:  var(--ll-space-2);
  --space-3:  var(--ll-space-3);
  --space-4:  var(--ll-space-4);
  --space-5:  var(--ll-space-5);
  --space-6:  var(--ll-space-6);
  --space-7:  var(--ll-space-7);
  --space-8:  var(--ll-space-8);
  --space-9:  var(--ll-space-9);
  --space-10: var(--ll-space-10);
  --space-11: var(--ll-space-11);
  --space-12: var(--ll-space-12);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --ll-duration-fast: 50ms;
    --ll-duration-base: 50ms;
    --ll-duration-slow: 50ms;
  }
}