/* ─────────────────────────────────────────────────────────────
   CloudSuite — Color tokens
   Values transcribed verbatim from the Figma "Colours & Shadows" /
   "Color Styles" style-guide frames. Do not round.
   ───────────────────────────────────────────────────────────── */

:root {
  /* ---- Brand ---- */
  --cs-brand-primary: #37ae83;      /* green — primary bg, text on dark */
  --cs-brand-secondary: #0d2f66;    /* navy — selected UI, icons */
  --cs-brand-tertiary: #1c5f71;     /* teal */

  /* ---- Actions ---- */
  --cs-action-primary: #ef7733;     /* orange — primary CTA / warning */
  --cs-action-secondary: #0d2f66;   /* navy — secondary CTA */
  --cs-action-secondary-opacity: #e8eaef;
  --cs-action-link: #37ae83;        /* green — text links */

  /* ---- Neutral ---- */
  --cs-neutral-1: #999999;          /* descriptions, captions */
  --cs-neutral-2: #bebfc2;          /* placeholder */
  --cs-neutral-3: #9b9b9b;          /* borders, disabled bg, dividers */

  /* ---- Text ---- */
  --cs-text-heading: #333333;
  --cs-text-body: #4a4a4a;
  --cs-text-muted: #999999;
  --cs-text-placeholder: #bebfc2;
  --cs-text-white: #ffffff;
  --cs-text-navy: #153062;          /* style-guide titles / dark headings */

  /* ---- Backgrounds ---- */
  --cs-bg-1: #ffffff;               /* primary */
  --cs-bg-2: #fafafa;               /* secondary */
  --cs-bg-3: #eeeeef;               /* tertiary */
  --cs-bg-4: #0d2f66;               /* quaternary / footer */
  --cs-bg-5: #1c5f71;
  --cs-bg-6: #37ae83;

  /* ---- Functional ---- */
  --cs-info: #4096ef;
  --cs-info-bg: #ecf5fe;
  --cs-success: #37ae83;
  --cs-success-bg: #ebf7f3;
  --cs-warning: #ef7733;
  --cs-warning-bg: #fef2eb;
  --cs-error: #c81a47;
  --cs-error-bg: #fae9ed;

  /* ---- Hover / interaction ---- */
  --cs-hover-secondary: #132b58;    /* navy hover */
  --cs-hover-default: #fafafa;      /* neutral hover surface */
  --cs-hover-link: #32926f;         /* link hover */
  --cs-hover-primary: #d76b2e;      /* orange CTA hover */

  /* ---- Borders / dividers ---- */
  --cs-border: #e6e6e6;
  --cs-border-light: #eaeaea;
  --cs-border-lighter: #f2f2f2;
  --cs-divider: #f6f6f6;

  /* ---- Semantic aliases ---- */
  --surface: var(--cs-bg-1);
  --surface-alt: var(--cs-bg-2);
  --surface-dark: var(--cs-bg-4);
  --text: var(--cs-text-body);
  --text-strong: var(--cs-text-heading);
  --link: var(--cs-action-link);
  --focus-ring: rgba(64, 150, 239, 0.35);
}