/*
 * Tokens de diseño. Base: skill diseno-ui-ux, adaptada a gym:
 * - Oscuro por defecto y alto contraste (se usa dentro del gym, con luz variable).
 * - Todo lo tocable mide 48 px o más (manos sudadas, una sola mano entre series).
 * - --brand lo pone cada gym en el shell; aquí nunca se escribe un color de marca.
 * - Lo que se toca es dorado (--flame, nombre de antes) sobre negro cálido. Encima del
 *   dorado el texto va oscuro (--on-flame): el blanco no se lee sobre amarillo.
 */
:root {
  color-scheme: dark;
  /* --brand y --on-brand llegan del shell con el color del gym (gyms.brand_color). */
  --brand-ui: color-mix(in oklab, var(--brand) 78%, white);   /* aclarada para leerse sobre negro */

  --page: #0c0a07;
  --card: #17140f;
  --card-2: #1f1b15;            /* tarjeta dentro de tarjeta, campos */
  --line: oklch(1 0 0 / 0.08);
  --line-strong: oklch(1 0 0 / 0.16);
  --ink: #f7f4ec;
  --muted: #aea795;             /* 7.9:1 sobre --page */
  --soft: #27221b;

  --flame-from: #ffe27a;
  --flame: #ffc20e;
  --flame-to: #eb9c00;
  --flame-ink: #ffd24d;
  --on-flame: #1a1305;          /* texto e íconos encima del dorado */
  --flame-grad: linear-gradient(135deg, var(--flame-from), var(--flame) 50%, var(--flame-to));

  --gold: #e0b43a;
  --gold-ink: #f2cf6b;

  /* Brillo de los íconos (el del logo): reflejo arriba a la izquierda y filo claro */
  --gloss: radial-gradient(120% 85% at 18% 0%, oklch(1 0 0 / 0.55), oklch(1 0 0 / 0) 55%);
  --gloss-edge: inset 0 1px 0 oklch(1 0 0 / 0.55), inset 0 0 0 1px oklch(1 0 0 / 0.14);
  --gloss-soft: radial-gradient(120% 90% at 18% 0%, oklch(1 0 0 / 0.26), oklch(1 0 0 / 0) 58%);
  /* Gris Oxford con brillo: lo secundario (premium, sin competir con el dorado) */
  --oxford: linear-gradient(165deg, #646a74 0%, #3c4149 52%, #2a2d33 100%);
  --oxford-hi: linear-gradient(165deg, #717783 0%, #464c55 52%, #30343a 100%);
  --oxford-ink: #f4f5f7;
  --oxford-edge: inset 0 1px 0 oklch(1 0 0 / 0.3), inset 0 0 0 1px oklch(1 0 0 / 0.07), 0 8px 18px -10px oklch(0 0 0 / 0.7);

  /* Estados: siempre con ícono y texto, nunca solo color */
  --ok: #34d399;   --ok-bg: rgb(16 185 129 / 0.15);
  --warn: #fdba74; --warn-bg: rgb(249 115 22 / 0.16);   /* naranja: el amarillo ya es «tócame» */
  --bad: #fca5a5;  --bad-bg: rgb(239 68 68 / 0.15);
  --info: #7dd3fc; --info-bg: rgb(14 165 233 / 0.15);

  --glass-glow: oklch(1 0 0 / 0.05);
  --shadow-card: 0 1px 0 oklch(1 0 0 / 0.04) inset, 0 8px 24px -12px oklch(0 0 0 / 0.6);
  --shadow-pop: 0 24px 60px -20px oklch(0 0 0 / 0.8);

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.36, 0.64, 1);

  --radius-card: 1.25rem;
  --radius-field: 0.875rem;
  --radius-full: 999px;

  --tap: 48px;                  /* mínimo para tocar */
  --tap-lg: 56px;               /* acción principal de pantalla */
  --gutter: 16px;

  --nav-h: 64px;
  --top-h: 56px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --text-sm: 0.8125rem;
  --text-base: 1rem;            /* 16 px: debajo de esto iOS hace zoom en los campos */
  --text-lg: 1.25rem;
  --text-xl: 1.625rem;
}

/* Recepción y admin pueden pedir claro (pantallas de mostrador junto a ventanas). */
[data-theme="light"] {
  color-scheme: light;
  --brand-ui: color-mix(in oklab, var(--brand) 60%, black);
  --page: #f4f2ee;
  --card: #ffffff;
  --card-2: #f7f7f8;
  --line: oklch(0 0 0 / 0.07);
  --line-strong: oklch(0 0 0 / 0.14);
  --ink: #111113;
  --muted: #5d5d66;
  --soft: #ececef;
  --flame-ink: #7a5600;
  --gold-ink: #85650f;
  --ok: #047857;   --ok-bg: #d1fae5;
  --warn: #9a3412; --warn-bg: #ffedd5;
  --bad: #b91c1c;  --bad-bg: #fee2e2;
  --info: #075985; --info-bg: #e0f2fe;
  --glass-glow: oklch(1 0 0 / 0.6);
  --shadow-card: 0 1px 2px oklch(0 0 0 / 0.04), 0 14px 34px -18px oklch(0.25 0.04 270 / 0.22);
}