/* Fraga DEV — Color tokens
   ------------------------------------------------------------------
   The brand is built on a four-part "pinwheel" mark: purple, green,
   blue and orange arrows converging on a center. Each color carries a
   light→deep gradient. Ink is a near-black indigo (#1E123D) sampled
   from the wordmark. Neutrals are cooled slightly toward that indigo. */

:root {
  /* ---- Brand pinwheel ---- */
  --purple-100: #ecebfa;
  --purple-300: #b6acf5;
  --purple-400: #9b8cf1;   /* gradient light stop */
  --purple-500: #6b62c6;   /* core */
  --purple-600: #5655ae;   /* gradient deep stop */
  --purple-700: #443f8c;

  --green-100: #e7f3ea;
  --green-300: #9bd2ab;
  --green-400: #7ac892;    /* gradient light stop */
  --green-500: #5f9f76;    /* core */
  --green-600: #4e8c69;    /* gradient deep stop */
  --green-700: #3c6e52;

  --blue-100: #e4f1f5;
  --blue-300: #8ecadd;
  --blue-400: #60afc8;     /* gradient light stop */
  --blue-500: #4795b0;     /* core */
  --blue-600: #3e8da6;     /* gradient deep stop */
  --blue-700: #316f84;

  --orange-100: #fbeedd;
  --orange-300: #f6c793;
  --orange-400: #f4b673;   /* gradient light stop */
  --orange-500: #e09a4e;   /* core */
  --orange-600: #d8862f;   /* gradient deep stop */
  --orange-700: #ad6a25;

  /* ---- Ink & neutrals (indigo-cooled slate) ---- */
  --ink-900: #1e123d;      /* brand near-black, wordmark color */
  --ink-800: #2c2150;
  --ink-700: #443a63;
  --slate-600: #5c5473;
  --slate-500: #7b7491;
  --slate-400: #a29bb3;
  --slate-300: #c9c4d4;
  --slate-200: #e4e1ea;
  --slate-100: #f1eff5;
  --slate-50:  #f8f7fb;
  --white: #ffffff;

  /* ---- Semantic status ---- */
  --success: var(--green-500);
  --success-bg: var(--green-100);
  --info: var(--blue-500);
  --info-bg: var(--blue-100);
  --warning: var(--orange-500);
  --warning-bg: var(--orange-100);
  --danger: #c0453f;
  --danger-bg: #f8e3e1;

  /* ---- Semantic surface / text aliases ---- */
  --bg-app: var(--slate-50);
  --surface-card: var(--white);
  --surface-sunken: var(--slate-100);
  --surface-inverse: var(--ink-900);

  --text-strong: var(--ink-900);
  --text-body: var(--ink-800);
  --text-muted: var(--slate-500);
  --text-on-brand: #ffffff;
  --text-on-inverse: #ffffff;

  --border-subtle: var(--slate-200);
  --border-default: var(--slate-300);
  --border-strong: var(--slate-400);

  --brand-primary: var(--purple-500);
  --brand-primary-hover: var(--purple-600);
  --focus-ring: var(--purple-400);

  /* ---- Signature gradients ---- */
  --grad-purple: linear-gradient(150deg, var(--purple-400), var(--purple-600));
  --grad-green:  linear-gradient(150deg, var(--green-400), var(--green-600));
  --grad-blue:   linear-gradient(150deg, var(--blue-400), var(--blue-600));
  --grad-orange: linear-gradient(150deg, var(--orange-400), var(--orange-600));
  /* full-spectrum brand sweep, mirrors the pinwheel order */
  --grad-brand:  linear-gradient(120deg, var(--purple-500) 0%, var(--blue-500) 38%, var(--green-500) 70%, var(--orange-500) 100%);
}