/* ============================================================
   BELVYON PORTFOLIO DESIGN SYSTEM — tokens.css
   Extracted from belvyon_old/css (style.css, skin/skin-1.css,
   responsive.css) and generalized for the 13-domain portfolio.
   Single source of truth for color, type, space, motion.
   Every site (belpico.com first) imports this unchanged and
   overrides only its brand hook + division accents.
   ============================================================ */

:root {
  /* ---- Core brand palette — Belpico Brand Strategy (Navy + Cream +
          Teal/Cyan + Copper Bronze). Red / bright-orange / vivid-purple are
          deliberately excluded per the brand guidelines. ---- */
  --color-primary:    #1f9fb8; /* quantum cyan/teal — digital accent (on dark) */
  --color-primary-600:#177f93;
  --color-secondary:  #0d1b2a; /* deep navy ink (headings) */
  --color-trust:      #14273f; /* deep navy — umbrella / corporate anchor */
  --color-success:    #2f9e7a; /* forest-green (energy / positive) */
  --color-bronze:     #bd7b3c; /* copper bronze — physical / kinetic accent */
  --color-light:      #f6f2e8; /* warm cream — institutional canvas */
  --color-ink:        #14202e;
  --color-muted:      #5c6675;
  --color-line:       #e4ded1; /* line on cream */

  /* primary alpha ramp (cyan) */
  --primary-a10: rgba(31,159,184,0.10);
  --primary-a20: rgba(31,159,184,0.20);
  --primary-a40: rgba(31,159,184,0.38);
  --primary-a70: rgba(31,159,184,0.68);

  /* ---- Dark surfaces (deep-navy scale) ---- */
  --bg-dark:   #0b1a2b;
  --bg-dark-2: #10233a;
  --bg-dark-3: #16304d;

  /* ---- Gradients ---- */
  --gradient-primary: linear-gradient(135deg, #1f9fb8 0%, #177f93 100%);
  --gradient-dark:    linear-gradient(135deg, #0b1a2b 0%, #10233a 55%, #16304d 100%);
  --gradient-accent:  linear-gradient(90deg, #1f9fb8 0%, #bd7b3c 100%);

  /* ---- FOUR DIVISION ACCENTS — brand-aligned (no red / orange / purple).
          Physical divisions = warm (bronze/green); digital = cool (cyan/azure). ---- */
  --div-defence: #bd7b3c; /* copper bronze — armour / kinetic protection */
  --div-energy:  #2f9e7a; /* forest green  — clean power / hydrogen       */
  --div-ai:      #1f9fb8; /* quantum cyan  — neuromorphic edge AI         */
  --div-space:   #4d86c4; /* steel azure   — space systems               */
  --div-defence-ink:#7a4d1c; --div-energy-ink:#155741;
  --div-ai-ink:#12586a;     --div-space-ink:#1f4a78;

  /* Active-division hook — components read --accent; a division
     section/page sets --accent to one of the four above. */
  --accent: var(--color-primary);
  --accent-ink: var(--div-ai-ink);

  /* ---- Brand hook — each domain overrides only this ---- */
  --brand: var(--color-trust); /* belpico = umbrella navy */

  /* ---- Typography — IBM Plex Sans (body) + IBM Plex Sans Condensed
          (display/headers): institutional, technical, per brand strategy. ---- */
  --font-display: "IBM Plex Sans Condensed", "IBM Plex Sans", system-ui, sans-serif;
  --font-body:    "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;

  /* modular type scale (1.250) */
  --fs-xs:.75rem; --fs-sm:.875rem; --fs-base:1rem; --fs-md:1.125rem;
  --fs-lg:1.375rem; --fs-xl:1.75rem; --fs-2xl:2.25rem; --fs-3xl:3rem;
  --fs-4xl:clamp(2.5rem,5vw,4.5rem);
  --lh-tight:1.15; --lh-snug:1.3; --lh-normal:1.6;

  /* ---- Spacing scale (8pt) ---- */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem;
  --sp-6:2rem; --sp-7:3rem; --sp-8:4rem; --sp-9:6rem; --sp-10:8rem;
  --container:1280px; --container-wide:1600px; --gutter:clamp(1rem,4vw,2.5rem);

  /* ---- Radii / shadows / motion ---- */
  --radius-sm:6px; --radius:12px; --radius-lg:20px; --radius-pill:999px;
  --shadow-1:0 2px 8px rgba(10,15,26,.08);
  --shadow-2:0 8px 30px rgba(10,15,26,.14);
  --shadow-accent:0 10px 40px var(--primary-a40);
  --ease:cubic-bezier(.22,.61,.36,1); --dur:.4s; --dur-fast:.2s;

  /* ---- Breakpoints (documented; used via media queries) ----
     mobile ≤480 · sm 591 · md 767 · lg 991 · xl 1200 · wide ≥1600 */
  --bp-sm:591px; --bp-md:767px; --bp-lg:991px; --bp-xl:1200px; --bp-wide:1600px;

  --z-header:1000; --z-overlay:1100; --z-modal:1200;
}

/* Division accent theming — set on a wrapper: <section data-division="energy"> */
[data-division="defence"]{ --accent:var(--div-defence); --accent-ink:var(--div-defence-ink); }
[data-division="energy"] { --accent:var(--div-energy);  --accent-ink:var(--div-energy-ink); }
[data-division="ai"]     { --accent:var(--div-ai);      --accent-ink:var(--div-ai-ink); }
[data-division="space"]  { --accent:var(--div-space);   --accent-ink:var(--div-space-ink); }

/* RTL is driven by [dir="rtl"] — components use logical properties. */