/* Ahora lo Oyes · tokens de marca. Generado a partir de marca/tokens.json. Si cambias un color o una medida, cámbialo en tokens.json y aquí. Tema claro por defecto; oscuro según el sistema (prefers-color-scheme) o forzado con data-theme="dark" en . */ @font-face { font-family: 'Gabarito'; src: url('fuentes/Gabarito-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Gabarito'; src: url('fuentes/Gabarito-ExtraBold.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: 'Atkinson Hyperlegible Next'; src: url('fuentes/AtkinsonHyperlegibleNext-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Atkinson Hyperlegible Next'; src: url('fuentes/AtkinsonHyperlegibleNext-Italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Atkinson Hyperlegible Next'; src: url('fuentes/AtkinsonHyperlegibleNext-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Noto Music'; src: url('fuentes/NotoMusic-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+25CC, U+2669-266F, U+1D000-1D0F5, U+1D100-1D126, U+1D129-1D1EA, U+1D200-1D245; } :root { color-scheme: light; --papel: #f7f7f3; --superficie: #ffffff; --superficie-2: #efefea; --linea: #dcdcd4; --linea-fuerte: #7f7f86; --tinta: #141414; --tinta-suave: #55555c; --subrayado: #ffd60a; --sobre-subrayado: #141414; --subrayado-suave: #fff3b0; --bien: #0b63b6; --bien-suave: #e3effb; --casi: #835500; --casi-suave: #fbf0d6; --mal: #b33a0a; --mal-suave: #fdeae0; --partitura: #ffffff; --partitura-tinta: #141414; --partitura-bien: #0b63b6; --partitura-casi: #835500; --partitura-mal: #b33a0a; --tecla-blanca: #ffffff; --tecla-negra: #141414; --enlace: var(--tinta); --shadow-sm: 0 1px 2px #1414140f, 0 2px 8px #1414140a; --anillo-foco: 0 0 0 2px #f7f7f3, 0 0 0 4px #141414; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-full: 9999px; --font-display: "Gabarito", ui-sans-serif, system-ui, sans-serif; --font-texto: "Atkinson Hyperlegible Next", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-musica: "Noto Music", "Segoe UI Symbol", "Apple Symbols", serif; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --papel: #111113; --superficie: #1b1b1f; --superficie-2: #25252b; --linea: #34343b; --linea-fuerte: #77777f; --tinta: #f2f2ec; --tinta-suave: #a6a6ae; --subrayado: #ffd60a; --sobre-subrayado: #141414; --subrayado-suave: #3a3212; --bien: #6cb4ff; --bien-suave: #13263a; --casi: #e8b64c; --casi-suave: #33280f; --mal: #ff8a4c; --mal-suave: #3a1d10; --partitura: #edede8; --partitura-tinta: #141414; --partitura-bien: #0b63b6; --partitura-casi: #835500; --partitura-mal: #b33a0a; --tecla-blanca: #e9e9e4; --tecla-negra: #0a0a0b; --enlace: var(--tinta); --shadow-sm: 0 1px 2px #00000080; --anillo-foco: 0 0 0 2px #111113, 0 0 0 4px #ffd60a; } } :root[data-theme="dark"] { color-scheme: dark; --papel: #111113; --superficie: #1b1b1f; --superficie-2: #25252b; --linea: #34343b; --linea-fuerte: #77777f; --tinta: #f2f2ec; --tinta-suave: #a6a6ae; --subrayado: #ffd60a; --sobre-subrayado: #141414; --subrayado-suave: #3a3212; --bien: #6cb4ff; --bien-suave: #13263a; --casi: #e8b64c; --casi-suave: #33280f; --mal: #ff8a4c; --mal-suave: #3a1d10; --partitura: #edede8; --partitura-tinta: #141414; --partitura-bien: #0b63b6; --partitura-casi: #835500; --partitura-mal: #b33a0a; --tecla-blanca: #e9e9e4; --tecla-negra: #0a0a0b; --enlace: var(--tinta); --shadow-sm: 0 1px 2px #00000080; --anillo-foco: 0 0 0 2px #111113, 0 0 0 4px #ffd60a; } /* Estilos de texto */ .display { font-family: var(--font-display); font-size: 56px; line-height: 60px; font-weight: 800; letter-spacing: -0.025em; } .titulo { font-family: var(--font-display); font-size: 36px; line-height: 42px; font-weight: 800; letter-spacing: -0.02em; } .subtitulo { font-family: var(--font-display); font-size: 24px; line-height: 30px; font-weight: 700; letter-spacing: -0.01em; } .cuerpo { font-family: var(--font-texto); font-size: 17px; line-height: 27px; font-weight: 400; } .cuerpo-fuerte { font-family: var(--font-texto); font-size: 17px; line-height: 27px; font-weight: 700; } .etiqueta { font-family: var(--font-texto); font-size: 14px; line-height: 20px; font-weight: 700; letter-spacing: 0.01em; } .nota { font-family: var(--font-texto); font-size: 13px; line-height: 18px; font-weight: 400; } .figura { font-family: var(--font-musica); font-size: 28px; line-height: 32px; font-weight: 400; }