/* ==========================================================================
   Fashion Pedon — Color tokens
   Layer 1: primitives (raw ramps, never used directly in components)
   Layer 2: semantics (aliases — this is what components consume)
   ========================================================================== */

:root {
  /* ---------- Layer 1: primitives ---------------------------------------- */

  /* Indigo — the dye. Taken from the "P" mark. Carries every primary action. */
  --fp-indigo-50:  #EEF0FE;
  --fp-indigo-100: #DDE1FD;
  --fp-indigo-200: #BFC6FB;
  --fp-indigo-300: #9AA4F8;
  --fp-indigo-400: #6D7BF4;
  --fp-indigo-500: #3B4CF0; /* brand primary */
  --fp-indigo-600: #2C3AD6;
  --fp-indigo-700: #232DAB;
  --fp-indigo-800: #1C2483;
  --fp-indigo-900: #151B5E;
  --fp-indigo-950: #10122B; /* brand ink */

  /* Rose — the dot. Rationed: sale, offers, the one thing on screen that shouts. */
  --fp-rose-50:  #FFF0F4;
  --fp-rose-100: #FFE0E8;
  --fp-rose-200: #FFC2D2;
  --fp-rose-300: #FF94B0;
  --fp-rose-400: #FF6389;
  --fp-rose-500: #FF3B6B; /* brand accent */
  --fp-rose-600: #E51F51;
  --fp-rose-700: #BD1440;
  --fp-rose-800: #971136;
  --fp-rose-900: #7A1231;

  /* Paper — neutrals carry a trace of indigo so greys never go muddy next
     to the brand. Named for unbleached shelf paper, not "gray". */
  --fp-paper-0:   #FFFFFF;
  --fp-paper-25:  #FBFBFE;
  --fp-paper-50:  #F4F5FB;
  --fp-paper-100: #EAECF5;
  --fp-paper-200: #D8DBEA;
  --fp-paper-300: #B9BED4;
  --fp-paper-400: #8E95B2;
  --fp-paper-500: #6A7192;
  --fp-paper-600: #4E5474;
  --fp-paper-700: #3A3F5A;
  --fp-paper-800: #262A40;
  --fp-paper-900: #171A2B;

  /* Support ramps — status only. Never decorative. */
  --fp-green-50:  #E7F7F0;
  --fp-green-100: #C6EDDC;
  --fp-green-500: #0E9F6E;
  --fp-green-700: #05704C;

  --fp-amber-50:  #FEF5E5;
  --fp-amber-100: #FCE7BF;
  --fp-amber-500: #F59F0B;
  --fp-amber-700: #B46708;

  --fp-red-50:  #FDECEC;
  --fp-red-100: #FAD3D3;
  --fp-red-500: #E02424;
  --fp-red-700: #A31515;

  --fp-sky-50:  #E8F2FE;
  --fp-sky-100: #CBE2FC;
  --fp-sky-500: #1D74E0;
  --fp-sky-700: #14539F;

  /* ---------- Layer 2: semantics ----------------------------------------- */

  /* Surfaces */
  --fp-bg-page:     var(--fp-paper-50);
  --fp-bg-surface:  var(--fp-paper-0);
  --fp-bg-sunken:   var(--fp-paper-100);
  --fp-bg-inverse:  var(--fp-indigo-950);
  --fp-bg-brand-soft: var(--fp-indigo-50);
  --fp-bg-accent-soft: var(--fp-rose-50);
  --fp-bg-overlay:  rgba(16, 18, 43, 0.55);

  /* Text */
  --fp-text-primary:   var(--fp-indigo-950);
  --fp-text-secondary: var(--fp-paper-600);
  --fp-text-muted:     var(--fp-paper-400);
  --fp-text-inverse:   var(--fp-paper-0);
  --fp-text-brand:     var(--fp-indigo-500);
  --fp-text-on-brand:  var(--fp-paper-0);
  --fp-text-accent:    var(--fp-rose-600);

  /* Borders */
  --fp-border-subtle: var(--fp-paper-100);
  --fp-border-default: var(--fp-paper-200);
  --fp-border-strong: var(--fp-paper-300);
  --fp-border-brand:  var(--fp-indigo-500);
  --fp-border-inverse: rgba(255, 255, 255, 0.16);

  /* Actions */
  --fp-action-primary:        var(--fp-indigo-500);
  --fp-action-primary-hover:  var(--fp-indigo-600);
  --fp-action-primary-active: var(--fp-indigo-700);
  --fp-action-disabled-bg:    var(--fp-paper-100);
  --fp-action-disabled-text:  var(--fp-paper-400);
  --fp-action-accent:         var(--fp-rose-500);
  --fp-action-accent-hover:   var(--fp-rose-600);

  /* Focus — one ring, everywhere, no exceptions */
  --fp-focus-ring: var(--fp-indigo-400);
  --fp-focus-ring-offset: var(--fp-paper-0);

  /* Feedback */
  --fp-success-bg: var(--fp-green-50);
  --fp-success-border: var(--fp-green-100);
  --fp-success-fg: var(--fp-green-700);
  --fp-success-solid: var(--fp-green-500);

  --fp-warning-bg: var(--fp-amber-50);
  --fp-warning-border: var(--fp-amber-100);
  --fp-warning-fg: var(--fp-amber-700);
  --fp-warning-solid: var(--fp-amber-500);

  --fp-danger-bg: var(--fp-red-50);
  --fp-danger-border: var(--fp-red-100);
  --fp-danger-fg: var(--fp-red-700);
  --fp-danger-solid: var(--fp-red-500);

  --fp-info-bg: var(--fp-sky-50);
  --fp-info-border: var(--fp-sky-100);
  --fp-info-fg: var(--fp-sky-700);
  --fp-info-solid: var(--fp-sky-500);

  /* ---------- Layer 2b: commerce semantics -------------------------------
     A clothing store has states a generic palette can't name. These are the
     ones that appear on real screens, so they get real tokens. */

  --fp-sale-fg:   var(--fp-rose-600);
  --fp-sale-bg:   var(--fp-rose-500);
  --fp-sale-text: var(--fp-paper-0);
  --fp-price-was: var(--fp-paper-400);

  --fp-cod-fg: var(--fp-green-700);
  --fp-cod-bg: var(--fp-green-50);

  --fp-stock-in:  var(--fp-green-500);
  --fp-stock-low: var(--fp-amber-500);
  --fp-stock-out: var(--fp-paper-400);

  /* Order lifecycle — one hue per stage, dull to bright as it approaches
     the customer's door. Delivered is the only green. */
  --fp-status-pending-bg:    var(--fp-paper-100);
  --fp-status-pending-fg:    var(--fp-paper-700);
  --fp-status-confirmed-bg:  var(--fp-indigo-50);
  --fp-status-confirmed-fg:  var(--fp-indigo-700);
  --fp-status-packed-bg:     var(--fp-sky-50);
  --fp-status-packed-fg:     var(--fp-sky-700);
  --fp-status-shipped-bg:    var(--fp-amber-50);
  --fp-status-shipped-fg:    var(--fp-amber-700);
  --fp-status-delivered-bg:  var(--fp-green-50);
  --fp-status-delivered-fg:  var(--fp-green-700);
  --fp-status-cancelled-bg:  var(--fp-red-50);
  --fp-status-cancelled-fg:  var(--fp-red-700);

  /* Swatch surfaces used by the colour picker on product pages. Real garment
     colours the store actually stocks. */
  --fp-swatch-indigo: #3B4CF0;
  --fp-swatch-ivory:  #F3EFE4;
  --fp-swatch-rose:   #FF3B6B;
  --fp-swatch-olive:  #6B7A4B;
  --fp-swatch-black:  #1A1A20;
  --fp-swatch-mustard:#D9A21B;
  --fp-swatch-teal:   #17756E;
  --fp-swatch-blush:  #EFC7CD;
}