/* ==========================================================================
   CIP — Color tokens
   Deep indigo foundation · single warm gold accent · warm off-white surfaces
   60 / 30 / 10 — neutral+tertiary / indigo / gold
   ========================================================================== */

:root {
  /* --- Primary · indigo family (structure & surfaces) --- */
  --indigo-deep: #1D1A4E;   /* footers, hero backdrops, deepest gradient stop */
  --indigo-core: #232458;   /* ★ brand · buttons, headers, key surfaces */
  --indigo-mid:  #2E2D5E;   /* cards, hover states, mid gradient stop */
  --indigo-soft: #444571;   /* borders, dividers, subtle elements */

  /* --- Secondary · gold accent (10% max, never a background) --- */
  --gold: #DD9F2A;          /* ★ signal · icons, CTAs, highlights */
  --gold-ink: #C68A1B;      /* pressed / darker gold for hover on gold surfaces */

  /* --- Tertiary · warm off-white surfaces --- */
  --linen: #F7F2EF;         /* soft neutral section wash */
  --cream: #FCF6EC;         /* warm, slightly golden section wash */
  --onyx:  #231F20;         /* body & paragraph copy (softer than black) */

  /* --- Neutrals --- */
  --black: #000000;         /* headings, high-emphasis text */
  --white: #FFFFFF;         /* whitespace, page base, reversed type */

  /* --- Derived neutrals (warm grey ramp for UI chrome) --- */
  --grey-50:  #F4F2F0;
  --grey-100: #E9E6E2;
  --grey-200: #D8D3CD;
  --grey-300: #B9B2AA;
  --grey-400: #8C857D;
  --grey-500: #625C55;

  /* ---------------------------------------------------------------
     Semantic aliases — reference these in components, not raw values
     --------------------------------------------------------------- */
  --brand:            var(--indigo-core);
  --brand-strong:     var(--indigo-deep);
  --accent:           var(--gold);

  /* Surfaces */
  --surface-page:     var(--white);
  --surface-linen:    var(--linen);
  --surface-cream:    var(--cream);
  --surface-card:     var(--white);
  --surface-invert:   var(--indigo-core);
  --surface-invert-2: var(--indigo-mid);

  /* Text */
  --text-heading:     var(--black);
  --text-body:        var(--onyx);
  --text-muted:       var(--grey-500);
  --text-on-invert:   var(--white);
  --text-on-invert-muted: rgba(255,255,255,0.68);
  --text-on-accent:   var(--indigo-deep);
  --text-accent:      var(--gold);

  /* Lines & borders */
  --border-subtle:    var(--grey-100);
  --border-default:   var(--grey-200);
  --border-strong:    var(--grey-300);
  --border-invert:    rgba(255,255,255,0.14);
  --divider-invert:   var(--indigo-soft);

  /* Interactive */
  --focus-ring:       rgba(221,159,42,0.55);

  /* Gradients (indigo family) */
  --grad-deep-indigo: linear-gradient(135deg, #2E2D5E 0%, #232458 55%, #1D1A4E 100%); /* @kind other */
  --grad-soft-rise:   linear-gradient(135deg, #444571 0%, #232458 100%); /* @kind other */

  /* Atmospheric brand mesh — soft, blurred blooms of light that melt from a
     blue-leaning indigo (bottom-left) through amber to a bright warm hotspot
     (upper-right), like diffuse studio light. For hero sections, banners and
     large full-bleed surfaces. Overlay white text; keep body copy off the
     bright gold zone. Layered wide radial blooms = the CSS blur look. */
  --grad-mesh-brand: radial-gradient(65% 55% at 66% 30%, #FBE6B0 0%, rgba(251,230,176,0) 55%), radial-gradient(75% 70% at 90% 6%, #E9A63A 0%, rgba(233,166,58,0) 62%), radial-gradient(85% 80% at 40% 8%, #DD9F2A 0%, rgba(221,159,42,0) 58%), radial-gradient(95% 95% at 2% 102%, #46579E 0%, rgba(70,87,158,0) 55%), radial-gradient(80% 90% at 30% 96%, #2A2A66 0%, rgba(42,42,102,0) 60%), linear-gradient(122deg, #24215A 0%, #4B4680 34%, #9C7560 62%, #D79B3E 100%); /* @kind other */
}