/* ============================================================
   COLORS — Pirone Entertainment
   Brand color from pironedjs.com: indigo #4C6AEF.
   A clean, sleek black + blue system — high energy, professional.
   Base scales first, then semantic aliases.
   ============================================================ */
:root {
  /* --- Indigo (primary brand + CTA) — from the site theme color --- */
  --indigo-700: #2C3CAE;   /* active */
  --indigo-600: #3A4DD6;   /* hover */
  --indigo-500: #4C6AEF;   /* PRIMARY brand / CTA */
  --indigo-400: #6E86F4;
  --indigo-300: #A3B2F8;   /* accent on dark */
  --indigo-200: #C8D1FB;
  --indigo-100: #E8ECFE;

  /* --- Azure (secondary energy accent — brighter, lighter blue) --- */
  --azure-600: #1E74D0;
  --azure-500: #2E8BE6;
  --azure-400: #5CA8F0;
  --azure-300: #9BC8F7;    /* light accent on dark */
  --azure-100: #DEEEFC;

  /* --- Navy / near-black (the grounded dark base, like the logo) --- */
  --navy-950: #070910;
  --navy-900: #0C1019;
  --navy-800: #121826;     /* primary dark surface */
  --navy-700: #1C2436;
  --navy-600: #29344A;
  --navy-400: #7A88A4;     /* muted text on dark */
  --navy-200: #C0C9DA;

  /* --- Ink (text on light) --- */
  --ink-900: #0E1116;
  --ink-800: #1A1F29;
  --ink-700: #333B49;

  /* --- Paper (clean cool-neutral light surfaces) --- */
  --paper-0:   #FFFFFF;
  --paper-50:  #F4F6FB;    /* page canvas */
  --paper-100: #E9EDF6;    /* subtle fill / hover */
  --paper-200: #D8DFEC;    /* hairline on light */

  /* --- Slate / fog (neutral grays) --- */
  --fog-400:   #BEC7D8;    /* muted line / disabled */
  --slate-500: #6A7488;    /* subtle text */
  --slate-600: #4D586B;    /* secondary text */

  /* --- Pure --- */
  --white: #FFFFFF;
  --black: #000000;

  /* ============================================================
     SEMANTIC ALIASES
     ============================================================ */
  /* Surfaces */
  --surface-page:      var(--paper-50);
  --surface-card:      var(--paper-0);
  --surface-raised:    var(--white);
  --surface-sunken:    var(--paper-100);
  --surface-inverse:   var(--navy-800);   /* dark sections */
  --surface-inverse-2: var(--navy-900);
  --surface-accent:    var(--indigo-500);

  /* Text on light */
  --text-heading:   var(--ink-900);
  --text-body:      var(--ink-800);
  --text-muted:     var(--slate-600);
  --text-subtle:    var(--slate-500);
  --text-on-accent: var(--white);

  /* Text on dark (navy) */
  --text-heading-inv: var(--paper-50);
  --text-body-inv:    #C4CCDA;
  --text-muted-inv:   var(--navy-400);

  /* Brand roles */
  --brand-base:      var(--navy-800);    /* the grounded black-blue */
  --brand-accent:    var(--indigo-500);  /* primary blue */
  --brand-secondary: var(--azure-500);   /* secondary energy accent */
  --brand-blue:      var(--indigo-500);  /* the logo blue, normalized */

  /* Lines / borders */
  --border-hairline: var(--paper-200);
  --border-strong:   var(--fog-400);
  --border-on-dark:  rgba(255,255,255,0.14);
  --border-accent:   var(--indigo-400);

  /* Interactive */
  --cta-bg:        var(--indigo-500);
  --cta-bg-hover:  var(--indigo-600);
  --cta-bg-active: var(--indigo-700);
  --cta-text:      var(--white);

  /* Stars / rating */
  --star: var(--indigo-500);

  /* Focus */
  --focus-ring: var(--indigo-500);
}