/* ============================================================
   S4SF — Color tokens
   Sampled directly from the S4SF logo artwork.
   ============================================================ */
:root {
  /* --- Brand core --------------------------------------------------- */
  --s4sf-blue: #1c24c4;          /* primary royal blue — wordmark, backgrounds, primary UI */
  --s4sf-teal: #3eddce;          /* bright aqua — accent, gradient start, "on-dark" mark */
  --s4sf-green: #019246;         /* emerald — sustainability accent, gradient end */

  /* Blue ramp (tints/shades of the primary) */
  --blue-900: #0e1173;
  --blue-800: #14198f;
  --blue-700: #1c24c4;           /* = --s4sf-blue */
  --blue-600: #2f37d6;
  --blue-500: #4b53e6;
  --blue-300: #9aa0f2;
  --blue-100: #dfe1fb;
  --blue-50:  #eef0fe;

  /* Teal ramp */
  --teal-700: #17a99a;
  --teal-500: #3eddce;           /* = --s4sf-teal */
  --teal-300: #86ecdf;
  --teal-100: #d3f8f2;

  /* Green ramp */
  --green-700: #016c34;
  --green-500: #019246;          /* = --s4sf-green */
  --green-300: #56c187;
  --green-100: #d3f0e0;

  /* --- Youth (Y@S4SF) warm accent -----------------------------------
     The Youth sub-brand carries a warm "rose/flame" gradient inside
     the atom mark. Use ONLY for Y@S4SF youth-program contexts.        */
  --youth-gold: #e0b400;
  --youth-orange: #e8601c;
  --youth-red: #e33d17;

  /* --- Neutrals (cool-tinted toward the brand blue) ----------------- */
  --neutral-0:  #ffffff;
  --neutral-25: #f7f8fc;
  --neutral-50: #eef0f6;
  --neutral-100:#e2e5ef;
  --neutral-200:#c9cede;
  --neutral-300:#a7adc4;
  --neutral-400:#79809b;
  --neutral-500:#5b6178;
  --neutral-600:#454a5e;
  --neutral-700:#323647;
  --neutral-800:#20232f;
  --neutral-900:#111320;

  /* --- Signature gradients ------------------------------------------ */
  /* The mark gradient: blue → teal → green (top-left to bottom-right) */
  --gradient-brand: linear-gradient(135deg, var(--s4sf-blue) 0%, var(--s4sf-teal) 55%, var(--s4sf-green) 100%);
  --gradient-brand-soft: linear-gradient(135deg, #2f37d6 0%, #3eddce 60%, #16b56a 100%); /* @kind other */
  --gradient-youth: linear-gradient(135deg, var(--youth-gold) 0%, var(--youth-orange) 55%, var(--youth-red) 100%);

  /* --- Semantic aliases --------------------------------------------- */
  --surface-page: var(--neutral-0);
  --surface-subtle: var(--neutral-25);
  --surface-card: var(--neutral-0);
  --surface-inverse: var(--s4sf-blue);      /* brand-blue "on-dark" panels */
  --surface-inverse-2: var(--blue-900);

  --text-strong: var(--neutral-900);
  --text-body: var(--neutral-700);
  --text-muted: var(--neutral-500);
  --text-on-inverse: var(--neutral-0);
  --text-on-inverse-muted: #b9bdf0;
  --text-brand: var(--s4sf-blue);
  --text-link: var(--s4sf-blue);

  --border-subtle: var(--neutral-100);
  --border-default: var(--neutral-200);
  --border-strong: var(--neutral-300);
  --border-brand: var(--s4sf-blue);

  --accent: var(--s4sf-blue);
  --accent-hover: var(--blue-800);
  --accent-active: var(--blue-900);

  /* status */
  --success: var(--s4sf-green);
  --info: var(--s4sf-teal);
  --warning: var(--youth-orange);
  --danger: var(--youth-red);
}