/* OpexIQ Design System — Colour tokens
   Source: Claude Design project "OpexIQ Landing Page Design".
   Re-sync instructions: _1-Inputs/design-system/README.md */
:root{
  /* ---- Brand primaries ---- */
  --opex-red:#D02C30;
  --opex-blue-grey:#768693;
  --opex-grey:#918F8F;

  /* ---- Neutral ramp ---- */
  --black:#000000;
  --carbon:#1A1A1A;
  --graphite:#333333;
  --steel:#666666;
  --mid-grey:#B3B3B3;
  --light-grey:#E6E6E6;
  --soft-white:#F5F5F5;
  --white:#FFFFFF;

  /* ---- Red tints / shades ---- */
  --red-900:#8A1E27;
  --red-800:#B71C22;
  --red-600:#D02C30;
  --red-400:#E3575A;
  --red-200:#F2B4B6;
  --red-150:#F7C5C6;
  --red-50:#FDEAEB;

  /* ---- Blue grey tints / shades ---- */
  --bg-grey-900:#43515E;
  --bg-grey-800:#475866;
  --bg-grey-700:#5A6875;
  --bg-grey-600:#768693;
  --bg-grey-400:#9BA7B3;
  --bg-grey-200:#CDD5DD;
  --bg-grey-50:#EEF2F5;

  /* ---- Semantic: status ---- */
  --success:#2E9E5E;
  --success-fill:#E6F7EE;
  --success-text:#1A6B40;
  --warning:#E8922A;
  --warning-fill:#FDF2E3;
  --warning-text:#9E5C0F;
  --critical:#D02C30;
  --critical-fill:#FDEAEB;
  --critical-text:#8A1E27;
  --info:#768693;
  --info-fill:#EEF2F5;
  --info-text:#475866;

  /* ---- Semantic aliases: LIGHT surfaces (default) ---- */
  --surface-page:#F5F5F5;
  --surface-raised:#FFFFFF;
  --surface-sunken:#E6E6E6;
  --surface-card:#FFFFFF;
  --surface-inverse:#0A0A0A;

  --text-heading:#1A1A1A;
  --text-body:#333333;
  --text-muted:#666666;
  --text-subtle:#918F8F;
  --text-accent:#D02C30;
  --text-structural:#768693;
  --text-on-accent:#FFFFFF;
  --text-on-dark:#FFFFFF;

  --border-subtle:#E6E6E6;
  --border-default:#CDD5DD;
  --border-strong:#768693;
  --border-focus:#D02C30;

  --action-primary-bg:#D02C30;
  --action-primary-bg-hover:#B71C22;
  --action-primary-bg-active:#8A1E27;
  --action-primary-fg:#FFFFFF;
  --action-secondary-fg:#1A1A1A;
  --action-secondary-border:#768693;
  --action-secondary-bg-hover:#EEF2F5;
  --action-disabled-bg:#E6E6E6;
  --action-disabled-fg:#918F8F;

  --focus-ring:#D02C30;
  --focus-ring-offset:#FFFFFF;

  /* ---- Chart sequence (flat, in order) ---- */
  --chart-1:#333333;
  --chart-2:#768693;
  --chart-3:#D02C30;
  --chart-4:#918F8F;
  --chart-5:#CDD5DD;
  --chart-grid:#E6E6E6;

  /* ---- Graphic-language colours ---- */
  --path-primary:#D02C30;
  --path-secondary:#FFFFFF;
  --path-structural:#768693;
  --path-neutral:#333333;
  --node-primary:#D02C30;
  --node-secondary:#768693;
  --node-neutral:#918F8F;
  --pattern-opacity:0.06;
}

/* ---- Dark surface scope: apply .opex-dark to any dark section ---- */
.opex-dark{
  --surface-page:#000000;
  --surface-raised:#1A1A1A;
  --surface-sunken:#000000;
  --surface-card:#141414;
  --surface-inverse:#F5F5F5;

  --text-heading:#FFFFFF;
  --text-body:#E6E6E6;
  --text-muted:#B3B3B3;
  --text-subtle:#918F8F;
  --text-accent:#E3575A;
  --text-structural:#9BA7B3;
  --text-on-dark:#FFFFFF;

  --border-subtle:#262626;
  --border-default:#333333;
  --border-strong:#5A6875;

  --action-secondary-fg:#FFFFFF;
  --action-secondary-border:#5A6875;
  --action-secondary-bg-hover:rgba(255,255,255,0.06);
  --action-disabled-bg:#262626;
  --action-disabled-fg:#666666;

  --focus-ring:#E3575A;
  --focus-ring-offset:#000000;

  --chart-1:#E6E6E6;
  --chart-2:#9BA7B3;
  --chart-3:#D02C30;
  --chart-4:#666666;
  --chart-5:#43515E;
  --chart-grid:#262626;

  --path-neutral:#B3B3B3;
  --pattern-opacity:0.08;
}