/* ============================================================
   WinLocalbiz PR — Color tokens
   Brand palette: deep indigo + electric blue, Puerto-Rico-flag
   accents (red / blue / white), warm cream surfaces, and a
   supporting set of cyan / green / amber / yellow signals
   (the report-card grade system).
   ============================================================ */
:root {
  /* ---- Brand: indigo (primary "ink" of the wordmark) ---- */
  --indigo-900: #0C1066;   /* darkest — deep headings on cream */
  --indigo-800: #11167C;
  --indigo-700: #161C8E;   /* core brand navy — wordmark */
  --indigo-600: #232ABE;
  --indigo-500: #2E2EF0;   /* electric royal blue — primary action */
  --indigo-400: #5658F6;
  --indigo-300: #8A8CF9;
  --indigo-200: #C2C3FB;
  --indigo-100: #E6E7FE;
  --indigo-50:  #F1F2FF;

  /* ---- Brand: electric blue (the "PR", CTAs, links) ---- */
  --blue-700: #1B22C2;
  --blue-600: #2727E6;
  --blue-500: #2E2EF0;     /* = action blue */
  --blue-400: #4D6BFF;     /* lighter UI blue (dashboard accents) */
  --blue-300: #8FA6FF;
  --blue-100: #E3E8FF;

  /* ---- Brand: violet (PR-gradient tail) ---- */
  --violet-600: #6A2BE0;
  --violet-500: #7E3AF0;
  --violet-300: #B89CF7;

  /* ---- Puerto Rico flag accents ---- */
  --pr-red: #EE1C25;       /* flag / energy red */
  --pr-red-dark: #C8121B;
  --pr-blue: #1414E6;      /* flag triangle blue */
  --pr-white: #FFFFFF;

  /* ---- Cyan (decorative swirls, AI sparkle) ---- */
  --cyan-500: #18C2D8;
  --cyan-400: #3DD3E6;
  --cyan-100: #D6F5FA;

  /* ---- Semantic signal / report-card grades ---- */
  --green-600: #15924A;
  --green-500: #1BB35C;    /* grade A/B, success, growth arrow */
  --green-100: #DCF6E6;
  --amber-500: #F5A623;    /* grade C, warning, score ring */
  --amber-100: #FDEFD2;
  --red-500:   #E5342E;    /* grade F, error (UI red, warmer than flag) */
  --red-100:   #FBE0DE;
  --yellow-400: #FFD23F;   /* highlight / stars */

  /* ---- Warm neutrals (cream surfaces + slate text) ---- */
  --cream-50:  #FBF9F4;    /* lightest panel on cream */
  --cream-100: #F4F0E7;    /* page background — signature warm cream */
  --cream-200: #ECE6D8;    /* subtle section band on cream */
  --cream-300: #E0D8C6;    /* hairline on cream */

  --slate-900: #11151F;    /* near-black text */
  --slate-700: #2A3140;    /* body text */
  --slate-600: #424B5C;    /* body text, slightly softer */
  --slate-500: #5B6478;    /* muted / secondary text */
  --slate-400: #8A92A3;    /* placeholder, captions */
  --slate-300: #C3C9D4;    /* borders on white */
  --slate-200: #E2E6EC;    /* dividers, input borders */
  --slate-100: #F1F3F7;    /* app surface tint */
  --white: #FFFFFF;
  --black: #000000;

  /* ============================================================
     SEMANTIC ALIASES — reach for these in components
     ============================================================ */
  /* Text */
  --text-strong:   var(--indigo-700);   /* headings on light */
  --text-body:     var(--slate-700);
  --text-muted:    var(--slate-500);
  --text-on-brand: var(--white);
  --text-link:     var(--blue-500);

  /* Surfaces */
  --surface-page:    var(--cream-100);   /* default brand page bg */
  --surface-page-alt:var(--white);       /* clean white sections */
  --surface-card:    var(--white);
  --surface-raised:  var(--cream-50);
  --surface-app:     var(--slate-100);   /* SaaS dashboard chrome */
  --surface-ink:     var(--indigo-900);  /* dark footer / hero */

  /* Brand fills */
  --brand-primary:   var(--indigo-700);  /* primary brand color */
  --brand-action:    var(--blue-500);    /* buttons, links, focus */
  --brand-action-hover: var(--blue-700);
  --brand-accent:    var(--cyan-500);
  --brand-gradient:  linear-gradient(100deg, var(--blue-500) 0%, var(--violet-500) 100%);
  --brand-gradient-route: linear-gradient(90deg, var(--pr-red) 0%, var(--violet-500) 50%, var(--blue-400) 100%);

  /* Lines & focus */
  --border-subtle:  var(--slate-200);
  --border-default: var(--slate-300);
  --border-strong:  var(--indigo-700);
  --focus-ring:     0 0 0 3px var(--indigo-200);

  /* Status */
  --success: var(--green-500);
  --warning: var(--amber-500);
  --danger:  var(--red-500);
  --info:    var(--blue-400);
}