/* ─── BarbersYa Design System — Minimalist Modern Vintage ─── */

:root {
  /* Legacy aliases — keep old pages working */
  --brand-brown:  #0A0A0A;
  --brand-brown2: #2A2A2A;
  --brand-gold:   #9A7A3A;
  --brand-gold2:  #7A6030;
  --brand-cream:  #F7F7F7;
  --brand-cream2: #E8E8E8;
  --brand-tan:    #717171;
  --brand-muted:  #717171;

  /* Colors — Black & White priority */
  --color-bg:         #FFFFFF;
  --color-bg-subtle:  #F7F7F7;
  --color-bg-muted:   #F0F0F0;
  --color-surface:    #FFFFFF;

  --color-text:       #0A0A0A;
  --color-text-2:     #404040;
  --color-text-3:     #717171;
  --color-text-inv:   #FFFFFF;

  --color-border:     #E8E8E8;
  --color-border-2:   #D0D0D0;
  --color-border-dark:#0A0A0A;

  /* Gold — vintage accent, use sparingly */
  --color-gold:       #9A7A3A;
  --color-gold-light: #C4A46A;

  /* Functional */
  --color-error:      #DC2626;
  --color-success:    #16A34A;

  /* Typography */
  --font-display:     'Bodoni Moda', Georgia, serif;
  --font-body:        'Jost', system-ui, sans-serif;

  /* Spacing */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  40px;
  --space-2xl: 64px;
  --space-3xl: 96px;

  /* Radius */
  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-pill: 100px;

  /* Shadows — minimal */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,.08);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.10);

  /* Easing tokens — Plan 003 */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}

/* ─── Base ─── */
*, *::before, *::after { box-sizing: border-box; }
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

/* ─── Typography ─── */
.display { font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.display-italic { font-family: var(--font-display); font-style: italic; font-weight: 400; }
.label { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--color-text-3); }

/* ─── Buttons ─── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-size: 14px; font-weight: 600;
  padding: 12px 24px; border-radius: var(--radius-pill);
  border: 1.5px solid transparent; cursor: pointer;
  text-decoration: none;
  transition: background-color 200ms var(--ease-out),
              border-color 200ms var(--ease-out),
              color 200ms var(--ease-out),
              transform 160ms var(--ease-out),
              opacity 150ms var(--ease-out);
  line-height: 1;
}
.btn-dark {
  background: var(--color-text); color: var(--color-text-inv);
  border-color: var(--color-text);
}
.btn-dark:hover { background: #2A2A2A; border-color: #2A2A2A; }

.btn-outline {
  background: transparent; color: var(--color-text);
  border-color: var(--color-border-dark);
}
.btn-outline:hover { background: var(--color-text); color: var(--color-text-inv); }

.btn-ghost {
  background: transparent; color: var(--color-text);
  border-color: transparent; padding: 12px 16px;
}
.btn-ghost:hover { background: var(--color-bg-subtle); }

.btn-gold {
  background: var(--color-gold); color: white;
  border-color: var(--color-gold);
}
.btn-gold:hover { background: #7A6030; }

.btn-sm { padding: 8px 16px; font-size: 13px; }
.btn-lg { padding: 16px 32px; font-size: 16px; }

/* Plan 007 — press feedback */
.btn:active {
  transform: scale(0.97);
  transition: transform 100ms var(--ease-out);
}

/* ─── Cards ─── */
.card {
  background: var(--color-surface); border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  transition: box-shadow 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.card:hover { box-shadow: var(--shadow-md); }
.card-link { text-decoration: none; display: block; transition: box-shadow 200ms var(--ease-out), transform 200ms var(--ease-out); }
.card-link:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

/* ─── Inputs ─── */
.input {
  width: 100%; font-family: var(--font-body); font-size: 15px;
  padding: 13px 16px; border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md); outline: none; background: white;
  transition: border-color 150ms var(--ease-out); color: var(--color-text);
}
.input:focus { border-color: var(--color-text); }
.input::placeholder { color: var(--color-text-3); }

/* ─── Chips / Tags ─── */
.chip {
  display: inline-flex; align-items: center; padding: 6px 14px;
  border-radius: var(--radius-pill); font-size: 13px; font-weight: 500;
  border: 1px solid var(--color-border); color: var(--color-text-2);
  text-decoration: none;
  transition: background-color 150ms var(--ease-out),
              border-color 150ms var(--ease-out),
              color 150ms var(--ease-out);
  white-space: nowrap;
  background: white;
}
.chip:hover { border-color: var(--color-text); color: var(--color-text); }
.chip.active { background: var(--color-text); color: white; border-color: var(--color-text); }

/* ─── Vintage accent ─── */
.gold-line { width: 40px; height: 2px; background: var(--color-gold); }
.gold-dot::before { content: '·'; color: var(--color-gold); margin: 0 8px; }

/* ─── Divider ─── */
.divider { height: 1px; background: var(--color-border); margin: 24px 0; }

/* ─── Scrollbar ─── */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* ─── Utilities ─── */
.serif { font-family: var(--font-display); }
.container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.section { padding: var(--space-2xl) 24px; }

/* ─── Plan 005: Accesibilidad — reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .btn,
  .card,
  .card-link,
  .chip,
  .input {
    transition: opacity 150ms linear !important;
  }
}

/* Plan 005: hover motion solo en dispositivos con puntero fino */
@media (hover: hover) and (pointer: fine) {
  .card-link:hover {
    transform: translateY(-2px);
  }
}

@media not all and (hover: hover) {
  .card-link:hover {
    transform: none;
    box-shadow: none;
  }
}