/* ===========================================================================
   CLIQ — Color Tokens
   Brand core + tonal scales + semantic aliases.
   Senior-facing surfaces are WHITE for accessibility; marketing / family
   surfaces lean on the navy + teal + violet brand triad.
   =========================================================================== */
:root {
  /* --- Brand core (canonical brand tokens) --- */
  --cliq-navy:    #1B2254; /* primary background, headings */
  --cliq-teal:    #22D4A4; /* CTAs, positive / safe states */
  --cliq-violet:  #6C63FF; /* secondary accent */
  --cliq-surface: #F5F5F5; /* card / panel backgrounds */
  --cliq-alert:   #E53E3E; /* danger / blocked states */
  --cliq-warn:    #F6AD55; /* pending / caution states */

  /* --- Navy / indigo scale --- */
  --navy-950: #12173A;
  --navy-900: #161C49;
  --navy-800: #1B2254; /* = --cliq-navy */
  --navy-700: #272F6B;
  --navy-600: #3A4385;
  --navy-500: #4E58A0;
  --navy-400: #6B73B4;
  --navy-300: #9097CB;
  --navy-200: #C2C6E2;
  --navy-100: #E4E6F2;
  --navy-050: #F2F3F9;

  /* --- Teal scale --- */
  --teal-700: #0F6E56; /* "safe" text on light */
  --teal-600: #16A085;
  --teal-500: #22D4A4; /* = --cliq-teal */
  --teal-400: #4FE0BA;
  --teal-300: #84ECD0;
  --teal-200: #B6F2E2;
  --teal-100: #E1F5EE; /* safe surface */
  --teal-050: #F0FBF8;

  /* --- Violet scale --- */
  --violet-700: #4A41B0;
  --violet-600: #534AB7;
  --violet-500: #6C63FF; /* = --cliq-violet */
  --violet-400: #8B84FF;
  --violet-300: #ABA6FF;
  --violet-200: #CFCCFF;
  --violet-100: #F4F3FB; /* tint surface */
  --violet-050: #FAFAFE;

  /* --- Alert (danger) scale --- */
  --alert-700: #A32D2D;
  --alert-600: #C53030;
  --alert-500: #E53E3E; /* = --cliq-alert */
  --alert-100: #FCEBEB;
  --alert-050: #FEF5F5;

  /* --- Warn (caution) scale --- */
  --warn-700: #BA7517;
  --warn-600: #DD8B2E;
  --warn-500: #F6AD55; /* = --cliq-warn */
  --warn-100: #FAEEDA;
  --warn-050: #FEF8EF;

  /* --- Neutral / ink scale --- */
  --ink-900: #1B2254;
  --ink-700: #3D3B52;
  --ink-600: #5B5870; /* secondary copy */
  --ink-500: #767391;
  --ink-400: #9C9AB0;
  --ink-300: #C7C6D4;
  --ink-200: #E2E1EA;
  --ink-100: #EFEFF3;
  --ink-050: #F5F5F5; /* = --cliq-surface */
  --white:    #FFFFFF;

  /* =========================================================================
     SEMANTIC ALIASES — reference these in product code, not the raw scales.
     ========================================================================= */

  /* Surfaces */
  --surface-page:        var(--white);    /* senior-facing default = white */
  --surface-page-dark:   var(--navy-800); /* marketing / family hero */
  --surface-card:        var(--white);
  --surface-card-tint:   var(--violet-100);
  --surface-card-dark:   var(--navy-700);
  --surface-sunken:      var(--ink-050);
  --surface-safe:        var(--teal-100);
  --surface-danger:      var(--alert-100);
  --surface-caution:     var(--warn-100);

  /* Text */
  --text-heading:    var(--navy-800);
  --text-body:       var(--ink-600);
  --text-strong:     var(--navy-800);
  --text-muted:      var(--ink-500);
  --text-on-dark:    var(--white);
  --text-on-dark-muted: var(--navy-200);
  --text-safe:       var(--teal-700);
  --text-danger:     var(--alert-700);
  --text-caution:    var(--warn-700);
  --text-link:       var(--violet-600);

  /* Brand action colors */
  --action-primary:        var(--violet-500);
  --action-primary-hover:  var(--violet-600);
  --action-primary-press:  var(--violet-700);
  --action-positive:       var(--teal-500);
  --action-positive-hover: var(--teal-600);
  --action-positive-text:  var(--navy-800);

  /* Borders */
  --border-subtle:   var(--ink-200);
  --border-default:  var(--ink-300);
  --border-strong:   var(--navy-800);
  --border-on-dark:  rgba(255,255,255,0.16);
  --border-safe:     var(--teal-300);
  --border-danger:   #F09595;

  /* Focus ring — high-contrast for accessibility */
  --focus-ring: var(--violet-500);
}