/* ============================================================
   FILUM — COLOR TOKENS
   Brand palette (from "Paleta de Cores FILUM" + official deck):
   ink #200249 · purple #5C12A7 · violet #7164A5 · cloud #F4F4F9 · red #E40101
   ============================================================ */

:root {
  /* ---- Brand core ---- */
  --filum-ink: #200249;        /* deep indigo-purple — primary brand ink, dark surfaces */
  --filum-purple: #5C12A7;     /* primary purple — headings, key accents */
  --filum-violet: #7164A5;     /* muted violet — secondary / supporting */
  --filum-red: #e40101;        /* signature red — the "f" mark, CTAs, emphasis */
  --filum-red-bright: #ff3132; /* brighter red used on dark backgrounds & charts */
  --filum-cloud: #f4f4f9;      /* off-white — default page surface */

  /* ---- Purple scale (tints/shades of the brand purple) ---- */
  --purple-950: #1a0240;
  --purple-900: #200249;
  --purple-800: #2d0a6b;
  --purple-700: #45109a;       /* deep accent */
  --purple-600: #5c12a7;       /* = primary purple */
  --purple-500: #7330c2;
  --purple-400: #9460d6;
  --purple-300: #b48fe6;
  --purple-200: #c8b2e7;       /* lavender — chart fills, soft chips */
  --purple-100: #e3d6f4;
  --purple-50:  #f2ecfb;

  /* ---- Red scale ---- */
  --red-700: #b00101;
  --red-600: #e40101;          /* = brand red */
  --red-500: #ff3132;
  --red-400: #ff6262;
  --red-200: #ffc4c4;
  --red-50:  #fff0f0;

  /* ---- Neutrals (cool, faintly violet-tinted greys) ---- */
  --neutral-0:   #ffffff;
  --neutral-50:  #f4f4f9;      /* cloud */
  --neutral-100: #ebebf2;
  --neutral-200: #dcdce6;
  --neutral-300: #c3c3d2;
  --neutral-400: #9a9ab0;
  --neutral-500: #6f6f88;
  --neutral-600: #4f4f66;
  --neutral-700: #3a3a4d;
  --neutral-800: #26263a;
  --neutral-900: #16162a;
  --black: #000000;

  /* ---- Semantic (status) ---- */
  --success: #1f9d57;
  --warning: #e8a307;
  --danger:  #e40101;
  --info:    #5c12a7;

  /* ============================================================
     SEMANTIC ALIASES — reference these in components/layouts
     ============================================================ */

  /* Text */
  --text-strong: var(--filum-ink);      /* headings, primary text on light */
  --text-body: var(--neutral-700);      /* body copy on light */
  --text-muted: var(--neutral-500);     /* captions, secondary */
  --text-on-dark: #ffffff;              /* text on ink/purple surfaces */
  --text-on-dark-muted: #c8c2dd;        /* muted text on dark */
  --text-accent: var(--filum-purple);   /* links, accents */
  --text-brand: var(--filum-red);       /* red emphasis */

  /* Surfaces */
  --surface-page: var(--filum-cloud);   /* default page background */
  --surface-card: #ffffff;              /* cards on light */
  --surface-sunken: var(--neutral-100); /* inset panels */
  --surface-dark: var(--filum-ink);     /* hero / dark sections */
  --surface-purple: var(--filum-purple);/* purple feature blocks */

  /* Borders & lines */
  --border-subtle: var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-strong: var(--filum-ink);
  --border-on-dark: rgba(255,255,255,0.16);

  /* Interactive */
  --accent: var(--filum-red);           /* primary action color */
  --accent-hover: var(--red-700);
  --accent-contrast: #ffffff;
  --focus-ring: var(--filum-purple);
}