/* Sebyone — Color tokens
   Brand palette derived from the sebyone logo (petrol navy #004767 + cyan #05BAC1)
   and the DaaS-IoT coral mark (#CC0000). Neutrals are cool-tinted to sit with the
   petrol. Warm cream (#EEECE1) is the brand's paper/off-white surface. */
:root {
  /* Petrol navy — primary brand */
  --sb-navy-50: #e8f0f4;
  --sb-navy-100: #c6dae4;
  --sb-navy-200: #93b8c9;
  --sb-navy-300: #5891ac;
  --sb-navy-400: #206a89;
  --sb-navy-500: #004767; /* base — logo wordmark, headers */
  --sb-navy-600: #003a55;
  --sb-navy-700: #002c41;
  --sb-navy-800: #05242f;
  --sb-navy-900: #051c26; /* near-black petrol */

  /* Cyan — brand accent (logo mark) */
  --sb-cyan-50: #e0f7f8;
  --sb-cyan-100: #b6ecee;
  --sb-cyan-200: #7fdfe3;
  --sb-cyan-300: #40d0d6;
  --sb-cyan-400: #14c2c9;
  --sb-cyan-500: #05bac1; /* base */
  --sb-cyan-600: #049ba1;
  --sb-cyan-700: #037a7f;
  --sb-cyan-800: #045a5e;

  /* Steel / support blues (charts, secondary surfaces) */
  --sb-steel-400: #4f8ba3;
  --sb-steel-500: #31859b;
  --sb-blue-500: #395e89;

  /* Coral — DaaS-IoT mark & high-emphasis alerts */
  --sb-red-400: #e5342b;
  --sb-red-500: #cc0000;
  --sb-red-600: #990000;

  /* Semantic status */
  --sb-green-500: #4c9a2a;
  --sb-green-600: #3d7d20;
  --sb-amber-500: #eea200;
  --sb-amber-600: #c98400;

  /* Neutrals — cool gray */
  --sb-white: #ffffff;
  --sb-cream: #eeece1;   /* warm paper surface */
  --sb-gray-50: #f5f7f8;
  --sb-gray-100: #eaeef0;
  --sb-gray-200: #d6dfe3;
  --sb-gray-300: #b4c1c8;
  --sb-gray-400: #869299;
  --sb-gray-500: #5d6b73;
  --sb-gray-600: #45525a;
  --sb-gray-700: #303c43;
  --sb-gray-800: #1e282e;
  --sb-gray-900: #0f171c;

  /* ---- Semantic aliases ---- */
  --brand-primary: var(--sb-navy-500);
  --brand-primary-strong: var(--sb-navy-700);
  --brand-accent: var(--sb-cyan-500);
  --brand-accent-strong: var(--sb-cyan-600);
  --brand-danger: var(--sb-red-500);

  --color-bg: var(--sb-white);
  --color-bg-cream: var(--sb-cream);
  --surface-card: var(--sb-white);
  --surface-subtle: var(--sb-gray-50);
  --surface-sunken: var(--sb-gray-100);
  --surface-inverse: var(--sb-navy-500);
  --surface-inverse-deep: var(--sb-navy-900);

  --text-strong: var(--sb-navy-800);
  --text-body: var(--sb-gray-700);
  --text-muted: var(--sb-gray-500);
  --text-faint: var(--sb-gray-400);
  --text-inverse: var(--sb-white);
  --text-accent: var(--sb-cyan-700);
  --text-on-accent: var(--sb-navy-900);

  --border: var(--sb-gray-200);
  --border-strong: var(--sb-gray-300);
  --border-accent: var(--sb-cyan-500);

  --link: var(--sb-navy-500);
  --link-hover: var(--sb-cyan-600);

  --status-success: var(--sb-green-500);
  --status-warning: var(--sb-amber-500);
  --status-danger: var(--sb-red-500);
  --status-info: var(--sb-cyan-500);

  --focus-ring: color-mix(in srgb, var(--sb-cyan-500) 55%, transparent);
}