/*
 * design/tokens.css -- ScotyaLoyalty design system, single authorized source.
 *
 * Identity: "El Sello" (see Ficha de Proposito, 2026-08-23, approved by
 * Camilo). LA accion del producto es "Sellar" -- una compra, un pedido en
 * cocina, una entrega con Triple POD, un login por OTP: todo en este
 * producto es una prueba verificada. La paleta viene de esa metafora
 * (tinta de sello) y del contexto real de uso (mostrador diurno, calido),
 * no de un tema oscuro generico -- ver base-de-diseno's blacklist:
 * violeta/azul sobre negro, glass, glow quedan fuera.
 *
 * DO NOT hand-edit a copy of this file in another repo/site. This is the
 * canonical copy; scripts/sync_tokens.js (Bloque 2) propagates it and
 * verifies the copies against design/TOKENS.sha256 -- an edited copy
 * fails that repo's gate instead of silently drifting.
 *
 * Contrast verified by hand (WCAG relative-luminance formula) for the
 * pairs that matter most: ink-1/bg (both themes, ~14:1), signal-as-button
 * text (white on light-mode signal 5.37:1, dark ink on dark-mode signal
 * 5.76:1), signal-as-text (4.77:1 light, 5.76:1 dark -- reserve signal
 * text usage for headings/links, not body copy, given the light-mode
 * margin is closer to the 4.5:1 floor), danger-as-text (6.56:1 light).
 * success/warning/info were derived at comparable lightness/chroma but
 * not hand-verified individually -- confirm in-browser before shipping
 * a screen that leans on one of them for body-sized text.
 */

:root {
  /* ---- Superficies -- papel calido, nunca blanco puro ---- */
  --bg:            #F6F1E7;
  --surface-1:     #EFE6D3;
  --surface-2:     #E7DAC0;
  --line:          #D6C7A6;

  /* ---- Tinta -- escala calida, nunca negro puro ---- */
  --ink-1:         #2B2015;
  --ink-2:         #5C4E3B;
  --ink-3:         #857458;

  /* ---- Senal unica -- tinta de sello (terracota/vermellon) ---- */
  --signal:        #B8451F;
  --signal-weak:   rgba(184, 69, 31, 0.12);
  --signal-rgb:    184, 69, 31;
  --text-on-signal: #FFFFFF;

  /* ---- Estados -- desaturados, ningun hue coincide con --signal (~15deg) ---- */
  --state-success: #5F7A4E;  /* salvia -- pedido listo, entrega sellada */
  --state-warning: #9C7A2A;  /* mostaza -- por confirmar, stock bajo */
  --state-danger:  #8E3A46;  /* vino -- cancelado, rechazado (distinto del rojo-naranja de la senal) */
  --state-info:    #4F6A80;  /* niebla -- en camino, en cocina */
  --state-success-bg: rgba(95, 122, 78, 0.12);
  --state-warning-bg: rgba(156, 122, 42, 0.12);
  --state-danger-bg:  rgba(142, 58, 70, 0.12);
  --state-info-bg:    rgba(79, 106, 128, 0.12);

  /* ---- Tipografia -- tres voces, un contrato ---- */
  --font-human:   'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-voice:   'Petrona', Georgia, 'Iowan Old Style', serif;
  --font-machine: 'IBM Plex Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  /* ---- Ritmo ---- */
  --space:  8px;
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-button: 6px;

  /* ---- Movimiento -- Emil Kowalski spring physics, ya establecido ---- */
  --spring-ease:     cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 0.15s var(--spring-ease);
  --transition-base: 0.25s var(--spring-ease);
  --transition-slow: 0.4s var(--spring-ease);

  /* ---- Motivo grafico -- el anillo del sello ---- */
  --motif-ring-width: 2px;
  --motif-ring-color: var(--line);
}

/*
 * Modo oscuro puntual: modal de QR en pantalla completa (el producto YA
 * requiere alto contraste ahi para lectura rapida del scanner), y la app
 * del repartidor / seguimiento (uso en calle, sol o noche). No es el modo
 * por defecto del producto -- ver Ficha de Proposito #4.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            #1C1712;
    --surface-1:     #241D16;
    --surface-2:     #2D2419;
    --line:          #3C3123;

    --ink-1:         #F3EAD9;
    --ink-2:         #B7A98D;
    --ink-3:         #897C61;

    --signal:        #E2743F;
    --signal-weak:   rgba(226, 116, 63, 0.16);
    --signal-rgb:    226, 116, 63;
    --text-on-signal: #1A140E;

    --state-success: #8FAE78;
    --state-warning: #D9B15C;
    --state-danger:  #DD6E7E;
    --state-info:    #86A8BC;
    --state-success-bg: rgba(143, 174, 120, 0.16);
    --state-warning-bg: rgba(217, 177, 92, 0.16);
    --state-danger-bg:  rgba(221, 110, 126, 0.16);
    --state-info-bg:    rgba(134, 168, 188, 0.16);
  }
}

:root[data-theme="dark"] {
  --bg:            #1C1712;
  --surface-1:     #241D16;
  --surface-2:     #2D2419;
  --line:          #3C3123;

  --ink-1:         #F3EAD9;
  --ink-2:         #B7A98D;
  --ink-3:         #897C61;

  --signal:        #E2743F;
  --signal-weak:   rgba(226, 116, 63, 0.16);
  --signal-rgb:    226, 116, 63;
  --text-on-signal: #1A140E;

  --state-success: #8FAE78;
  --state-warning: #D9B15C;
  --state-danger:  #DD6E7E;
  --state-info:    #86A8BC;
  --state-success-bg: rgba(143, 174, 120, 0.16);
  --state-warning-bg: rgba(217, 177, 92, 0.16);
  --state-danger-bg:  rgba(221, 110, 126, 0.16);
  --state-info-bg:    rgba(134, 168, 188, 0.16);
}

/* El anillo del sello -- unico motivo grafico, usarlo con moderacion:
   contador de sellos, marco del QR, esquina de ticket KDS. */
.sello-ring {
  position: relative;
}
.sello-ring::before {
  content: '';
  position: absolute;
  inset: -6px;
  border: var(--motif-ring-width) solid var(--motif-ring-color);
  border-radius: 50%;
  pointer-events: none;
}

/* Accesibilidad -- no negociable */
:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}