/* Reddy IT — Color tokens
   Blue + White premium enterprise SaaS palette. Blue is the single brand accent,
   cyan is the secondary accent, navy ink for dark surfaces, slate neutrals. */
:root {
  /* ---- Brand blue (accent scale) ---- */
  --pink-50:  #DBEAFE;  /* primary light / accent-soft */
  --pink-100: #BFDBFE;
  --pink-200: #93C5FD;
  --pink-300: #60A5FA;
  --pink-400: #06B6D4;  /* bright accent (cyan) — used on dark surfaces */
  --pink-500: #3B82F6;
  --pink-600: #2563EB;  /* primary accent (buttons, links, key word) */
  --pink-700: #1D4ED8;  /* hover / pressed */

  /* ---- Cyan (secondary accent / gradient end) ---- */
  --violet-400: #22D3EE;
  --violet-500: #06B6D4;

  /* ---- Ink / neutrals (navy + slate) ---- */
  --ink-900: #0F172A;   /* primary text, dark surfaces */
  --ink-800: #1E293B;
  --ink-700: #334155;
  --gray-600: #64748B;  /* secondary text */
  --gray-500: #94A3B8;
  --gray-400: #CBD5E1;
  --gray-300: #CBD5E1;  /* divider / strong border */
  --gray-200: #E2E8F0;  /* borders, dividers */
  --gray-100: #F1F5F9;  /* surface secondary */
  --gray-50:  #F8FAFC;  /* page surface */
  --white:    #FFFFFF;

  /* ---- Semantic status ---- */
  --green-500: #22C55E;  /* success */
  --amber-400: #F59E0B;  /* warning / star rating */
  --red-500:   #EF4444;  /* error / urgency */

  /* ---- Brand gradient (blue → cyan) ---- */
  --gradient-ai: linear-gradient(100deg, var(--pink-600) 0%, var(--violet-500) 100%);

  /* ============ Semantic aliases ============ */
  --color-accent:        var(--pink-600);
  --color-accent-bright: var(--pink-400);
  --color-accent-hover:  var(--pink-700);
  --color-accent-soft:   var(--pink-50);

  --text-primary:   var(--ink-900);
  --text-secondary: var(--gray-600);
  --text-muted:     var(--gray-500);
  --text-on-accent: var(--white);
  --text-link:      var(--pink-600);

  --surface-page:   var(--gray-50);
  --surface-card:   var(--white);
  --surface-sunken: var(--gray-100);
  --surface-ink:    var(--ink-900);

  --border-subtle:  var(--gray-200);
  --border-strong:  var(--gray-300);

  --rating-star:    var(--amber-400);
  --savings:        var(--green-500);
  --urgency:        var(--red-500);
}