/* Synergy88 palette: light theme with a navy anchor */
/* Primitives double as a Tailwind v4 @theme block (--color-{name}-{step}). */

:root {
  /* Navy (brand anchor, from the logo wordmark and ribbon shadows) */
  --color-navy-50: #EEF2F9;
  --color-navy-100: #DCE4F2;
  --color-navy-200: #B9C8E2;
  --color-navy-300: #98A9C9;
  --color-navy-400: #778BB0;
  --color-navy-500: #586E98;
  --color-navy-600: #3B5280;
  --color-navy-700: #1F3768;
  --color-navy-800: #172B54;
  --color-navy-900: #0E1A33;
  --color-navy-950: #080F20;

  /* Blue (logo blue ribbon) */
  --color-blue-50: #EAF1FA;
  --color-blue-100: #DCEBFA;
  --color-blue-200: #BBD6F3;
  --color-blue-300: #8DBBEB;
  --color-blue-400: #6DA3DF;
  --color-blue-500: #4D8BD3;
  --color-blue-600: #2B72C6;
  --color-blue-700: #1B5EAC;
  --color-blue-800: #174A8A;
  --color-blue-900: #133866;
  --color-blue-950: #0C2442;

  /* Red (logo red ribbon, use sparingly) */
  --color-red-50: #FDF3F3;
  --color-red-100: #FBE4E4;
  --color-red-200: #F7CFD1;
  --color-red-300: #F4A3A6;
  --color-red-400: #E68383;
  --color-red-500: #D76161;
  --color-red-600: #C73B3E;
  --color-red-700: #B8313A;
  --color-red-800: #972023;
  --color-red-900: #701719;
  --color-red-950: #4A0F10;

  /* Slate (cool neutrals for text, borders, surfaces) */
  --color-slate-50: #F5F7FB;
  --color-slate-100: #EBEFF5;
  --color-slate-200: #DDE3EC;
  --color-slate-300: #B3BCCA;
  --color-slate-400: #8B96AA;
  --color-slate-500: #65728A;
  --color-slate-600: #4A5873;
  --color-slate-700: #384560;
  --color-slate-800: #262F45;
  --color-slate-900: #1A2236;
  --color-slate-950: #0F1524;

  /* White */
  --color-white: #FFFFFF;

  /* Roles: use these in components, not the primitives */
  /* Surfaces */
  --color-bg: var(--color-white);
  --color-bg-subtle: var(--color-slate-50);
  --color-bg-tint: var(--color-blue-50);
  --color-bg-inverse: var(--color-navy-700);
  --color-bg-inverse-deep: var(--color-navy-900);

  /* Text */
  --color-text: var(--color-slate-900);
  --color-text-heading: var(--color-navy-700);
  --color-text-secondary: var(--color-slate-600);
  --color-text-muted: var(--color-slate-500);
  --color-text-inverse: var(--color-white);
  --color-text-inverse-link: var(--color-blue-300);
  --color-text-inverse-muted: var(--color-slate-300);

  /* Borders */
  --color-border: var(--color-slate-200);
  --color-border-strong: var(--color-slate-300);

  /* Links and interactive */
  --color-link: var(--color-blue-700);
  --color-link-hover: var(--color-navy-700);
  --color-interactive: var(--color-blue-600);
  --color-focus-ring: var(--color-blue-600);

  /* Primary button: navy fill, white text */
  --color-primary: var(--color-navy-700);
  --color-primary-hover: var(--color-navy-800);
  --color-primary-active: var(--color-navy-900);
  --color-on-primary: var(--color-white);

  /* Secondary button: outline, blue-700 text */
  --color-secondary: var(--color-blue-700);
  --color-secondary-hover-bg: var(--color-blue-50);

  /* Accent: one standout action or small details */
  --color-accent: var(--color-red-600);
  --color-accent-hover: var(--color-red-700);
  --color-accent-text: var(--color-red-700);
  --color-accent-tint: var(--color-red-100);
  --color-on-accent: var(--color-white);

  /* Status (success and warning are not in the logo, added for UI feedback) */
  --color-info-text: var(--color-blue-700);
  --color-info-bg: var(--color-blue-50);
  --color-danger-text: var(--color-red-700);
  --color-danger-bg: var(--color-red-100);
  --color-success-text: #17694A;
  --color-success-bg: #E6F5EE;
  --color-warning-text: #8A5A00;
  --color-warning-bg: #FFF3D6;
}