/* ==========================================================================
   Colors Design Tokens — 2-layer system (palette + semantic) with legacy aliases
   ==========================================================================
   Mirrors scss/_tokens.scss. To update brand colours, change PALETTE values
   only; semantic and legacy derive from them. See DESIGN.md for context.
   ========================================================================== */

:root {

  /* --------------------------------------------------------------------------
     1. PALETTE — raw brand colours (DESIGN.md Colour Palette)
     -------------------------------------------------------------------------- */
  --color-red:         #EF4129;
  --color-charcoal:    #333334;
  --color-teal:        #49C6BB;
  --color-grey-light:  #F1F2F2;
  --color-grey-mid:    #9F9F9F;
  --color-white:       #FFFFFF;
  --color-black:       #000000;

  /* --------------------------------------------------------------------------
     2. SEMANTIC — UI intent (prefer these in components)
     -------------------------------------------------------------------------- */

  /* Actions */
  --color-action-primary:        var(--color-red);
  --color-action-primary-hover:  #D3381F;
  --color-action-destructive:    var(--color-red);
  --color-action-secondary:      var(--color-charcoal);

  /* Text */
  --color-text:                  var(--color-charcoal);
  --color-text-muted:            var(--color-grey-mid);
  --color-text-inverse:          var(--color-white);
  --color-text-brand:            var(--color-red);

  /* Surfaces */
  --color-surface:               var(--color-white);
  --color-surface-alt:           var(--color-grey-light);
  --color-surface-dark:          var(--color-charcoal);
  --color-surface-brand:         var(--color-red);
  --color-surface-accent:        var(--color-teal);

  /* Borders */
  --color-border:                var(--color-grey-light);
  --color-border-strong:         var(--color-grey-mid);
  --color-border-brand:          var(--color-red);

  /* Interactive */
  --color-link:                  var(--color-teal);
  --color-focus-ring:            var(--color-teal);

  /* Semantic states */
  --color-success:               #28A745;
  --color-warning:               #FFC107;
  --color-error:                 var(--color-red);
  --color-info:                  var(--color-teal);

  /* --------------------------------------------------------------------------
     3. LEGACY ALIASES — kept for backwards compat (migrate to semantic)
     -------------------------------------------------------------------------- */
  --color-primary-orange:        var(--color-red);          /* → action-primary */
  --color-primary-navy:          var(--color-charcoal);     /* → surface-dark / text */
  --color-primary-neapolitan:    var(--color-teal);         /* → surface-accent / link */
  --color-primary-white:         var(--color-white);
  --color-primary-black:         var(--color-black);
  --color-primary-grey:          var(--color-grey-mid);     /* → text-muted */
  --color-primary-overcast:      var(--color-grey-light);   /* → surface-alt / border */
  --color-primary-cloud:         var(--color-grey-light);   /* → surface-alt */

  /* Legacy — pending leader decision (DESIGN.md open decisions) */
  --color-secondary-cosmic-latte: #FFFBDC;
  --color-secondary-icy-blue:     #EFFBFF;
  --color-secondary-mint:         #F1FFF8;
  --color-secondary-lime:         #F2FFA6;
  --color-secondary-sky:          #DBF6FF;

  --color-secondary-turquoise:   var(--color-teal);         /* → surface-accent */
  --color-secondary-crimson:     var(--color-red);          /* → action-destructive / error */
  --color-secondary-link:        var(--color-teal);         /* → link */

  /* Semantic aliases (legacy naming) */
  --color-background:            var(--color-grey-light);   /* → surface-alt */
  --color-background-alt:        var(--color-white);        /* → surface */
  --color-text-primary:          var(--color-charcoal);     /* → text */
  --color-text-secondary:        var(--color-grey-mid);     /* → text-muted */
  --color-placeholder:           var(--color-grey-light);   /* → border */
  --color-accent:                var(--color-red);          /* → action-primary / text-brand */
  --color-brand:                 var(--color-charcoal);     /* → surface-dark / text */
}