/*
 * Porruni · web pública · tokens de marca.
 *
 * Espejo de apps/desktop/renderer/brand.css (guía: docs/MARCA.md). Mismos nombres y valores: lila, coral y crudo de
 * día; petróleo, menta y coral de noche. La web no puede depender de la carpeta de la app, así que copia los valores
 * y tests/porruni-web-landing.test.js comprueba que no se separan. Si cambias un color aquí, cámbialo en brand.css.
 *
 * El tema sigue al sistema; el conmutador de la cabecera fija data-theme="light" o "dark" en <html>.
 */

/* Texto: Manrope (OFL, assets/fonts/manrope-OFL.txt). Logotipo y títulos redondos: Fredoka (OFL). */
@font-face { font-family: "Porruni Sans"; src: url("../assets/fonts/manrope.ttf") format("truetype"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Porruni Rounded"; src: url("../assets/fonts/fredoka.ttf") format("truetype"); font-weight: 300 700; font-stretch: 75% 125%; font-display: swap; }

:root {
  color-scheme: light;

  /* Colores de Runi (ilustración, no texto). */
  --runi-coral: #fa6f68;
  --runi-coral-shade: #f05558;
  --runi-plum: #48153b;
  --runi-teal: #02585e;
  --runi-teal-deep: #0b474b;
  --runi-mint: #70d9c2;
  --runi-yellow: #fdca3d;
  --runi-lilac: #f2e9fd;
  --runi-cream: #fbf0dc;

  /* Superficies */
  --porruni-bg: #f7f2fd;
  --porruni-surface: #ffffff;
  --porruni-surface-soft: #efe6fa;
  --porruni-surface-strong: #e4d8f4;
  --porruni-line: #e1d5ef;
  --porruni-line-strong: #8a7d99;
  --porruni-cream: #fbf3e4;

  /* Tinta */
  --porruni-ink: #26142e;
  --porruni-ink-soft: #64576e;
  --porruni-logo-ink: #0b474b;

  /* Acción y foco */
  --porruni-action: #c7323f;
  --porruni-action-hover: #a92835;
  --porruni-on-action: #ffffff;
  --porruni-action-soft: #fde6e4;
  --porruni-action-ink: #a32a36;
  --porruni-focus: #cf3a45;

  /* Acentos (los *-ink valen para texto) */
  --porruni-coral-ink: #b0303c;
  --porruni-coral-soft: #ffe5e2;
  --porruni-mint-ink: #106653;
  --porruni-mint-soft: #dcf5ee;
  --porruni-yellow-ink: #7a5600;
  --porruni-yellow-soft: #fff2c9;
  --porruni-plum-ink: #5e1d4a;
  --porruni-plum-soft: #f6e8f1;

  /* Estados */
  --porruni-success-ink: #106653;
  --porruni-success-soft: #dcf5ee;
  --porruni-warning-ink: #7a5600;
  --porruni-warning-soft: #fff2c9;
  --porruni-danger-ink: #b0263a;
  --porruni-danger-soft: #ffe5e2;
  --porruni-provisional-ink: #62439a;
  --porruni-provisional-soft: #efe6fb;
  --porruni-provisional-line: #c4ade8;

  /* Tonos de asignatura: menta, coral, lila y amarillo */
  --porruni-tone-0: #dcf5ee;
  --porruni-tone-0-ink: #0f6352;
  --porruni-tone-1: #ffe5e2;
  --porruni-tone-1-ink: #a62f3b;
  --porruni-tone-2: #efe6fb;
  --porruni-tone-2-ink: #5f418f;
  --porruni-tone-3: #fff2c9;
  --porruni-tone-3-ink: #765300;

  /* Tipografía, forma y movimiento */
  --porruni-font-text: "Porruni Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --porruni-font-display: "Porruni Rounded", "Porruni Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --porruni-radius-s: 6px;
  --porruni-radius-m: 10px;
  --porruni-radius-l: 16px;
  --porruni-radius-xl: 24px;
  --porruni-radius-pill: 999px;
  --porruni-ease: cubic-bezier(.33, 0, .2, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --porruni-bg: #0c2230;
    --porruni-surface: #11293a;
    --porruni-surface-soft: #173749;
    --porruni-surface-strong: #1f4459;
    --porruni-line: #2a4b60;
    --porruni-line-strong: #6a8fa3;
    --porruni-cream: #193343;
    --porruni-ink: #ecf4f7;
    --porruni-ink-soft: #acc3cf;
    --porruni-logo-ink: #f2e9fd;
    --porruni-action: #70d9c2;
    --porruni-action-hover: #97e6d4;
    --porruni-on-action: #062a2c;
    --porruni-action-soft: #134049;
    --porruni-action-ink: #86e2cd;
    --porruni-focus: #8fe6d2;
    --porruni-coral-ink: #ff9d97;
    --porruni-coral-soft: #4a2a33;
    --porruni-mint-ink: #8fe6d2;
    --porruni-mint-soft: #134540;
    --porruni-yellow-ink: #ffd76a;
    --porruni-yellow-soft: #3b3215;
    --porruni-plum-ink: #f2bfe0;
    --porruni-plum-soft: #3a1b33;
    --porruni-success-ink: #8fe6c9;
    --porruni-success-soft: #123f3a;
    --porruni-warning-ink: #ffd76a;
    --porruni-warning-soft: #3b3215;
    --porruni-danger-ink: #ff9d9d;
    --porruni-danger-soft: #4a2128;
    --porruni-provisional-ink: #d6c3f7;
    --porruni-provisional-soft: #33284d;
    --porruni-provisional-line: #6d5a99;
    --porruni-tone-0: #123f3a;
    --porruni-tone-0-ink: #94e6cf;
    --porruni-tone-1: #46242a;
    --porruni-tone-1-ink: #ffb1ab;
    --porruni-tone-2: #33284d;
    --porruni-tone-2-ink: #d6c3f7;
    --porruni-tone-3: #3b3215;
    --porruni-tone-3-ink: #f6d36d;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --porruni-bg: #0c2230;
  --porruni-surface: #11293a;
  --porruni-surface-soft: #173749;
  --porruni-surface-strong: #1f4459;
  --porruni-line: #2a4b60;
  --porruni-line-strong: #6a8fa3;
  --porruni-cream: #193343;
  --porruni-ink: #ecf4f7;
  --porruni-ink-soft: #acc3cf;
  --porruni-logo-ink: #f2e9fd;
  --porruni-action: #70d9c2;
  --porruni-action-hover: #97e6d4;
  --porruni-on-action: #062a2c;
  --porruni-action-soft: #134049;
  --porruni-action-ink: #86e2cd;
  --porruni-focus: #8fe6d2;
  --porruni-coral-ink: #ff9d97;
  --porruni-coral-soft: #4a2a33;
  --porruni-mint-ink: #8fe6d2;
  --porruni-mint-soft: #134540;
  --porruni-yellow-ink: #ffd76a;
  --porruni-yellow-soft: #3b3215;
  --porruni-plum-ink: #f2bfe0;
  --porruni-plum-soft: #3a1b33;
  --porruni-success-ink: #8fe6c9;
  --porruni-success-soft: #123f3a;
  --porruni-warning-ink: #ffd76a;
  --porruni-warning-soft: #3b3215;
  --porruni-danger-ink: #ff9d9d;
  --porruni-danger-soft: #4a2128;
  --porruni-provisional-ink: #d6c3f7;
  --porruni-provisional-soft: #33284d;
  --porruni-provisional-line: #6d5a99;
  --porruni-tone-0: #123f3a;
  --porruni-tone-0-ink: #94e6cf;
  --porruni-tone-1: #46242a;
  --porruni-tone-1-ink: #ffb1ab;
  --porruni-tone-2: #33284d;
  --porruni-tone-2-ink: #d6c3f7;
  --porruni-tone-3: #3b3215;
  --porruni-tone-3-ink: #f6d36d;
}