/* ============================================================
   REDLINES DESIGN TOKENS — Canonical shared token file
   All three Redlines products (Scan, Pro, Sales) share this file.
   Apps: @import'd in app.css — Vite inlines at build time.
   Sales: enqueued before style.css via functions.php.
   ============================================================ */

:root {

  /* ═══════════════════════════════════════════════════════════
     BRAND IDENTITY
     Change only this block to rebrand for a new product.
     Everything below derives from these values automatically.
     ═══════════════════════════════════════════════════════════ */

  /* Fonts */
  --font-base:  "Poppins", sans-serif;
  --font-heavy: "Poppins", sans-serif;

  /* Primary colour + tints */
  --brand-primary:      #01003d;
  --brand-primary-dark: #00002a;
  --brand-primary-mid:  #1a1f6e;
  --brand-primary-tint: #e8e8f5;

  /* Accent colour + tints */
  --brand-accent:       #ec5252;
  --brand-accent-mid:   #f07070;
  --brand-accent-dark:  #c73333;
  --brand-accent-light: #fdf0f0;
  --brand-accent-pale:  #ebabab;

  /* RGB unpacked — lets design system derive opacity variants.
     Must match the hex values above: primary=#01003d accent=#ec5252 */
  --brand-primary-rgb: 1, 0, 61;
  --brand-accent-rgb:  236, 82, 82;

  /* Shape — controls how rounded the UI feels */
  --card-radius:        8px;
  --border-radius-sm:   4px;
  --border-radius-md:   8px;
  --border-radius-lg:   12px;
  --border-radius-pill: 9999px;

  /* Page backgrounds — adjust if the brand uses a warm/cool tint */
  --color-bg:             #f8f8f8;
  --color-surface-raised: #f0f0f8;


  /* ═══════════════════════════════════════════════════════════
     DESIGN SYSTEM
     Shared infrastructure — do not edit per brand.
     These tokens derive from the brand block above.
     ═══════════════════════════════════════════════════════════ */

  /* ── Typography — 4-type scale ──────────────────────────────
     T1 page title   : 24px / 600
     T2 section hdr  : 18px / 600
     T3 body / value : 14px / 500
     T4 label / meta : 11px / 500 + uppercase + tracking
  ──────────────────────────────────────────────────────────── */
  --text-h1-size:   24px;
  --text-h1-weight: 600;
  --text-h2-size:   18px;
  --text-h2-weight: 600;
  --text-body-size:   14px;
  --text-body-weight: 500;
  --text-meta-size:   11px;
  --text-meta-weight: 500;

  /* ── Spacing — 8px grid ─────────────────────────────────── */
  --space-half: 4px;
  --space-1:    8px;
  --space-2:    16px;
  --space-3:    24px;
  --space-4:    32px;
  --space-6:    48px;

  /* ── Layout ─────────────────────────────────────────────── */
  --max-content-width:  1280px;
  --card-padding:       var(--space-3);
  --card-padding-dense: var(--space-2);
  --card-shadow:        var(--shadow-1);
  --card-header-gap:    var(--space-2);

  /* ── Panel height scale ─────────────────────────────────── */
  --panel-xs:  80px;
  --panel-sm:  200px;
  --panel-md:  320px;
  --panel-lg:  460px;
  --panel-xl:  600px;
  --panel-gap: var(--space-2);

  /* ── Semantic colours ───────────────────────────────────── */
  --color-surface:        #ffffff;
  --color-border:         #e5e7eb;
  --color-text-primary:   var(--brand-primary);
  --color-text-secondary: #6b7280;
  --color-text-disabled:  #9ca3af;
  --color-text-inverse:   #ffffff;
  --color-accent:         var(--brand-primary);

  /* ── Risk category tokens ───────────────────────────────────
     physical = steel blue | transitional = red | supplier = grey
     These are product data colours, not brand colours.
  ──────────────────────────────────────────────────────────── */
  --color-physical:        #0C447C;
  --color-physical-bg:     rgba(12, 68, 124, 0.10);
  --color-physical-border: rgba(12, 68, 124, 0.20);

  --color-transitional:        #e53935;
  --color-transitional-bg:     rgba(229, 57, 53, 0.10);
  --color-transitional-border: rgba(229, 57, 53, 0.20);

  --color-supplier:        #6b7280;
  --color-supplier-bg:     rgba(107, 114, 128, 0.10);
  --color-supplier-border: rgba(107, 114, 128, 0.20);

  --color-transition: var(--color-transitional);

  /* ── Risk level tokens (1–5 scale) ──────────────────────── */
  --risk-1:        #16a34a;
  --risk-1-bg:     rgba(22, 163, 74, 0.10);
  --risk-1-border: rgba(22, 163, 74, 0.20);

  --risk-2:        #65a30d;
  --risk-2-bg:     rgba(101, 163, 13, 0.10);
  --risk-2-border: rgba(101, 163, 13, 0.20);

  --risk-3:        #d97706;
  --risk-3-bg:     rgba(217, 119, 6, 0.10);
  --risk-3-border: rgba(217, 119, 6, 0.20);

  --risk-4:        #ea580c;
  --risk-4-bg:     rgba(234, 88, 12, 0.10);
  --risk-4-border: rgba(234, 88, 12, 0.20);

  --risk-5:        #dc2626;
  --risk-5-bg:     rgba(220, 38, 38, 0.10);
  --risk-5-border: rgba(220, 38, 38, 0.20);

  /* ── Grey scale ─────────────────────────────────────────── */
  --color-grey-50:  #f9fafb;
  --color-grey-100: #f3f4f6;
  --color-grey-200: #e5e7eb;
  --color-grey-300: #d1d5db;
  --color-grey-400: #9ca3af;
  --color-grey-500: #6b7280;
  --color-grey-600: #4b5563;
  --color-grey-700: #374151;

  /* ── Status colours ─────────────────────────────────────── */
  --color-status-ok:             #16a34a;
  --color-status-ok-bg:          #f0fdf4;
  --color-status-ok-border:      #bbf7d0;
  --color-status-warning:        #d97706;
  --color-status-warning-bg:     #fffbeb;
  --color-status-warning-border: #fde68a;
  --color-status-missing:        var(--brand-accent);
  --color-status-missing-bg:     var(--brand-accent-light);
  --color-status-missing-border: var(--brand-accent-pale);

  /* ── Chart palette ──────────────────────────────────────── */
  --color-chart-1: var(--brand-primary);
  --color-chart-2: var(--brand-accent);
  --color-chart-3: #2563eb;
  --color-chart-4: #d97706;
  --color-chart-5: #16a34a;
  --color-chart-6: #7c3aed;
  --color-chart-7: #0891b2;
  --color-chart-8: #db2777;

  /* ── Borders ────────────────────────────────────────────── */
  --border-subtle:  1px solid var(--color-grey-100);
  --border-default: 1px solid var(--color-grey-200);
  --border-strong:  1px solid var(--color-grey-300);

  /* ── Elevation ──────────────────────────────────────────── */
  --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-3: 0 8px 24px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);

  --card-shadow-md: var(--shadow-2);

  /* ── Focus — derived from brand primary ─────────────────── */
  --focus-ring:        0 0 0 3px rgba(var(--brand-primary-rgb), 0.25);
  --focus-ring-offset: 0 0 0 2px #ffffff, 0 0 0 4px rgba(var(--brand-primary-rgb), 0.35);

  /* ── Dark mode helpers ──────────────────────────────────── */
  --color-overlay-light: rgba(255, 255, 255, 0.08);
  --color-overlay-dark:  rgba(0, 0, 0, 0.04);
  --color-scrim:         rgba(0, 0, 0, 0.4);

  /* ── Icon scale ─────────────────────────────────────────── */
  --icon-sm:   16px;
  --icon-md:   20px;
  --icon-lg:   24px;
  --icon-xl:   32px;
  --icon-hero: 48px;


  /* ═══════════════════════════════════════════════════════════
     SALES SITE ALIASES
     --rl-* names for use in style.css. Once style.css imports
     this file these replace the inline values in its :root.
     ═══════════════════════════════════════════════════════════ */

  --rl-navy:        var(--brand-primary);
  --rl-navy-dark:   var(--brand-primary-dark);
  --rl-navy-mid:    var(--brand-primary-mid);
  --rl-navy-tint:   var(--brand-primary-tint);
  --rl-coral:       var(--brand-accent);
  --rl-coral-light: var(--brand-accent-mid);
  --rl-red:         var(--brand-accent);
  --rl-red-dark:    var(--brand-accent-dark);
  --rl-red-light:   var(--brand-accent-light);
  --rl-pink:        var(--brand-accent-pale);
  --rl-pink-bg:     rgba(235, 171, 171, 0.18);
  --rl-white:       #ffffff;

  /* Navy opacity scale — derived from brand primary */
  --rl-navy-04: rgba(var(--brand-primary-rgb), 0.04);
  --rl-navy-06: rgba(var(--brand-primary-rgb), 0.06);
  --rl-navy-07: rgba(var(--brand-primary-rgb), 0.07);
  --rl-navy-08: rgba(var(--brand-primary-rgb), 0.08);
  --rl-navy-10: rgba(var(--brand-primary-rgb), 0.10);
  --rl-navy-14: rgba(var(--brand-primary-rgb), 0.14);
  --rl-navy-18: rgba(var(--brand-primary-rgb), 0.18);
  --rl-navy-40: rgba(var(--brand-primary-rgb), 0.40);

  /* Marketing site hero height */
  --rl-hero-height: 560px;

}