/* ============================================================
   Barbería Sistema — CSS Custom Properties (Design Tokens)
   ============================================================ */

:root {
  /* ----------------------------------------------------------
     Color Palette
     ---------------------------------------------------------- */
  --color-primary:   #1a1a2e;
  --color-secondary: #16213e;
  --color-accent:    #e94560;
  --color-gold:      #f5a623;
  --color-success:   #27ae60;
  --color-warning:   #f39c12;
  --color-danger:    #e74c3c;
  --color-info:      #2980b9;

  /* Background & Text */
  --color-bg:          #f8f9fa;
  --color-bg-alt:      #ffffff;
  --color-bg-dark:     #1a1a2e;
  --color-text:        #2c3e50;
  --color-text-light:  #7f8c8d;
  --color-text-muted:  #95a5a6;
  --color-text-invert: #ffffff;

  /* Borders */
  --color-border:       #dee2e6;
  --color-border-light: #f1f3f4;
  --color-border-dark:  #adb5bd;

  /* Sidebar */
  --color-sidebar-bg:   #1a1a2e;
  --color-sidebar-text: #ecf0f1;
  --color-sidebar-hover: #e94560;
  --color-sidebar-active: rgba(233, 69, 96, 0.2);

  /* Status badge colors */
  --color-status-pending:   #f39c12;
  --color-status-confirmed: #27ae60;
  --color-status-cancelled: #e74c3c;

  /* ----------------------------------------------------------
     Typography
     ---------------------------------------------------------- */
  --font-primary: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
                  'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', Consolas, 'Courier New', monospace;

  /* Font sizes */
  --font-size-xs:  0.75rem;   /* 12px */
  --font-size-sm:  0.875rem;  /* 14px */
  --font-size-md:  1rem;      /* 16px */
  --font-size-lg:  1.125rem;  /* 18px */
  --font-size-xl:  1.25rem;   /* 20px */
  --font-size-2xl: 1.5rem;    /* 24px */
  --font-size-3xl: 1.875rem;  /* 30px */
  --font-size-4xl: 2.25rem;   /* 36px */

  /* Font weights */
  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --font-weight-black:    900;

  /* Line heights */
  --line-height-tight:  1.25;
  --line-height-normal: 1.5;
  --line-height-loose:  1.75;

  /* ----------------------------------------------------------
     Spacing Scale (base 4px = 0.25rem)
     ---------------------------------------------------------- */
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-7:  1.75rem;   /* 28px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */

  /* ----------------------------------------------------------
     Border Radius
     ---------------------------------------------------------- */
  --radius-sm:   0.25rem;  /*  4px */
  --radius-md:   0.5rem;   /*  8px */
  --radius-lg:   0.75rem;  /* 12px */
  --radius-xl:   1rem;     /* 16px */
  --radius-2xl:  1.5rem;   /* 24px */
  --radius-full: 9999px;   /* pill */

  /* ----------------------------------------------------------
     Shadows
     ---------------------------------------------------------- */
  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.10), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md:  0 4px 6px rgba(0, 0, 0, 0.07),  0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-lg:  0 10px 15px rgba(0, 0, 0, 0.10), 0 4px 6px rgba(0, 0, 0, 0.05);
  --shadow-xl:  0 20px 25px rgba(0, 0, 0, 0.10), 0 10px 10px rgba(0, 0, 0, 0.04);
  --shadow-inset: inset 0 2px 4px rgba(0, 0, 0, 0.06);

  /* ----------------------------------------------------------
     Transitions
     ---------------------------------------------------------- */
  --transition-fast:   150ms ease-in-out;
  --transition-normal: 250ms ease-in-out;
  --transition-slow:   400ms ease-in-out;

  /* ----------------------------------------------------------
     Z-Index Scale
     ---------------------------------------------------------- */
  --z-base:    1;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
  --z-tooltip:  600;

  /* ----------------------------------------------------------
     Layout
     ---------------------------------------------------------- */
  --sidebar-width:         260px;
  --sidebar-collapsed-w:   70px;
  --navbar-height:         64px;
  --container-max-width:   1280px;
  --content-padding:       var(--space-6);
}

/* Dark mode support (optional future) */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:          #0f0f1a;
    --color-bg-alt:      #1a1a2e;
    --color-text:        #ecf0f1;
    --color-text-light:  #bdc3c7;
    --color-border:      #2c3e50;
    --color-border-light: #34495e;
  }
}