/* ============================================================
   Collins Web Design — Color tokens
   Indigo primary, navy ink, soft surfaces, mint + lavender accents.
   Values extracted from the Figma source.
   ============================================================ */
:root {
  /* ---- Brand primary (indigo) ---- */
  --indigo-50:  #EEF0FF;
  --indigo-100: #E3E5EF;
  --indigo-200: #C9C5F4;   /* lavender accent / gradient start */
  --indigo-300: #6477F0;
  --indigo-400: #5267E8;   /* PRIMARY brand color */
  --indigo-500: #4659D8;
  --indigo-600: #3F52CD;
  --indigo-700: #3448C5;

  /* ---- Ink / neutrals ---- */
  --ink-900: #20243A;      /* primary text + dark CTA */
  --ink-800: #2A2E44;
  --ink-700: #3A3E54;
  --slate-500: #73788E;    /* muted body / secondary text */
  --slate-400: #A8ACBA;
  --line-200: #E3E5EF;     /* borders / hairlines */
  --line-100: #EEF0F7;

  /* ---- Surfaces ---- */
  --white:       #FFFFFF;
  --surface-page: #F7F8FC; /* page background */
  --surface-sunken: #F0F2F8; /* alternating section background */
  --surface-indigo: #EEF0FF; /* tinted indigo panel */
  --surface-mint:   #EEF7F3; /* tinted mint panel */

  /* ---- Accents ---- */
  --mint-300:    #A8DCC8;  /* mint accent (underline, highlights) */
  --lavender-200:#C9C5F4;  /* lavender accent */

  /* ---- Semantic aliases ---- */
  --brand:           var(--indigo-400);
  --brand-hover:     var(--indigo-500);
  --brand-active:    var(--indigo-600);
  --brand-subtle:    var(--surface-indigo);

  --text-strong:     var(--ink-900);
  --text-body:       var(--slate-500);
  --text-muted:      var(--slate-400);
  --text-on-brand:   var(--white);
  --text-accent:     var(--brand);

  --bg-page:         var(--surface-page);
  --bg-section:      var(--surface-sunken);
  --surface-card:    var(--white);

  --border-default:  var(--line-200);
  --border-subtle:   var(--line-100);

  /* CTA / inverse */
  --cta-dark:        var(--ink-900);
  --cta-dark-hover:  #2A2F4C;

  /* Brand gradient (used on CTA banners) */
  --gradient-brand:  linear-gradient(104deg, var(--lavender-200) 0%, var(--brand) 100%);
}