/* ============================================================
   QUBE · Colour tokens
   Pair every light with its matching dark nuance.
   Never mix two brights. Prioritise legibility.
   ============================================================ */
:root {
  /* ---- Brand neutrals ---- */
  --qube-black: #0A0909;       /* near-black, brand "Black" */
  --qube-off-white: #FBF4EF;   /* warm paper "Off-White" */

  /* ---- Lights (the four brand brights) ---- */
  --qube-blue: #8FBBC7;
  --qube-orange: #EBAD81;
  --qube-green: #B2D9A5;
  --qube-pink: #F7ACC0;

  /* ---- Darks (paired nuances) ---- */
  --qube-deep-blue: #13212F;   /* pairs with Qube Blue */
  --qube-deep-brown: #36221A;  /* pairs with Qube Orange */
  --qube-deep-green: #19261C;  /* pairs with Qube Green */
  --qube-deep-plum: #2E1C23;   /* pairs with Qube Pink */

  /* ---- Off-white tint steps (warm paper scale) ---- */
  --paper-0: #FFFFFF;
  --paper-1: #FBF4EF;          /* off-white */
  --paper-2: #F3E9E1;
  --paper-3: #E7DACE;
  --paper-4: #D8C7B8;

  /* ---- Ink scale (text on light) ---- */
  --ink-0: #0A0909;
  --ink-1: #2A2422;
  --ink-2: #4A4340;
  --ink-3: #756C67;
  --ink-4: #A89E97;

  /* =========================================================
     Semantic aliases — default theme is DARK (warm near-black)
     Matches theqube.com: black-forward, off-white type, brand
     brights as sparing accents. Deep-Blue is available via
     [data-surface="blue"] for the "studio sanctuary" mode.
     ========================================================= */
  --bg: var(--qube-black);
  --bg-elevated: #15110F;
  --surface: #1A1512;
  --surface-2: #241D18;
  --border: rgba(251, 244, 239, 0.12);
  --border-strong: rgba(251, 244, 239, 0.22);

  --text: var(--qube-off-white);
  --text-muted: rgba(251, 244, 239, 0.64);
  --text-faint: rgba(251, 244, 239, 0.40);
  --text-on-accent: var(--qube-black);

  --accent: var(--qube-blue);
  --accent-soft: rgba(143, 187, 199, 0.14);
  --accent-deep: var(--qube-deep-blue);

  /* Off-white = the primary CTA colour on dark (website pills) */
  --cta: var(--qube-off-white);
  --cta-text: var(--qube-black);

  /* Focus ring */
  --ring: rgba(251, 244, 239, 0.55);

  /* Functional (kept muted to respect palette) */
  --positive: #B2D9A5;
  --warning: #EBAD81;
  --info: #8FBBC7;
}

/* ---- Deep-Blue "studio" surface (brand sample-usage mode) ---- */
[data-surface="blue"] {
  --bg: var(--qube-deep-blue);
  --bg-elevated: #1A2C3C;
  --surface: #1E3140;
  --surface-2: #24394A;
  --text-on-accent: var(--qube-deep-blue);
}

/* ---- Light theme scope (Off-White paper) ---- */
[data-theme="light"] {
  --bg: var(--qube-off-white);
  --bg-elevated: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #F3E9E1;
  --border: rgba(10, 9, 9, 0.10);
  --border-strong: rgba(10, 9, 9, 0.20);

  --text: var(--qube-black);
  --text-muted: rgba(10, 9, 9, 0.62);
  --text-faint: rgba(10, 9, 9, 0.38);
  --cta: var(--qube-black);
  --cta-text: var(--qube-off-white);
  --text-on-accent: var(--qube-deep-blue);

  --accent: var(--qube-deep-blue);
  --accent-soft: rgba(19, 33, 47, 0.08);
  --accent-deep: var(--qube-deep-blue);
  --ring: rgba(19, 33, 47, 0.40);
}

/* ---- Paired colourway scopes ----
   Apply to any block to switch the bright/dark nuance pairing. */
[data-pair="blue"]   { --accent: var(--qube-blue);   --accent-deep: var(--qube-deep-blue);  --pair-bg: var(--qube-deep-blue);  --pair-bright: var(--qube-blue); }
[data-pair="orange"] { --accent: var(--qube-orange); --accent-deep: var(--qube-deep-brown); --pair-bg: var(--qube-deep-brown); --pair-bright: var(--qube-orange); }
[data-pair="green"]  { --accent: var(--qube-green);  --accent-deep: var(--qube-deep-green); --pair-bg: var(--qube-deep-green); --pair-bright: var(--qube-green); }
[data-pair="pink"]   { --accent: var(--qube-pink);   --accent-deep: var(--qube-deep-plum); --pair-bg: var(--qube-deep-plum); --pair-bright: var(--qube-pink); }