/* Shopana — Color system
   Source of truth: Figma "Shopana Marketplace" (market.shopana.in).
   Base ramp values mirror the Figma Variables in fig-tokens.css; the
   semantic aliases below are what product code should reference. */

:root {
  /* ---- Brand red ramp ---- */
  --red-50:  #FDECEB;   /* tint wash (chips, hover bg) */
  --red-100: #F8D2CF;   /* light tint */
  --red-200: #ECBCBA;   /* disabled-ish / skeleton on red */
  --red-300: #E89C99;   /* soft */
  --red-400: #E35E5B;   /* lighter accent */
  --red-500: #E73A2F;   /* PRIMARY brand red */
  --red-600: #CC5C5D;   /* muted variant */
  --red-700: #AD382B;   /* pressed / dark */
  --red-800: #A51A0D;   /* deepest */

  /* ---- Neutral ramp ---- */
  --white:    #FFFFFF;
  --grey-50:  #FAF9F9;  /* app background tint */
  --grey-100: #F4F4F4;  /* surface alt / fills */
  --grey-200: #E0E0E0;  /* borders, dividers */
  --grey-400: #777777;  /* secondary text */
  --grey-500: #666666;  /* tertiary text */
  --grey-700: #444444;  /* strong icon */
  --grey-900: #222222;  /* primary text / ink */
  --black:    #000000;

  /* ---- Accent: Try-On / credits gradient (used only on the credits banner) ---- */
  --accent-indigo: #667EEA;
  --accent-violet: #764BA2;

  /* ---- Alphas ---- */
  --black-a10: rgba(0,0,0,0.10);
  --black-a35: rgba(0,0,0,0.35);
  --black-a54: rgba(0,0,0,0.54);
  --red-a12:   rgba(231,58,47,0.12);
  --red-a50:   rgba(231,58,47,0.50);

  /* ============ Semantic aliases ============ */
  /* Brand */
  --brand:            var(--red-500);
  --brand-hover:      var(--red-700);
  --brand-pressed:    var(--red-800);
  --brand-tint:       var(--red-50);
  --on-brand:         var(--white);

  /* Surfaces */
  --surface-app:      var(--grey-50);
  --surface-card:     var(--white);
  --surface-alt:      var(--grey-100);
  --surface-inverse:  var(--grey-900);

  /* Text */
  --text-primary:     var(--grey-900);
  --text-secondary:   var(--grey-400);
  --text-tertiary:    var(--grey-500);
  --text-on-brand:    var(--white);
  --text-link:        var(--red-500);

  /* Lines & borders */
  --border:           var(--grey-200);
  --border-strong:    var(--grey-400);
  --border-brand:     var(--red-500);

  /* States */
  --focus-ring:       var(--red-a50);
  --overlay-scrim:    var(--black-a35);

  /* Credits / Try-On accent gradient */
  --gradient-credits: linear-gradient(105deg, var(--accent-indigo) 0%, var(--accent-violet) 100%);
}