/* ============================================================
   BRIX Presentation — Color tokens
   Extracted from the Figma Style Guide (Colors frame).
   ============================================================ */

:root {
  /* — Brand / Primary — */
  --brix-purple: #4a3aff;          /* Primary Purple — the brand accent */
  --brix-purple-rgb: 74, 58, 255;  /* @kind other */

  /* — Purple shade ramp — */
  --purple-800: #0b0086;
  --purple-700: #0f00b3;
  --purple-600: #3b2beb;
  --purple-500: #766aff;
  --purple-400: #a9a2ff;
  --purple-300: #c8c3ff;
  --purple-200: #e1deff;
  --purple-100: #f0eeff;

  /* — Neutrals — */
  --headings-black: #0d0a2c;       /* Display & heading ink */
  --headings-navy: #1e1b39;        /* Slightly softer heading ink (most used) */
  --text-gray: #615e83;            /* Body / paragraph text */
  --color-600: #807e9a;            /* Muted / caption */
  --color-500: #e5e5ef;            /* Hairline / disabled fill */
  --color-400: #f2f1ff;            /* Lavender surface tint */
  --color-300: #f7f7fb;            /* Page off-white */
  --color-200: #f8f8ff;           /* Card tint / subtle stroke */
  --white: #ffffff;

  /* — Lines & strokes — */
  --divider: #d6dbe5;
  --stroke-soft: #dedee9;
  --stroke-card: #ebeff6;

  /* — Gradients — */
  --gradient-purple: linear-gradient(135deg, #4a3aff 0%, #6d3aff 100%);   /* @kind color */
  --gradient-purple-v: linear-gradient(180deg, #4a3aff 0%, #6d3aff 100%); /* @kind color */

  /* ============================================================
     Semantic aliases — prefer these in components
     ============================================================ */
  --accent: var(--brix-purple);
  --accent-hover: var(--purple-600);
  --accent-press: var(--purple-700);
  --accent-soft: var(--purple-100);

  --text-heading: var(--headings-navy);
  --text-heading-strong: var(--headings-black);
  --text-body: var(--text-gray);
  --text-muted: var(--color-600);
  --text-on-accent: var(--white);

  --surface-page: var(--white);
  --surface-page-alt: var(--color-300);
  --surface-card: var(--white);
  --surface-tint: var(--color-400);
  --surface-accent: var(--brix-purple);

  --border-default: var(--divider);
  --border-soft: var(--stroke-soft);
  --border-card: var(--stroke-card);
}