/* ═══════════════════════════════════════════════════════════════
   FRONTAL — Design Tokens
   ───────────────────────────────────────────────────────────────
   SINGLE SOURCE OF TRUTH for all modules.
   Every page imports this file FIRST.
   
   Sections:
     01. Color Palette
     02. Semantic Colors (estado de turnos)
     03. Typography
     04. Spacing & Radius
     05. Transitions
     06. Reset
     07. Base Typography
     08. Scrollbar
     09. Touch Device Cursor
═══════════════════════════════════════════════════════════════ */


/* ══ 01. COLOR PALETTE ══════════════════════════════════════════ */

:root {
  /* Neutrals */
  --black:      #080808;
  --white:      #F5F2EE;
  --gray-dark:  #141414;
  --gray-mid:   #222222;
  --gray-light: #888888;

  /* Surfaces (admin/control/display panels) */
  --surface:    #111111;
  --surface-2:  #1a1a1a;
  --surface-3:  #222222;
  --border:     #2a2a2a;

  /* Text */
  --text:       #ffffff;
  --text-dim:   #999999;
  --text-muted: #555555;

  /* Brand */
  --accent:     #CEDC3D;
  --accent-dim: rgba(206, 220, 61, 0.12);


  /* ══ 02. SEMANTIC COLORS (estado de turnos) ══════════════════ */
  --libre:          #39FF6A;
  --en-charla:      #00C2FF;
  --señado:         #FF8C00;
  --reservado:      #FF2442;
  --no-disponible:  #888888;


  /* ══ 03. TYPOGRAPHY ══════════════════════════════════════════ */
  --font-display: 'Barlow Condensed', sans-serif;
  --font-body:    'Barlow', sans-serif;


  /* ══ 04. SPACING & RADIUS ═══════════════════════════════════ */
  --radius:    12px;
  --radius-sm: 8px;


  /* ══ 05. TRANSITIONS ════════════════════════════════════════ */
  --transition: 0.2s ease;
}


/* ══ 06. RESET ═══════════════════════════════════════════════════ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  overflow-x: clip;
  max-width: 100%;
}

body {
  background: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  max-width: 100%;
}


/* ══ 07. BASE TYPOGRAPHY ═════════════════════════════════════════ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
}


/* ══ 08. SCROLLBAR ═══════════════════════════════════════════════ */

::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-thumb  { background: var(--border); border-radius: 3px; }


/* ══ 09. TOUCH DEVICE CURSOR ═════════════════════════════════════ */

@media (pointer: coarse) {
  body { cursor: auto !important; }
}