/* ============================================================
   Ladybug Lane — Color Tokens
   Derived from the brand mark: crimson #DC143C, blossom #FFBECB,
   ink black, white polka dots. Accents harmonized in oklch.
   ============================================================ */

:root {
  /* ---- Crimson (primary — the ladybug's shell) ---- */
  --crimson-50:  #FFF0F2;
  --crimson-100: #FFDCE3;
  --crimson-200: #FFB6C4;
  --crimson-300: #FB889E;
  --crimson-400: #F04E6D;
  --crimson-500: #DC143C; /* brand core — sampled from logo */
  --crimson-600: #C00E33;
  --crimson-700: #9E0B2A;
  --crimson-800: #7C0A22;
  --crimson-900: #5C0819;

  /* ---- Blossom (signature soft pink — surfaces & fills) ---- */
  --blossom-50:  #FFF6F8;
  --blossom-100: #FFE9EF;
  --blossom-200: #FFD6E0;
  --blossom-300: #FFBECB; /* signature pink — sampled from logo */
  --blossom-400: #FF9EB2;
  --blossom-500: #FB7B96;
  --blossom-600: #EC5C7B;

  /* ---- Ink (warm neutral ramp — text, outlines, spots) ---- */
  --ink-950: #17110F;
  --ink-900: #241B18;
  --ink-800: #382A26;
  --ink-700: #523E39;
  --ink-600: #74584F;
  --ink-500: #98776D;
  --ink-400: #BA9E95;
  --ink-300: #D7C4BC;
  --ink-200: #EADFDA;
  --ink-100: #F4ECE8;
  --ink-50:  #FBF7F4;
  --white:   #FFFFFF;
  --black:   #000000;

  /* ---- Playground accents (category colors — harmonized) ---- */
  --leaf-100:  #E4F5E9;
  --leaf-500:  #47AE6A;
  --leaf-600:  #369257;
  --sky-100:   #E2F1FC;
  --sky-500:   #4FAEE8;
  --sky-600:   #2F92D0;
  --sunny-100: #FFF2D3;
  --sunny-500: #FFC24B;
  --sunny-600: #E8A21F;
  --grape-100: #F3E7FA;
  --grape-500: #B15FD0;
  --grape-600: #9A44BA;

  /* ======================================================
     SEMANTIC ALIASES
     ====================================================== */

  /* Brand & action */
  --brand:            var(--crimson-500);
  --brand-hover:      var(--crimson-600);
  --brand-active:     var(--crimson-700);
  --brand-soft:       var(--crimson-100);
  --accent-pink:      var(--blossom-300);
  --accent-pink-soft: var(--blossom-100);

  /* Text */
  --text-strong:   var(--ink-950);
  --text-body:     var(--ink-800);
  --text-muted:    var(--ink-600);
  --text-faint:    var(--ink-400);
  --text-inverse:  var(--white);
  --text-on-brand: var(--white);
  --text-link:     var(--crimson-600);

  /* Surfaces */
  --surface-page:    var(--blossom-50);
  --surface-card:    var(--white);
  --surface-sunken:  var(--ink-50);
  --surface-pink:    var(--blossom-100);
  --surface-pink-2:  var(--blossom-200);
  --surface-ink:     var(--ink-950);
  --surface-overlay: rgba(23, 17, 15, 0.55);

  /* Borders — bold black outline is a brand signature */
  --border-subtle:  var(--ink-200);
  --border-default: var(--ink-300);
  --border-strong:  var(--ink-950);
  --border-brand:   var(--crimson-500);

  /* Focus ring */
  --ring-focus: var(--crimson-400);

  /* Status */
  --color-success:      var(--leaf-500);
  --color-success-soft: var(--leaf-100);
  --color-warning:      var(--sunny-600);
  --color-warning-soft: var(--sunny-100);
  --color-danger:       var(--crimson-600);
  --color-danger-soft:  var(--crimson-100);
  --color-info:         var(--sky-500);
  --color-info-soft:    var(--sky-100);

  /* Commerce-specific */
  --price-regular:  var(--ink-950);
  --price-sale:     var(--crimson-600);
  --price-compare:  var(--ink-400);
  --badge-sale-bg:  var(--crimson-500);
  --badge-new-bg:   var(--leaf-500);
  --badge-soon-bg:  var(--sunny-500);
}