/* ==========================================================
   Fashion AI Engine — Design Tokens
   Single source of truth for all CSS custom properties.
   Load this file first in every layout.
   ========================================================== */

:root {

  /* ----------------------------------------------------------
     COLORS — Public frontend
     ---------------------------------------------------------- */
  --color-bg:             #FAFAF8;   /* Warm white — page background  */
  --color-bg-alt:         #F5F3EF;   /* Soft beige — alternate surface */
  --color-surface:        #FFFFFF;   /* Card / panel background        */
  --color-border:         #E8E4DE;   /* Subtle divider                 */
  --color-border-strong:  #D4CFC9;   /* More visible border            */

  --color-text:           #1A1A1A;
  --color-text-secondary: #6B6560;
  --color-text-muted:     #9C9590;

  --color-accent:         #C9A96E;   /* Warm gold                      */
  --color-accent-dark:    #A8885A;   /* Hover / darker gold            */
  --color-accent-subtle:  rgba(201, 169, 110, 0.12);

  --color-cta:            #1A1A1A;
  --color-cta-hover:      #333333;

  --color-success:        #4CAF7D;
  --color-warning:        #F59E0B;
  --color-danger:         #E05252;

  /* ----------------------------------------------------------
     COLORS — Admin
     ---------------------------------------------------------- */
  --admin-bg:             #F4F4F5;
  --admin-surface:        #FFFFFF;
  --admin-border:         #E4E4E7;
  --admin-border-strong:  #D4D4D8;

  --admin-text:           #09090B;
  --admin-text-secondary: #52525B;
  --admin-text-muted:     #A1A1AA;

  --admin-accent:         #6366F1;
  --admin-accent-hover:   #4F46E5;
  --admin-accent-subtle:  rgba(99, 102, 241, 0.10);

  --admin-success:        #10B981;
  --admin-warning:        #F59E0B;
  --admin-danger:         #EF4444;

  --admin-success-subtle: rgba(16, 185, 129, 0.10);
  --admin-warning-subtle: rgba(245, 158, 11,  0.10);
  --admin-danger-subtle:  rgba(239, 68,  68,  0.10);

  --admin-sidebar-bg:     #18181B;
  --admin-sidebar-text:   #E4E4E7;
  --admin-sidebar-muted:  #71717A;
  --admin-sidebar-hover:  rgba(255, 255, 255, 0.06);

  /* ----------------------------------------------------------
     TYPOGRAPHY
     ---------------------------------------------------------- */
  --font-sans:    'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

  /* ----------------------------------------------------------
     SPACING  (4px base)
     ---------------------------------------------------------- */
  --space-xs:   0.25rem;   /*  4px */
  --space-sm:   0.5rem;    /*  8px */
  --space-md:   1rem;      /* 16px */
  --space-lg:   1.5rem;    /* 24px */
  --space-xl:   2rem;      /* 32px */
  --space-2xl:  3rem;      /* 48px */
  --space-3xl:  5rem;      /* 80px */

  /* ----------------------------------------------------------
     BORDER RADIUS
     ---------------------------------------------------------- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-pill: 9999px;

  /* ----------------------------------------------------------
     SHADOWS
     ---------------------------------------------------------- */
  --shadow-soft:     0 1px 4px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-card:     0 4px 16px rgba(0, 0, 0, 0.07);
  --shadow-elevated: 0 12px 40px rgba(0, 0, 0, 0.12);

  /* ----------------------------------------------------------
     TRANSITIONS
     ---------------------------------------------------------- */
  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ----------------------------------------------------------
     LAYOUT
     ---------------------------------------------------------- */
  --container-max:       1200px;
  --container-padding:   var(--space-lg);
  --admin-sidebar-width: 240px;
  --topbar-height:       56px;

  /* ----------------------------------------------------------
     Z-INDEX
     ---------------------------------------------------------- */
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-modal:    300;
}