/* ============================================================
   UYARIQ SALUD · Design tokens
   Un producto, tres capas. DEMO — datos simulados.
   ============================================================ */

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('../assets/fonts/bricolage-var.woff2') format('woff2');
}

:root {
  /* ---- Marca ---- */
  --petrol-900: #06282B;
  --petrol-800: #0A3A3E;
  --petrol-700: #0E5E63;   /* brand principal */
  --petrol-600: #12707A;
  --petrol-500: #1E8B94;
  --petrol-300: #7BC2C8;
  --petrol-100: #DFF0F1;

  --amber-600: #B87708;    /* gamificación, texto sobre claro */
  --amber-500: #E8A020;    /* gamificación, marcas */
  --amber-100: #FBEED3;

  /* ---- Estados (validados; siempre icono + texto) ---- */
  --ok:       #0ca30c;
  --warn:     #fab219;
  --crit:     #d03b3b;
  --neutral:  #898781;
  --ok-bg:    rgba(12,163,12,.12);
  --warn-bg:  rgba(250,178,25,.16);
  --crit-bg:  rgba(208,59,59,.12);
  --neutral-bg: rgba(137,135,129,.14);

  /* ---- Tipografía ---- */
  --font-display: 'Bricolage Grotesque', 'Segoe UI Variable Display', system-ui, sans-serif;
  --font-body: system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-hero: clamp(30px, 5vw, 46px);
  --fs-h1: 26px;
  --fs-h2: 20px;
  --fs-h3: 16px;
  --fs-body: 14.5px;
  --fs-small: 12.5px;
  --fs-micro: 11px;

  /* ---- Geometría ---- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  --shadow-soft: 0 2px 10px rgba(10, 40, 43, .07);
  --shadow-float: 0 10px 34px rgba(10, 40, 43, .14);
  --ease-out: cubic-bezier(.22, .8, .3, 1);
}

/* ============ Tema CIUDADANO (claro, cálido) ============ */
body.app-ciudadano {
  --bg: #FAFAF7;
  --surface: #FFFFFF;
  --surface-2: #F2F4F1;
  --ink: #14211F;
  --ink-2: #4C5B58;
  --muted: #85928F;
  --line: #E4E8E4;
  --brand: var(--petrol-700);
  --brand-soft: var(--petrol-100);
  --gamify: var(--amber-500);
  --gamify-ink: var(--amber-600);
  --gamify-soft: var(--amber-100);
}

/* ============ Tema CENTRO MÉDICO (claro, clínico) ============ */
body.app-centro {
  --bg: #F5F8F7;
  --surface: #FFFFFF;
  --surface-2: #EBF1EF;
  --ink: #14211F;
  --ink-2: #4C5B58;
  --muted: #85928F;
  --line: #DFE7E4;
  --brand: var(--petrol-700);
  --brand-soft: var(--petrol-100);
  --gamify: var(--amber-500);
  --gamify-ink: var(--amber-600);
  --gamify-soft: var(--amber-100);
}

/* ============ Tema TORRE / HUB (oscuro, sala de control) ============ */
body.app-torre, body.app-hub {
  --bg: #0D1214;
  --surface: #161D20;
  --surface-2: #1D2629;
  --ink: #E8ECEC;
  --ink-2: #A7B4B2;
  --muted: #6E7C7A;
  --line: #263134;
  --brand: var(--petrol-500);
  --brand-soft: rgba(30, 139, 148, .16);
  --gamify: var(--amber-500);
  --gamify-ink: var(--amber-500);
  --gamify-soft: rgba(232, 160, 32, .14);
  --shadow-soft: 0 2px 10px rgba(0, 0, 0, .35);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, .5);
}