/* ============================================================
   RecMom — COLOR TOKENS
   v0.1 PLACEHOLDER branding. Components must reference the
   SEMANTIC tokens (--color-*) so a rebrand is a token swap.
   ============================================================ */
:root {
  /* --- Accent ramp (orange) — [PLACEHOLDER 500/600; PROPOSED rest] --- */
  --accent-50:  #FFEDE6; /* selected/active bg on light */
  --accent-100: #FFD6C7; /* subtle hover bg on light */
  --accent-300: #FF8A66; /* tints, illustration */
  --accent-500: #FA5329; /* PRIMARY brand color */
  --accent-600: #DA2F04; /* hover / pressed */
  --accent-700: #B02503; /* pressed-on-pressed */

  /* --- Neutral ramp --- */
  --neutral-0:    #FFFFFF;
  --neutral-50:   #F4F4F4;
  --neutral-100:  #E6E6E6;
  --neutral-200:  #CFCFCF;
  --neutral-300:  #AEAEAE;
  --neutral-500:  #737373;
  --neutral-700:  #3C3C3C;
  --neutral-900:  #1A1A1A;
  --neutral-1000: #000000;

  /* --- Status colors — [PROPOSED] --- */
  --success-500: #15935E; --success-50: #E7F5EE;
  --warning-500: #B7791F; --warning-50: #FBF3E2;
  --error-500:   #C2143B; --error-50:   #FCE8EC; /* pushed to crimson, clearly != brand */
  --info-500:    #1F6FEB;

  /* ============================================================
     SEMANTIC TOKENS — components reference THESE
     ============================================================ */
  --color-brand:          var(--accent-500);
  --color-brand-hover:     var(--accent-600);
  --color-brand-pressed:   var(--accent-700);

  --color-bg:             var(--neutral-50);    /* default app background (light) */
  --color-bg-inverse:     var(--neutral-1000);  /* marketing / hero / app bar */
  --color-surface:        var(--neutral-0);     /* cards, sheets on light */
  --color-surface-inverse:var(--neutral-900);   /* cards on dark */

  --color-text:           var(--neutral-1000);  /* primary text on light */
  --color-text-muted:     var(--neutral-500);   /* secondary text on light */
  --color-text-inverse:   var(--neutral-0);     /* text on dark / brand */

  --color-border:         var(--neutral-100);
  --color-border-strong:  var(--neutral-1000);  /* outline button 1.5px */
  --color-focus-ring:     var(--accent-500);
  --color-disabled-fill:  var(--neutral-300);
  --color-disabled-text:  var(--neutral-500);

  /* Status semantic aliases */
  --color-success:        var(--success-500); --color-success-bg: var(--success-50);
  --color-warning:        var(--warning-500); --color-warning-bg: var(--warning-50);
  --color-error:          var(--error-500);   --color-error-bg:   var(--error-50);
  --color-info:           var(--info-500);
}