:root {
    /* COLORES: DARK INDUSTRIAL */
    --bg-canvas: #080808;      /* Negro absoluto */
    --bg-surface: #121212;     /* Gris casi negro */
    --bg-highlight: #1C1C1C;   /* Para hovers */
    
    --border-dim: #222222;     /* Bordes sutiles */
    --border-light: #333333;   /* Bordes visibles */
    
    /* ACENTOS */
    --accent: #C27C2E;         /* COBRE TÉCNICO */
    --accent-glow: rgba(194, 124, 46, 0.15);
    --danger: #CF6679;
    --success: #00E676;

    /* TEXTO */
    --txt-main: #FFFFFF;
    --txt-dim: #888888;
    --txt-dark: #444444;

    /* FUENTES */
    --font-ui: 'Manrope', sans-serif;
    --font-data: 'Space Mono', monospace;

    /* MEDIDAS */
    /* Bottom dock: 64px height + 8px offset + breathing room */
    --nav-height: 92px;
    --header-height: 60px;
    --radius: 12px;
    --safe-area-bottom: env(safe-area-inset-bottom);
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

body {
    /* Premium marble background */
    background: linear-gradient(rgba(0,0,0,0.72), rgba(0,0,0,0.72)),
                url('../img/brand/bg_marble_gold.jpg') center/cover no-repeat;
    color: var(--txt-main);
    font-family: var(--font-ui);
    height: 100vh;
    overflow: hidden;
}

/* CLASES UTILITARIAS */
.hidden { display: none !important; }
.text-copper { color: var(--accent); }
.text-mono { font-family: var(--font-data); }
/* ---- Compatibility aliases (avoid invisible text if older controllers use --text-main / --txt) ---- */
:root{
  --text-main: var(--txt-main);
  --text-dim: var(--txt-dim);
  --txt: var(--txt-main);
  --text: var(--txt-main);
}

/* ==========================================================================
   ACCESSIBILITY FIXES — WCAG 2.1 AA
   ========================================================================== */

/* color-scheme: native dark scrollbars + input styling on supporting browsers */
:root { color-scheme: dark; }

/* Focus-visible: keyboard navigation outline (ring of copper) */
*:focus { outline: none; }
*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* user-select: text is the default for content; only interactive elements block selection */
button, [role="button"], nav, .nav-item, .brew-method-card,
.dash-tile, .bottom-nav-item, .chip, .pill {
  user-select: none;
  -webkit-user-select: none;
}

/* Minimum touch target size (Apple HIG: 44px, Google: 48px) */
button, [role="button"], .btn-arch, .nav-item, .bottom-nav-item,
.chip, .sop-dot, .pantry-item .pill {
  min-height: 44px;
  min-width: 44px;
}

/* SOP step dots: increase to 44px for HIG compliance */
.sop-dot {
  width: 44px !important;
  height: 44px !important;
  font-size: 0.9rem;
}

/* CRM FAB: safe-area bottom */
.crm-fab {
  bottom: calc(96px + env(safe-area-inset-bottom)) !important;
}

/* Reduced motion: respect OS preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}