/* Filsa — Color tokens (dark-first, AI gradient brand)
 * The brand is the gradient speech-bubble: green -> cyan -> blue -> violet -> purple,
 * shown on near-black. Surfaces are dark; the gradient is the signature accent.
 */

:root {
  /* ============ Brand gradient stops (sampled from the mark) ============ */
  --c-green:  #7CEA8A;
  --c-mint:   #6FE0A8;
  --c-cyan:   #5FD3D6;
  --c-blue:   #77B2EE;
  --c-violet: #A98EF9;
  --c-purple: #B983FD;

  /* Signature gradient — top-right green to bottom-left purple, like the logo */
  --gradient-brand: linear-gradient(217deg, #7CEA8A 0%, #6FD9B0 24%, #77B2EE 54%, #A98EF9 80%, #B983FD 100%); /* @kind color */
  --gradient-brand-soft: linear-gradient(217deg, rgba(124,234,138,0.18), rgba(119,178,238,0.18) 54%, rgba(185,131,253,0.18)); /* @kind color */
  --gradient-text: linear-gradient(110deg, #8DEDA0 0%, #77B2EE 50%, #C29CFA 100%); /* @kind color */

  /* ============ Neutrals (dark) ============ */
  --n-0:  #0A0A0C;   /* app background */
  --n-1:  #141417;   /* card */
  --n-2:  #1C1C21;   /* raised card */
  --n-3:  #26262C;   /* input / control */
  --n-4:  #34343C;   /* track / hairline-strong */
  --n-5:  #4A4A53;
  --n-6:  #8C8C94;   /* muted text — C8: was #76767F, which failed WCAG AA */
  --n-7:  #ADADB6;   /* secondary text */
  --n-8:  #D6D6DA;
  --n-9:  #F3F2EE;   /* primary text / off-white (matches wordmark) */
  --white: #FFFFFF;
  --black: #0A0A0C;

  /* ============ Accent (solid) — periwinkle blend of blue+violet ============ */
  --accent-strong: #A2AEF7;
  --accent:        #8E9DF4;
  --accent-deep:   #6E7CE8;
  --accent-fg:     #AEB8F8;   /* bright accent text on dark */

  /* ============ Finance semantics (bright-on-dark) ============ */
  --positive: #4ED99A;
  --negative: #F87171;
  --pending:  #F2B33C;
  --info:     #77B2EE;

  /* ============ Semantic aliases ============ */
  /* Surfaces */
  --bg-app:          var(--n-0);
  --surface-card:    var(--n-1);
  --surface-raised:  var(--n-2);
  --surface-sunken:  #0F0F12;
  --surface-inverse: var(--n-9);   /* rare LIGHT surface (e.g. highlight chip/card) */

  /* Text */
  --text-primary:   var(--n-9);
  --text-secondary: var(--n-7);
  --text-muted:     var(--n-6);
  --text-faint:     var(--n-5);
  --text-inverse:   var(--n-0);    /* text on a light surface */
  --text-on-accent: #0B0B12;       /* dark text on bright accent/gradient */

  /* Borders */
  --border-subtle: rgba(255,255,255,0.07);
  --border-strong: rgba(255,255,255,0.13);
  --border-focus:  var(--accent);

  /* Accent roles */
  --accent-hover:    var(--accent-strong);
  --accent-tint:     rgba(142,157,244,0.16);
  --accent-contrast: var(--text-on-accent);

  /* Financial roles + tints */
  --positive-tint: rgba(78,217,154,0.15);
  --negative-tint: rgba(248,113,113,0.15);
  --pending-tint:  rgba(242,179,60,0.15);
  --info-tint:     rgba(119,178,238,0.15);

  /* Focus ring */
  --ring: 0 0 0 3px rgba(142,157,244,0.32);

  /* ===== Legacy ramp names, remapped to dark-appropriate values =====
     (so existing components keep rendering correctly on dark) */
  --green-700: #5FE0A0;  --green-500: #4ED99A;  --green-300: #8DEDA0;  --green-100: rgba(78,217,154,0.15);
  --coral-600: #FF8E8E;  --coral-500: #F87171;  --coral-100: rgba(248,113,113,0.15);
  --amber-600: #F5C46A;  --amber-500: #F2B33C;  --amber-100: rgba(242,179,60,0.15);
  --blue-600:  #9CC6F5;  --blue-500:  #77B2EE;  --blue-100:  rgba(119,178,238,0.15);
  --ink-900: #0A0A0C;  --ink-800: #141417;  --ink-700: #26262C;  --ink-600: #76767F;
  --ink-500: #76767F;  --ink-400: #54545C;  --ink-300: #34343C;
  --paper-50: #1C1C21; --paper-100: #141417; --paper-200: #1C1C21; --paper-300: rgba(255,255,255,0.07);
  --paper-400: #34343C;
}