/* ============================================================
   Kawaii Shop — Design Tokens (single source of truth)
   Used by: storefront, account, custom admin (Kawaii Ops),
            login page, and email templates.
   Lifted directly from the concept styles.css so visual fidelity
   is preserved across the WordPress + WooCommerce build.
   ============================================================ */

:root {
  /* ---- Neutrals ---- */
  --color-bg: #FFF9F3;
  --color-surface: #FFFFFF;
  --color-ink: #4A3F5E;          /* soft plum, never black */
  --color-ink-soft: #7A6E8A;
  --color-muted: #B0A4BF;
  --color-line: #F3E8F7;

  /* ---- Pastel palette ---- */
  --pink:           #FFB5D1;
  --pink-deep:      #F783AC;
  --pink-bright:    #E6609A;
  --pink-soft:      #FFE5EE;

  --lavender:       #C8B0F5;
  --lavender-deep:  #A78BE6;
  --lavender-soft:  #ECE0FC;

  --mint:           #A8ECC7;
  --mint-deep:      #6DCF9D;
  --mint-soft:      #DDF7E7;

  --sky:            #A5D8FF;
  --sky-deep:       #7AB8F0;
  --sky-soft:       #DCEFFF;

  --butter:         #FFDE4D;
  --butter-deep:    #F5C430;
  --butter-soft:    #FFF3B8;

  --peach:          #FFCAB0;
  --peach-deep:     #FFA583;
  --peach-soft:     #FFE8DA;

  /* ---- Semantic ---- */
  --color-primary:       var(--pink-deep);
  --color-primary-dark:  var(--pink-bright);
  --color-primary-soft:  var(--pink-soft);
  --color-accent:        var(--lavender-deep);
  --color-accent-soft:   var(--lavender-soft);

  --color-success: #4CAF7F;
  --color-danger:  #E66B87;
  --color-warning: #F5C430;
  --color-info:    var(--sky-deep);

  --color-usado:      var(--lavender-deep);
  --color-usado-soft: var(--lavender-soft);

  /* ---- Shape ---- */
  --radius-sm: 14px;
  --radius:    22px;
  --radius-lg: 36px;
  --radius-xl: 48px;
  --radius-pill: 999px;

  /* ---- Shadows ---- */
  --shadow-sm:   0 2px 8px rgba(167,139,230,.08);
  --shadow:      0 10px 30px rgba(247,131,172,.13);
  --shadow-lg:   0 20px 50px rgba(200,176,245,.18);
  --shadow-cute: 0 6px 0 var(--pink-soft);
  --shadow-btn:  0 5px 0 var(--pink-bright);

  /* ---- Layout ---- */
  --container: 1200px;
  --pad-x: clamp(16px, 4vw, 40px);

  /* ---- Type ---- */
  --font-display: "Fredoka", "Quicksand", system-ui, sans-serif;
  --font-sans:    "Quicksand", "Nunito", system-ui, sans-serif;

  /* ---- Spacing scale (8pt) ---- */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* ---- Motion ---- */
  --ease-bounce: cubic-bezier(.4,2,.6,1);
  --t-fast: 180ms ease;
  --t: 280ms var(--ease-bounce);

  /* ---- Z layers ---- */
  --z-header: 50;
  --z-floating: 40;
  --z-modal: 100;
  --z-toast: 200;
}