/* Loophole Labs — color tokens
   Sourced from the brand Figma: Colours/LHL-BRAND-COLOURS-PMS,
   Brand/LHL-SPEC (#7444FF // #0C081E // #FFFFFF), Graphics-Diagrams. */

:root {
  /* ── Base palette ─────────────────────────────────────────── */

  /* Purple — Loophole Labs primary. PMS 2665. */
  --lhl-purple: #7F57F5;            /* rgb(127,87,245) — brand colour (PMS 2665) */
  --lhl-purple-logo: #7444FF;       /* rgb(116,68,255) — logo braces / spec sheets */
  --lhl-purple-75: rgba(127, 87, 245, 0.75);  /* PMS 2725 equivalent */

  /* Orange — Architect primary. PMS 165. */
  --arch-orange: #D94A22;           /* rgb(217,74,34) */
  --arch-orange-75: rgba(217, 74, 34, 0.75);  /* PMS 1665 equivalent */

  /* Lavender — tints of purple used for lines, rules, secondary text. */
  --lavender: #D0C5FF;              /* rgb(208,197,255) */
  --lavender-bright: #E1DAFF;       /* rgb(225,218,255) */
  --lavender-pale: #EFECFF;         /* rgb(239,236,255) */

  /* Background blacks — deep desaturated purples, never pure black. */
  --bg-deep: #0B0818;               /* rgb(11,8,24) — darkest */
  --bg-ink: #0C081E;                /* rgb(12,8,30) — spec-sheet background */
  --bg-night: #0F0926;              /* rgb(15,9,38) — primary brand background (PMS 2745) */
  --bg-night-2: #0F0925;            /* rgb(15,9,37) — diagram slides */
  --bg-raised: #140C32;             /* rgb(20,12,50) — raised surfaces / gradient base */
  --bg-raised-2: #231650;           /* rgb(35,22,80) — gradient top */
  --bg-panel: #25185C;              /* rgb(37,24,92) — brightest panel purple */

  /* Light-mode neutrals (print / light backgrounds). */
  --paper: #F1F1F1;                 /* rgb(241,241,241) */
  --paper-dim: #E7E7E7;             /* rgb(231,231,231) — light icon background */
  --ink: #181818;                   /* rgb(24,24,24) — near-black text on light */

  --white: #FFFFFF;
  --pink: #FF54D0;                  /* rgb(255,84,208) — rare accent */
  --blue: #1A7FEA;                  /* rgb(26,127,234) — rare accent */

  /* ── Alpha ramps (lavender + white over dark) ─────────────── */
  --lavender-a50: rgba(208, 197, 255, 0.5);
  --lavender-a40: rgba(208, 197, 255, 0.4);
  --lavender-a25: rgba(208, 197, 255, 0.25);
  --lavender-a20: rgba(208, 197, 255, 0.2);
  --white-a50: rgba(255, 255, 255, 0.5);   /* ≈ PMS Cool Grey 5 in print */
  --white-a25: rgba(255, 255, 255, 0.25);  /* ≈ PMS Cool Grey 10 in print */

  /* ── Semantic aliases ─────────────────────────────────────── */
  --surface-page: var(--bg-night);          /* default brand background */
  --surface-spec: var(--bg-ink);            /* spec sheets / documents */
  --surface-card: var(--bg-raised);
  --gradient-raised: linear-gradient(0deg, #140C32 6.72%, #231650 95.8%); /* @kind color */

  --text-primary: var(--white);
  --text-secondary: var(--lavender);
  --text-muted: var(--lavender-a40);
  --text-faint: var(--white-a25);

  --border-strong: var(--lavender-a50);     /* diagram boxes (2px) */
  --border-default: var(--lavender-a25);    /* dividers, frames */
  --border-faint: var(--lavender-a20);

  --accent-brand: var(--lhl-purple);
  --accent-logo: var(--lhl-purple-logo);
  --accent-product: var(--arch-orange);     /* Architect / diagram arrows */
}