/* ===========================================================================
   Composio — Color tokens
   A single deep-electric-blue voltage on a near-black canvas.
   Depth comes from brightness-step surfaces, never drop shadows.
   =========================================================================== */

:root {
  /* --- Brand / Accent ---------------------------------------------------- */
  --color-primary: #0007cd;          /* Composio Blue — every primary CTA, wordmark, spotlight center */
  --color-primary-active: #0005a3;   /* press state */
  --color-primary-glow: #1a26ff;     /* brighter blue, used only inside radial atmospheric glows */
  --color-accent-cyan: #00d4ff;      /* illustrative only — data-flow viz */
  --color-accent-violet: #7b3aed;    /* illustrative only — product illustrations */

  /* --- Surface (brightness ladder) -------------------------------------- */
  --color-canvas: #0f0f0f;           /* page floor — near-black */
  --color-canvas-deep: #000000;      /* pure black — terminal/code surfaces only */
  --color-surface-card: #181818;     /* default content card */
  --color-surface-card-elevated: #222222; /* terminal panes, secondary buttons */
  --color-surface-strong: #2a2a2a;   /* dropdown menus, strong fills */

  /* --- Hairlines --------------------------------------------------------- */
  --color-hairline: #222222;         /* default 1px divider */
  --color-hairline-soft: #1a1a1a;    /* lighter divider */
  --color-hairline-strong: #333333;  /* stronger panel outline */

  /* --- Text -------------------------------------------------------------- */
  --color-ink: #ffffff;              /* display headlines */
  --color-body: #a8a8a8;             /* default running text — soft gray */
  --color-body-strong: #ffffff;      /* emphasis / same as ink */
  --color-muted: #888888;            /* sub-titles, breadcrumbs */
  --color-muted-soft: #666666;       /* disabled text */
  --color-on-primary: #ffffff;       /* text on blue CTAs */
  --color-on-dark: #ffffff;

  /* --- Semantic ---------------------------------------------------------- */
  --color-success: #33d17a;          /* "online" / "active" */
  --color-error: #ff4d4d;            /* validation errors */

  /* =========================================================================
     Semantic aliases — prefer these in components & layouts
     ========================================================================= */

  /* Text roles */
  --text-display: var(--color-ink);
  --text-body: var(--color-body);
  --text-strong: var(--color-body-strong);
  --text-muted: var(--color-muted);
  --text-disabled: var(--color-muted-soft);
  --text-on-primary: var(--color-on-primary);

  /* Surface roles */
  --surface-canvas: var(--color-canvas);
  --surface-deep: var(--color-canvas-deep);
  --surface-card: var(--color-surface-card);
  --surface-elevated: var(--color-surface-card-elevated);
  --surface-strong: var(--color-surface-strong);

  /* Border roles */
  --border-default: var(--color-hairline);
  --border-soft: var(--color-hairline-soft);
  --border-strong: var(--color-hairline-strong);

  /* Interactive */
  --action-primary: var(--color-primary);
  --action-primary-active: var(--color-primary-active);
}