/**
 * Nearly Perfect Design System - Colors
 * CSS Custom Properties
 *
 * Usage:
 *   background-color: var(--color-indigo-500);
 *   color: var(--color-periwinkle-700);
 */

:root {
  /* ============================================================
   * INDIGO — Primary / Brand Anchor
   * CTAs, headings, active states, primary buttons
   * ============================================================ */
  --color-indigo-50:  #F5F4FF;
  --color-indigo-100: #ECEAFF;
  --color-indigo-200: #D9D5FF;
  --color-indigo-300: #BFB8FF;
  --color-indigo-400: #9B8EFF;
  --color-indigo-500: #120BA4;
  --color-indigo-600: #0F098D;
  --color-indigo-700: #0D0776;
  --color-indigo-800: #0A055F;
  --color-indigo-900: #070348;

  /* ============================================================
   * PERIWINKLE — Secondary Signal
   * Match signals, guidance elements, "the AI is speaking" color
   * ============================================================ */
  --color-periwinkle-50:  #F7F9FE;
  --color-periwinkle-100: #EEF3FD;
  --color-periwinkle-200: #DDE7FB;
  --color-periwinkle-300: #C2D5F8;
  --color-periwinkle-400: #749AE4;
  --color-periwinkle-500: #5E87DA;
  --color-periwinkle-600: #4D71C4;
  --color-periwinkle-700: #3E5CA8;
  --color-periwinkle-800: #2F478C;
  --color-periwinkle-900: #203270;

  /* ============================================================
   * MINT — Trust & Freshness
   * Human-verified badges, success states, positive signals
   * ============================================================ */
  --color-mint-50:  #F3FEFB;
  --color-mint-100: #E0FDF6;
  --color-mint-200: #C2FAED;
  --color-mint-300: #9EEBD3;
  --color-mint-400: #7BDEC0;
  --color-mint-500: #5DCFAD;
  --color-mint-600: #4BB695;
  --color-mint-700: #3C9779;
  --color-mint-800: #2D785D;
  --color-mint-900: #1E5941;

  /* ============================================================
   * CORAL — Value & Timing (use sparingly)
   * Urgency signals, "Best Value Now", attention-drawing accents
   * ============================================================ */
  --color-coral-50:  #FFF5F6;
  --color-coral-100: #FFE6E9;
  --color-coral-200: #FFCDD3;
  --color-coral-300: #FFA5B1;
  --color-coral-400: #F76F89;
  --color-coral-500: #EF3C5E;
  --color-coral-600: #D9334F;
  --color-coral-700: #B82A41;
  --color-coral-800: #972133;
  --color-coral-900: #761825;

  /* ============================================================
   * WARM — Hospitality Atmosphere / Neutrals
   * Surfaces, muted text, subtle backgrounds
   * ============================================================ */
  --color-warm-50:  #FAFAF9;
  --color-warm-100: #F5F2EF;
  --color-warm-200: #EFEAE6;
  --color-warm-300: #E8D6D8;
  --color-warm-400: #DACBCD;
  --color-warm-500: #BFB1B3;
  --color-warm-600: #A49597;
  --color-warm-700: #897A7C;
  --color-warm-800: #6E5F61;
  --color-warm-900: #534446;

  /* ============================================================
   * GLOBAL SURFACE
   * ============================================================ */
  --color-background: #F5F2EF; /* warm-100 — never use pure white as page bg */

  /* ============================================================
   * SIGNAL LABEL TOKENS — Semantic badge/chip colors
   * ============================================================ */
  --signal-match-bg:      #F7F9FE; /* periwinkle-50  — "99% Match" */
  --signal-match-text:    #3E5CA8; /* periwinkle-700 */

  --signal-human-bg:      #F3FEFB; /* mint-50         — "Human Verified" */
  --signal-human-text:    #3C9779; /* mint-700 */

  --signal-value-bg:      #FFF5F6; /* coral-50        — "Best Value Now" */
  --signal-value-text:    #B82A41; /* coral-700 */

  --signal-character-bg:  #E8D6D8; /* warm-300        — "Quiet by Design" */
  --signal-character-text: #3D4148; /* neutral dark */

  /* ============================================================
   * DEPRECATED — kept for backwards compatibility only
   * Do not use in new code. Migrate to tonal scale tokens above.
   * ============================================================ */
  --color-primary:          var(--color-indigo-500);
  --color-secondary:        var(--color-periwinkle-400);
  --color-accent-primary:   var(--color-mint-300);
  --color-accent-secondary: var(--color-coral-500);
  --color-neutral-light:    var(--color-warm-100);
  --color-neutral-warm:     var(--color-warm-300);
  --color-warm-blush:       var(--color-warm-100);
  --color-error:            var(--color-coral-500);
  --color-success:          var(--color-mint-300);
}