/* Kirava · sistema de diseño
   Propiedades personalizadas para todo. Sin Sass, sin Tailwind. */

@layer reset, base, components, utilities;

:root {
  /* --- Paleta ---------------------------------------------------------
     Cálida y clara. El color fuerte lo ponen las cartas: la interfaz es el
     papel sobre el que descansan, no compite con ellas. */
  --primary:    #8ebec5;   /* azul polvoriento: interacción, foco, idioma */
  --secondary:  #f39a4a;   /* naranja: lo destacado, la acción principal */
  --accent:     #a8be76;   /* verde salvia: confirmación, disponibilidad */

  --bg:         #f8f5ee;   /* fondo */
  --surface:    #ffffff;   /* tarjetas */
  --ink:        #2f2a25;   /* texto */

  /* Derivados de la paleta, no colores nuevos: mezclas del tinte base para
     que toda la escala de grises tire a cálido y case con el fondo. */
  --surface-2:  #fdfbf6;
  --surface-3:  #f2ede2;
  --ink-2:      #6e6459;
  --ink-3:      #9a9083;
  --line:       #e2dacb;
  --line-soft:  #eee8db;

  --primary-ink:   #34676f;   /* el primario oscurecido, para texto sobre claro */
  --secondary-ink: #a95f18;
  --accent-ink:    #5c7333;

  --primary-wash:   #eaf3f5;
  --secondary-wash: #fdeddd;
  --accent-wash:    #eef2e3;

  /* --- Los cuatro pétalos de la marca -----------------------------------
     Sacados del propio logotipo, píxel a píxel, no a ojo. La paleta de la
     interfaz de arriba son versiones apagadas de estos: sirven para que el
     color fuerte lo pongan las cartas. Estos son el logotipo tal cual, y solo
     se usan cuando toca hablar de la marca. */
  --brand-orange: #e9922f;
  --brand-green:  #a1d2bb;
  --brand-blue:   #7aa2bb;
  --brand-yellow: #f8e183;

  /* El degradado de la acción principal, en el orden en que se leen los
     pétalos: naranja, verde, azul y amarillo.
     ---------------------------------------------------------------------
     DOS DECLARACIONES A PROPÓSITO. La primera es la de toda la vida y la
     entiende cualquier navegador. La segunda interpola en oklab y solo la
     aplican los que saben; los demás la ignoran entera y se quedan con la
     anterior. Es el mecanismo de reserva de CSS de siempre, sin condicionales.

     Y el oklab no es un capricho: mezclando naranja y verde en sRGB se pasa
     por el marrón, y el botón salía con una mancha turbia en medio. En oklab
     la transición va por donde la ve el ojo y los cuatro colores se
     distinguen.

     Los extremos van PLANOS —el naranja hasta el 18 %, el amarillo desde el
     84 %— y las transiciones, cortas. Repartido a partes iguales, en un botón
     estrecho como «Entrar» los cuatro se funden en uno solo y no se reconoce
     ninguno. Así se leen los cuatro incluso en el botón más pequeño.

     Inclinado 96° y no horizontal: recto del todo, en un botón ancho, parece
     una barra de progreso. */
  --brand-gradient: linear-gradient(96deg,
      var(--brand-orange)  0%   18%,
      var(--brand-green)  40%,
      var(--brand-blue)   62%,
      var(--brand-yellow) 84%  100%);
  --brand-gradient: linear-gradient(96deg in oklab,
      var(--brand-orange)  0%   18%,
      var(--brand-green)  40%,
      var(--brand-blue)   62%,
      var(--brand-yellow) 84%  100%);

  /* Proporción real de una carta: 63 × 88 mm */
  --card-ratio: 63 / 88;
  --card-radius: 4.5%;

  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;

  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, "Noto Sans JP", sans-serif;
  --font-num: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;

  /* Sombras cálidas: sobre fondo claro, una sombra neutra se ve gris sucio. */
  --shadow-1: 0 1px 2px rgb(47 42 37 / .07);
  --shadow-2: 0 4px 14px -4px rgb(47 42 37 / .13);
  --shadow-3: 0 22px 48px -14px rgb(47 42 37 / .28);

  /* Curvas con algo de peso: una carta no se mueve como un tooltip. */
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-fast: 140ms;
  --dur:      260ms;
  --dur-slow: 520ms;

  --wrap: 1280px;
  --header-h: 60px;

  color-scheme: light;
}

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }

  html { -webkit-text-size-adjust: 100%; }

  body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    min-height: 100dvh;
  }

  h1, h2, h3, h4, p, dl, dd, figure { margin: 0; }
  ul, ol { margin: 0; padding: 0; list-style: none; }
  img { display: block; max-width: 100%; height: auto; }
  button, input, select { font: inherit; color: inherit; }
  button { background: none; border: 0; cursor: pointer; }
  a { color: inherit; text-decoration: none; }

  /* El foco tiene que verse siempre. No se quita nunca. */
  :focus-visible {
    outline: 2px solid var(--primary-ink);
    outline-offset: 3px;
    border-radius: 4px;
  }
}

@layer base {
  .skip {
    position: absolute;
    left: var(--sp-4);
    top: -4rem;
    z-index: 100;
    padding: var(--sp-2) var(--sp-4);
    background: var(--secondary);
    color: #fff;
    border-radius: 8px;
    font-weight: 600;
    transition: top var(--dur) var(--ease-out);
  }
  .skip:focus { top: var(--sp-3); }

  kbd {
    font-family: var(--font-num);
    font-size: .72em;
    padding: .1em .4em;
    border: 1px solid var(--line);
    border-bottom-width: 2px;
    border-radius: 4px;
    background: var(--surface);
    color: var(--ink-2);
  }

  .visually-hidden {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
}

/* Se respeta de verdad: sin zoom, sin giro, sin holo, sin inclinación. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}