/* ===========================================================================
   The Attention Experiment — Colour tokens
   Source of truth: "The Attention Experiment Colour Palette.pdf"
   00244F · 0047AB · 00C2C7 · FFB300 · FF5C7A · FFFFFF
   =========================================================================== */
:root {
  /* ---- Brand core (exact palette) ---------------------------------------- */
  --tae-navy:      #00244F;  /* deep navy — primary ink, dark surfaces        */
  --tae-blue:      #0047AB;  /* cobalt — primary brand / actions / links      */
  --tae-turquoise: #00C2C7;  /* turquoise — secondary / "Loop"                */
  --tae-gold:      #FFB300;  /* metallic gold (flat) — premium accent/"Choose"*/
  --tae-coral:     #FF5C7A;  /* coral-pink — energy / "Notice"                */
  --tae-white:     #FFFFFF;

  /* ---- Method colour coding (Scroll · Loop · Notice · Choose) ------------- */
  --tae-scroll: var(--tae-blue);
  --tae-loop:   var(--tae-turquoise);
  --tae-notice: var(--tae-coral);
  --tae-choose: var(--tae-gold);

  /* ---- Tints & shades (derived, harmonious) ------------------------------ */
  --tae-navy-900: #001830;
  --tae-navy-800: #00244F;
  --tae-navy-700: #093461;
  --tae-blue-600: #003C90;
  --tae-blue-500: #0047AB;
  --tae-blue-400: #2C68C4;
  --tae-blue-100: #DCE7F7;
  --tae-blue-050: #EEF3FC;
  --tae-turq-600: #009CA0;
  --tae-turq-500: #00C2C7;
  --tae-turq-100: #CFF3F4;
  --tae-turq-050: #E9FaFb;
  --tae-gold-600: #D98E00;
  --tae-gold-500: #FFB300;
  --tae-gold-100: #FFE9BF;
  --tae-gold-050: #FFF6E3;
  --tae-coral-600: #E03B5C;
  --tae-coral-500: #FF5C7A;
  --tae-coral-100: #FFD7DF;
  --tae-coral-050: #FFEEF1;

  /* ---- Neutral ramp (cool, tuned toward navy) ---------------------------- */
  --tae-ink:    #0B1B33;
  --tae-grey-900: #1C2A40;
  --tae-grey-700: #45556B;
  --tae-grey-500: #6E7D93;
  --tae-grey-400: #94A1B4;
  --tae-grey-300: #C2CAD6;
  --tae-grey-200: #DEE3EB;
  --tae-grey-100: #EDF0F5;
  --tae-grey-050: #F6F8FB;

  /* ---- Metallic gold gradient (logo / premium moments) ------------------- */
  --tae-gold-metallic: linear-gradient(135deg, #9C7A2E 0%, #E7C879 26%, #FFF1C2 50%, #D9B25A 74%, #8A6826 100%); /* @kind color */

  /* ======================================================================= */
  /* Semantic aliases — reference these in components                        */
  /* ======================================================================= */

  /* Text */
  --text-strong:   var(--tae-navy);
  --text-body:     var(--tae-grey-900);
  --text-muted:    var(--tae-grey-500);
  --text-on-dark:  var(--tae-white);
  --text-on-dark-muted: #AEC0DA;
  --text-brand:    var(--tae-blue);
  --text-link:     var(--tae-blue);

  /* Surfaces */
  --surface-page:    var(--tae-grey-050);
  --surface-card:    var(--tae-white);
  --surface-sunken:  var(--tae-grey-100);
  --surface-dark:    var(--tae-navy);
  --surface-dark-2:  var(--tae-navy-700);
  --surface-brand:   var(--tae-blue);
  --surface-accent:  var(--tae-turquoise);

  /* Lines */
  --border-subtle: var(--tae-grey-200);
  --border-default: var(--tae-grey-300);
  --border-strong: var(--tae-grey-400);
  --border-on-dark: rgba(255,255,255,0.16);

  /* Interactive (primary = cobalt blue) */
  --action:         var(--tae-blue);
  --action-hover:   var(--tae-blue-600);
  --action-active:  #00306F;
  --action-text:    var(--tae-white);

  /* Focus */
  --focus-ring: var(--tae-turquoise);

  /* Feedback */
  --info:    var(--tae-blue);
  --success: var(--tae-turquoise);
  --warning: var(--tae-gold);
  --danger:  var(--tae-coral);
}