/* ============================================================
   PLUTUS — COLOR TOKENS
   Base palette + semantic aliases + dark-mode scope.
   Source: Plutus Brand Guidelines (Together).pdf
   ============================================================ */

:root {
  /* ---- CORE (use ~80% of the time) ---- */
  --plutus-ocean:    #3103EB; /* hero brand — buttons, cards, logo bg */
  --plutus-sky:      #C6F8FF; /* logo on ocean, accents, light text on dark */
  --plutus-white:    #FFFFFF;
  --plutus-midnight: #01114A; /* dark backgrounds, text on light */
  --plutus-black:    #070B19; /* deepest dark — investor deck slides */

  /* ---- SECONDARY (variety / accents) ---- */
  --plutus-aero:   #33FFCE; /* positive / "up" / growth */
  --plutus-rose:   #FF2566; /* negative / "down" / alerts */
  --plutus-lemon:  #E3FF74; /* highlight callouts */
  --plutus-indigo: #490067; /* secondary dark sections, design pillars */
  --plutus-forest: #156700; /* real / grounded / sustainability */

  /* ---- HIGHLIGHT TINTS (pastel backgrounds) ---- */
  --plutus-ice:    #C8FFEE; /* light aero tint */
  --plutus-icing:  #F9D5FF; /* light rose tint */
  --plutus-meadow: #D3FFC4; /* light forest tint */

  /* ---- PREMIUM / DECK ---- */
  --plutus-gold:   #F5DB67; /* premium accent, "breakthrough" moments, deck hero */

  /* ---- OCEAN RAMP (derived, for surfaces & states) ---- */
  --ocean-700: #2402B0; /* pressed */
  --ocean-600: #2A03CC; /* hover */
  --ocean-500: #3103EB; /* base */
  --ocean-100: #E2DBFD; /* tint surface */

  /* ---- NEUTRAL GREY RAMP (light UI) ---- */
  --grey-900: #070B19;
  --grey-800: #1C1C2E; /* dark-mode card (dm.grey50) */
  --grey-700: #2E2E42;
  --grey-500: #6B6B82;
  --grey-400: #9A9AAE;
  --grey-300: #C9C9D6;
  --grey-200: #E6E6EE;
  --grey-100: #F3F3F8;
  --grey-50:  #FAFAFD;

  /* ============================================================
     SEMANTIC ALIASES — reference these in product UI
     ============================================================ */

  /* Brand */
  --color-brand:         var(--plutus-ocean);
  --color-brand-hover:   var(--ocean-600);
  --color-brand-press:   var(--ocean-700);
  --color-brand-accent:  var(--plutus-sky);
  --color-premium:       var(--plutus-gold);

  /* Surfaces (light theme default) */
  --surface-page:    var(--plutus-white);
  --surface-card:    var(--plutus-white);
  --surface-sunken:  var(--grey-100);
  --surface-brand:   var(--plutus-ocean);
  --surface-inverse: var(--plutus-midnight);

  /* Text */
  --text-body:       var(--plutus-midnight);
  --text-muted:      var(--grey-500);
  --text-on-brand:   var(--plutus-sky);
  --text-on-dark:    var(--plutus-white);
  --text-link:       var(--plutus-ocean);

  /* Status */
  --color-positive:  var(--plutus-aero);
  --color-negative:  var(--plutus-rose);
  --color-warning:   var(--plutus-lemon);
  --color-info:      var(--plutus-ocean);

  /* Status text (legible on light) */
  --color-positive-ink: var(--plutus-forest);
  --color-negative-ink: var(--plutus-rose);

  /* Borders */
  --border-subtle:   var(--grey-200);
  --border-strong:   var(--grey-300);
  --border-brand:    var(--plutus-ocean);

  /* Focus */
  --focus-ring: 0 0 0 3px rgba(49, 3, 235, 0.35);
}

/* ============================================================
   DARK THEME — apply on .theme-dark or [data-theme="dark"]
   Matches the Plutus app dark mode + investor-deck surfaces.
   ============================================================ */
.theme-dark,
[data-theme="dark"] {
  --surface-page:    var(--plutus-black);
  --surface-card:    var(--grey-800);
  --surface-sunken:  #111111;
  --surface-brand:   var(--plutus-ocean);
  --surface-inverse: var(--plutus-white);

  --text-body:       var(--plutus-white);
  --text-muted:      rgba(255, 255, 255, 0.6);
  --text-on-brand:   var(--plutus-sky);
  --text-link:       var(--plutus-sky);

  --border-subtle:   rgba(255, 255, 255, 0.10);
  --border-strong:   rgba(255, 255, 255, 0.22);
  --border-premium:  rgba(245, 219, 103, 0.25); /* gold card border */

  --color-positive-ink: var(--plutus-aero);

  --focus-ring: 0 0 0 3px rgba(198, 248, 255, 0.45);
}