/* Tema "Candy Pop" — tokens del handoff + las clases del design system que usa el prototipo. */ :root { --color-bg: #fffdf5; --color-text: #21203a; --color-accent: #ff5e99; --color-accent-600: #ef4b89; --color-accent-700: #d63677; --color-divider: #21203a; --color-neutral-100: #fff6e8; --color-neutral-300: #e8e3d8; --color-neutral-400: #c9c2b2; --color-neutral-700: #6f6a80; --color-neutral-800: #454158; --font-heading: 'Fredoka', sans-serif; --font-heading-weight: 800; --font-body: 'Nunito', sans-serif; } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-size: 15px; line-height: 1.55; font-weight: 400; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); } a { color: var(--color-accent-700); text-underline-offset: 3px; } a:hover { color: var(--color-accent); } /* El anillo de foco se marca con .kb en (lo pone Tab, lo quita el mouse): el re-render completo destruye el nodo enfocado y :focus-visible no sobrevive. */ :focus { outline: none; } .kb :focus { outline: 2px solid var(--color-accent); outline-offset: 2px; } ::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); } /* — rules — */ .hr { height: 2px; border: 0; margin: 16px 0; background: #21203a; } /* — buttons — */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; text-decoration: none; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 14px; line-height: 1.2; padding: 8px 14.4px; border-radius: 14px; text-transform: none; text-align: center; border: 2px solid #21203a; box-shadow: 3px 3px 0 #21203a; background: #fff; color: #21203a; } .btn:active { box-shadow: 1px 1px 0 #21203a; transform: translate(2px, 2px); } .btn:disabled { opacity: 0.45; cursor: not-allowed; } .btn-primary { background: #ffd21e; color: #21203a; } .btn-primary:hover { background: #ffc400; } /* el tema sobrescribe el color del ghost con el de .btn (#21203a) */ .btn-ghost { padding-inline: 4px; } .btn-secondary:hover, .btn-ghost:hover { background: #fff0f6; } .btn-block { width: 100%; margin-top: 8px; justify-content: flex-start; text-align: left; } /* — forms — */ .input { width: 100%; min-height: 36px; padding: 6px 10px; font: inherit; font-size: 14px; caret-color: var(--color-accent); border-radius: 14px; border: 2px solid #21203a; background: #fff; color: #21203a; } .input:hover { border-color: color-mix(in srgb, #21203a 45%, transparent); } .input:focus { border-color: var(--color-accent); outline: 2px solid var(--color-accent); outline-offset: 0; } /* — tags — */ .tag { display: inline-flex; align-items: center; font-size: 11px; letter-spacing: 0.02em; padding: 3px 10px; border-radius: 999px; border: 2px solid #21203a; background: #ffd21e; color: #21203a; } /* — swatches — */ .sw { width: 32px; height: 32px; padding: 0; outline-offset: 2px; cursor: pointer; } .kb .sw:focus { box-shadow: 0 0 0 3px #21203a; } /* — teclas del llavero: se hunden al pasar el mouse — */ .cap { transition: transform 0.09s ease; cursor: pointer; } .cap:hover { transform: translateZ(8px) !important; } .cap:active { transform: translateZ(2px) !important; }