/* ==============================================================================
QUELL-CORE v1.0.0
A reference theme sheet for quell brands.
This file demonstrates every legitimate override surface that quell-core.css exposes.
Use it as a starting point for your own design system token sheet.
Load order (always load quell-core.css first)
==============================================================================
<-- this file
How overrides work
==============================================================================
Surface A - Token override Re-declare a --custom-prop on :root.
This file is outside any @layer, so the
cascade picks these values over quell-core.css
tokens layer unconditionally.
Surface B - Layer append Re-open a named quell-core.css layer with
@layer baseline { } and add or change
rules inside it.
Surface C - Un-layered rules Write any selector outside an @layer.
It automatically beats every quell-core.css layer
regardless of specificity.
You never need !important.
============================================================================== */
/* ==============================================================================
QUELL-CORE v1.0.0
Hoja de tema de referencia para marcas quell.
Este archivo demuestra cada superficie de anulación legítima que expone quell-core.css.
Úsalo como punto de partida para tu propia hoja de tokens de sistema de diseño.
Orden de carga (siempre carga quell-core.css primero)
==============================================================================
<-- este archivo
Cómo funcionan las anulaciones
==============================================================================
Superficie A - Anulación de tokens Declara de nuevo una --custom-prop en :root.
Este archivo está fuera de cualquier @layer, por lo que la
cascada elige estos valores sobre la capa
ghost_tokens de quell-core.css incondicionalmente.
Superficie B - Anexo de capa Reabre una capa nombrada de quell-core.css con
@layer baseline { } y añade o cambia
reglas dentro de ella.
Superficie C - Reglas sin capa Escribe cualquier selector fuera de un @layer.
Supera automáticamente a cada capa de quell-core.css
independientemente de la especificidad.
Nunca necesitas !important.
============================================================================== */
/* ==============================================================================
SURFACE A | Token Override
==============================================================================
Re-declare only the tokens you want to change. Every token you omit
continues to resolve from quell-base.css ghost_tokens layer.
These declarations are NOT inside any @layer, so they win the cascade over
all layered styles regardless of source order or specificity.
============================================================================== */
/* @font-face declarations
==============================================================================
Load before all other rules so font tokens resolve immediately.
quell-light.css uses three variable fonts: Nunito (body), Fraunces (headings),
JetBrains Mono (code). Adjust src paths to match your asset structure.
============================================================================== */
/* ==============================================================================
SUPERFICIE A | Anulación de Tokens
==============================================================================
Declara de nuevo solo los tokens que desees cambiar. Cada token que omitas
continuará resolviéndose desde la capa ghost_tokens de quell-base.css[cite: 1].
Estas declaraciones NO están dentro de ninguna @layer, por lo que ganan la cascada sobre
todos los estilos en capas, independientemente del orden de origen o especificidad[cite: 1].
============================================================================== */
/* Declaraciones @font-face
==============================================================================
Cárgalas antes de todas las demás reglas para que los tokens de fuente se resuelvan de inmediato.
quell-light.css utiliza tres fuentes variables: Nunito (cuerpo), Fraunces (encabezados),
JetBrains Mono (código). Ajusta las rutas src para que coincidan con la estructura de tus recursos.
============================================================================== */
/* Headings (secondary) | Fraunces */
@font-face {
font-family: "Fraunces";
src: url(/assets/fonts/Fraunces-VariableFont_SOFT-WONK-opsz-wght.ttf);
font-weight: 100 900;
font-display: swap;
font-style: normal;
}
@font-face {
font-family: "Fraunces";
src: url(/assets/fonts/Fraunces-Italic-VariableFont_SOFT-WONK-opsz-wght.ttf);
font-weight: 100 900;
font-display: swap;
font-style: italic;
}
/* Body (primary) | Nunito */
@font-face {
font-family: "Nunito";
src: url(/assets/fonts/Nunito-VariableFont_wght.ttf);
font-weight: 300 900;
font-display: swap;
font-style: normal;
}
@font-face {
font-family: "Nunito";
src: url(/assets/fonts/Nunito-Italic-VariableFont_wght.ttf);
font-weight: 300 900;
font-display: swap;
font-style: italic;
}
/* Code (pre, kbd, samp) | JetBrains Mono */
@font-face {
font-family: "JetBrains Mono";
src: url(/assets/fonts/JetBrainsMono-VariableFont_wght.ttf);
font-weight: 300 800;
font-display: swap;
font-style: normal;
}
@font-face {
font-family: "JetBrains Mono";
src: url(/assets/fonts/JetBrainsMono-Italic-VariableFont_wght.ttf);
font-weight: 300 800;
font-display: swap;
font-style: italic;
}
:root {
/* == Brand typography ======================================================== */
/*
* quell-light uses Nunito as the primary (body) font and Fraunces for headings.
* Both are variable fonts loaded via @font-face above.
* Full fallback stacks are preserved for environments where the font files
* are not available.
*/
/*
* quell-light utiliza Nunito como fuente primaria (cuerpo) y Fraunces para los encabezados.
* Ambas son fuentes variables cargadas a través de @font-face arriba.
* Se preservan las pilas completas de fuentes de respaldo para entornos donde los archivos
* de fuentes no estén disponibles.
*/
--font-fam-primary: "Nunito", "Calibri", "Trebuchet MS", sans-serif;
--font-fam-secondary: "Fraunces", "Georgia", "Garamond", "Times New Roman", serif;
/* == Brand accent =========================================================== */
/*
* quell-light accent: a vivid red-coral (#ff3d40 / oklch 65.735% 0.2289 25.532).
* Used by buttons, links on hover, focus rings, alert borders.
* The accent-hover uses the oklch channel engine at 80% opacity to produce
* a slightly muted variant consistent with how quell-light handles hover states
* across btn-accent and btn-outline-accent.
*
* WCAG note: accent on --color-surface (#f2f2f4) passes AA for large text (3:1+).
* For small text on white use --color-primary (#191970) instead.
*/
/*
* acento de quell-light: un rojo coral vívido (#ff3d40 / oklch 65.735% 0.2289 25.532).
* Se utiliza en botones, enlaces al pasar el cursor, anillos de enfoque y bordes de alerta.
* El estado hover del acento utiliza el motor de canales oklch al 80% de opacidad para producir
* una variante ligeramente atenuada, consistente con la forma en que quell-light maneja los estados
* hover en btn-accent y btn-outline-accent.
*
* Nota de WCAG: el acento sobre --color-surface (#f2f2f4) cumple con el nivel AA para texto grande (3:1+).
* Para texto pequeño sobre fondo blanco, utiliza --color-primary (#191970) en su lugar.
*/
--color-accent: #ff3d40; /* oklch(65.735% 0.2289 25.532) */
--color-accent-hover: oklch(65.735% 0.2289 25.532 / 0.8); /* 80% opacity variant */
--color-accent-subtle: rgba(255, 61, 64, 0.1); /* ghost tint for hover rows */
--shadow-focus: 0 0 0 3px rgba(255, 61, 64, 0.35); /* matches accent hue */
/* == Surface & text ========================================================= */
/*
* quell-light light-mode palette.
* --color-surface #f2f2f4 — card and input backgrounds
* --color-surface-subtle / raised map to bg-light and surface-dark
* Text roles follow quell-light naming: primary = navy heading, body = secondary slate
*/
/*
* Paleta de modo claro de quell-light.
* --color-surface #f2f2f4 — fondos de tarjetas e inputs
* --color-surface-subtle / raised se mapean a bg-light y surface-dark
* Los roles de texto siguen la nomenclatura de quell-light: primary = encabezado navy, body = pizarra secondary
*/
--color-surface: #f2f2f4; /* oklch(96.172% 0.00276 285.761) */
--color-surface-subtle: #f4f7f9; /* --color-bg-light */
--color-surface-raised: #f2f2f4; /* same as surface; no elevation delta in light mode */
--color-text-primary: #191970; /* --color-primary; heading navy */
--color-text-secondary: #35454f; /* --color-secondary; body slate */
--color-text-muted: #616b7e; /* --color-muted-grey */
--color-text-inverse: #f2f2f4; /* --color-text-inverse; on dark surfaces */
--color-border: #dddddd; /* --color-light-grey */
--color-border-strong: #cccccc; /* --color-grey */
/* == Radii | Rounded consumer personality =================================== */
/*
* quell-light uses a friendly rounded scale:
* sm 0.25rem — tight elements (badges, alert borders)
* md 0.5rem — inputs, buttons, cards
* lg 0.75rem — modals, drawers
* xl 1rem — large surface panels
*
* To switch personalities:
* Sharp (enterprise): --radius-sm: 0; --radius-md: 0; --radius-lg: 2px;
* Pill-heavy (modern): --radius-sm: 0.5rem; --radius-md: 0.75rem; --radius-lg: 1.25rem;
*/
/*
* quell-light utiliza una escala redondeada amigable:
* sm 0.25rem — elementos ceñidos (insignias, bordes de alerta)
* md 0.5rem — inputs, botones, tarjetas
* lg 0.75rem — modales, paneles deslizables (drawers)
* xl 1rem — paneles de superficie grande
*
* Para cambiar de personalidad:
* Cortante (empresarial): --radius-sm: 0; --radius-md: 0; --radius-lg: 2px;
* Tipo píldora (moderno): --radius-sm: 0.5rem; --radius-md: 0.75rem; --radius-lg: 1.25rem;
*/
/* Bridge: align quell-base.css --radius-* tokens to the quell-light scale */
--radius-sm: 0.25rem;
--radius-md: 0.5rem;
--radius-lg: 0.75rem;
--radius-xl: 1rem;
--border-radius-sm: 0.25rem;
--border-radius-md: 0.5rem;
--border-radius-lg: 0.75rem;
--border-radius-xl: 1rem;
/* == Motion | Normal interaction speed ====================================== */
/*
* quell-light defines three speed steps:
* fast 0.15s — micro-interactions (hover, toggle)
* normal 0.3s — component transitions (nav open, card reveal)
* slow 0.5s — page-level animations (fade-in, slide-up)
*
* To slow down (deliberate brand): --duration-fast: 200ms; --duration-base: 400ms;
* To speed up (snappy brand): --duration-fast: 100ms; --duration-base: 180ms;
*/
/*
* quell-light define tres pasos de velocidad:
* fast 0.15s — microinteracciones (hover, selectores alternables/toggle)
* normal 0.3s — transiciones de componentes (apertura de menú, despliegue de tarjeta)
* slow 0.5s — animaciones a nivel de página (desvanecimiento/fade-in, deslizamiento/slide-up)
*
* Para desacelerar (marca deliberada): --duration-fast: 200ms; --duration-base: 400ms;
* Para acelerar (marca instantánea): --duration-fast: 100ms; --duration-base: 180ms;
*/
--duration-fast: 0.15s;
--duration-base: 0.3s;
--duration-slow: 0.5s;
--ease-default: ease-in-out;
/* == Shadows ================================================================ */
/*
* quell-light builds shadows from spacing tokens and the shadow-black oklch
* channel engine (oklch 10.668% 0.00001 271.152) with alpha-scale steps.
* Mapped to the three quell-core shadow levels used across components.
*
* quell-light construye sombras a partir de tokens de espaciado y el motor
* de canales oklch para sombras negras (oklch 10.668% 0.00001 271.152) con
* pasos de escala alfa. Mapeado a los tres niveles de sombra de quell-core
* utilizados en todos los componentes.
*/
--shadow-sm:
0 0.375rem 0.5625rem -0.25rem oklch(10.668% 0.00001 271.152 / 0.1);
--shadow-md:
0 0.5625rem 0.843rem -0.375rem oklch(10.668% 0.00001 271.152 / 0.125);
} /* end :root token overrides */
/* =============================================================================
SURFACE A | (continued) - Dark mode variant
=============================================================================
Uses prefers-color-scheme to provide system-level dark mode.
Swap to a [data-theme="dark"] attribute if your UI needs a manual toggle:
[data-theme="dark"] { ... }
============================================================================= */
/* =============================================================================
SUPERFICIE A | (continuación) - Variante de modo oscuro
=============================================================================
Utiliza prefers-color-scheme para proveer un modo oscuro a nivel de sistema.
Cambia a un atributo [data-theme="dark"] si tu UI necesita un conmutador manual:
[data-theme="dark"] { ... }
============================================================================= */
@media (prefers-color-scheme: dark) {
:root {
/*
* quell-light dark palette — surface-dark and bg-dark tokens.
* Primary dark: #05052e (oklch 15.77% 0.08029 272.364)
* Surface dark: #121245 (oklch 22.269% 0.08029 272.364)
* Text inverts to matte-white and muted-grey scale.
*/
/*
* Paleta oscura de quell-light — tokens surface-dark y bg-dark.
* Oscuro primario: #05052e (oklch 15.77% 0.08029 272.364)
* Oscuro de superficie: #121245 (oklch 22.269% 0.08029 272.364)
* El texto se invierte a una escala de blanco mate y gris atenuado.
*/
--color-surface: #121245; /* --color-surface-dark */
--color-surface-subtle: #05052e; /* --color-bg-dark */
--color-surface-raised: #1e1e5a; /* one step lighter than surface-dark */
--color-text-primary: #f2f2f4; /* --color-text-inverse */
--color-text-secondary: #eeeeee; /* --color-lighter-grey */
--color-text-muted: #616b7e; /* --color-muted-grey unchanged */
--color-text-inverse: #05052e; /* --color-primary-dark */
--color-border: #35428f; /* --color-primary-light; subtle on dark */
--color-border-strong: #4d616e; /* --color-secondary-light */
--color-accent-subtle: rgba(255, 61, 64, 0.125); /* ghost tint on dark surface */
--shadow-sm:
0 0.375rem 0.5625rem -0.25rem oklch(10.668% 0.00001 271.152 / 0.3);
--shadow-md:
0 0.5625rem 0.843rem -0.375rem oklch(10.668% 0.00001 271.152 / 0.4),
0 0.25rem 0.5rem -0.375rem oklch(10.668% 0.00001 271.152 / 0.3);
--shadow-focus: 0 0 0 3px rgba(255, 61, 64, 0.5); /* accent at higher opacity on dark */
}
}
/* =================================================================================
SURFACE B | Layer Append - baseline
================================================================================= */
/* =================================================================================
SUPERFICIE B | Anexo de Capa - baseline
================================================================================= */
@layer baseline {
/* ===============================================================================
* Flow spacing via the lobotomised owl selector.
* Uses --spacing-md (0.843rem) from quell-light's 1.5x spacing scale.
* Uncomment to opt in to automatic vertical rhythm between flow siblings.
================================================================================= */
/*:where(* + *:not(br, dt, dd, li, tr, td, th, option, optgroup)) {
Intentionally commented out: opt in only if you want flow spacing.
Uses quell-light spacing-md (0.843rem) for the rhythm value.
margin-block-start: var(--spacing-md);
} */
/* ===============================================================================
* Smooth scrolling.
* quell-light baseline handles prefers-reduced-motion globally;
* this is a behavioral complement, not a token value.
================================================================================= */
/* ===============================================================================
* Espaciado de flujo mediante el selector del búho lobotomizado.
* Utiliza --spacing-md (0.843rem) de la escala de espaciado 1.5x de quell-light.
* Descomenta para activar el ritmo vertical automático entre elementos hermanos de flujo.
================================================================================= */
/*:where(* + *:not(br, dt, dd, li, tr, td, th, option, optgroup)) {
Intencionalmente comentado: actívalo solo si deseas espaciado de flujo.
Utiliza spacing-md (0.843rem) de quell-light para el valor del ritmo.
margin-block-start: var(--spacing-md);
} */
/* ===============================================================================
* Desplazamiento suave (smooth scrolling).
* La base de quell-light maneja prefers-reduced-motion a nivel global;
* este es un complemento de comportamiento, no un valor de token.
================================================================================= */
:where(html) {
scroll-behavior: smooth;
}
/*
* Anchor offset — prevents sticky .navbar (padding: spacing-xs spacing-md)
* from obscuring jump targets. quell-light navbar has ~spacing-lg total height.
* Set this to match your sticky nav's computed height.
*
* :where(html) { scroll-padding-block-start: var(--spacing-xxl); } */ /*2.848rem*/
/*
* Desplazamiento de anclaje (anchor offset) — evita que una barra de navegación (.navbar)
* fija/sticky (padding: spacing-xs spacing-md) oculte los destinos de los enlaces internos (jump targets).
* La barra de navegación de quell-light tiene una altura total aproximada de ~spacing-lg.
* Establece esto para que coincida con la altura calculada de tu barra de navegación fija.
*
* :where(html) { scroll-padding-block-start: var(--spacing-xxl); } */ /*2.848rem*/
}
/* ================================================================================
SURFACE B | Layer Append - forms
================================================================================ */
/* ================================================================================
SUPERFICIE B | Anexo de Capa - forms
================================================================================ */
@layer forms {
/* ==============================================================================
* Visual form styles built on top of quell-core normalization.
* Mirrors the quell-light input contract: full-width, surface background,
* border with hover/focus states, using the accent color for focus rings.
*
* Token mapping:
* Estilos visuales de formularios construidos sobre la normalización de quell-core.
* Refleja el contrato de inputs de quell-light: ancho completo, fondo de superficie,
* borde con estados hover/focus, utilizando el color de acento para los anillos de enfoque.
*
* Mapeo de tokens:
* padding → --spacing-sm / --spacing-md (0.5625rem / 0.843rem)
* background → --color-surface (#f2f2f4)
* border → --border-width-sm (0.0625rem / 1px)
* border-color → --color-border (#dddddd)
* border-radius → --border-radius-md (0.5rem)
* focus outline → --color-accent (#ff3d40)
* focus ring → --shadow-focus (accent at 35% opacity)
================================================================================ */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="hidden"]),
select,
textarea) {
display: block;
width: 100%;
padding-block: var(--spacing-sm); /* 0.5625rem */
padding-inline: var(--spacing-md); /* 0.843rem */
background: var(--color-surface); /* #f2f2f4 */
color: var(--color-text-primary);
border: var(--border-width-sm, 0.0625rem) solid var(--color-border);
border-radius: var(--border-radius-md, 0.5rem);
transition:
border-color var(--duration-fast, 0.15s) var(--ease-default, ease-in-out),
box-shadow var(--duration-fast, 0.15s) var(--ease-default, ease-in-out);
&:hover:not([disabled]) {
border-color: var(--color-border-strong); /* #cccccc */
}
&:focus-visible {
outline: none;
border-color: var(--color-accent); /* #ff3d40 */
box-shadow: var(--shadow-focus); /* 0 0 0 3px rgba(255,61,64,0.35) */
}
}
/*
* Placeholder — muted-grey (#616b7e) for legibility contrast.
* Not wrapped in :where() because ::placeholder is a pseudo-element
* and :where(input)::placeholder doesn't match in all browsers.
*/
/*
* Marcador de posición (placeholder) — gris atenuado (#616b7e) para contraste de legibilidad.
* No se incluye en :where() porque ::placeholder es un pseudoelemento
* y :where(input)::placeholder no coincide en todos los navegadores.
*/
::placeholder {
color: var(--color-text-muted, #616b7e);
/* Firefox reduces placeholder opacity by default */
/* Firefox reduce la opacidad del marcador de posición por defecto */
opacity: 1;
}
}
/* =============================================================================
SURFACE B | Layer Append - utilities
============================================================================= */
/* =============================================================================
SUPERFICIE B | Anexo de Capa - utilities
============================================================================= */
@layer utilities {
/* == Screen-reader only ===================================================== */
/* == Solo para lectores de pantalla ========================================= */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* == Not screen-reader only (reversal) ======================================= */
/* == No exclusivo para lectores de pantalla (reversión) ====================== */
.not-sr-only {
position: static;
width: auto;
height: auto;
padding: 0;
margin: 0;
overflow: visible;
clip: auto;
white-space: normal;
}
/* == Text truncation ======================================================== */
/* == Truncamiento de texto ================================================== */
.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* == Skip link (visually hidden, focus-reveal) ==============================
*
* Uses quell-light tokens throughout:
*
* Enlace de salto (oculto visualmente, se revela al enfocar) ================
*
* Utiliza tokens de quell-light en su totalidad:
* inset offset → --spacing-sm (0.5625rem)
* padding → --spacing-sm / --spacing-md
* border-radius → --border-radius-md (0.5rem)
* background → --color-accent (#ff3d40)
* color → --color-text-inverse (#f2f2f4)
* z-index → --z-index-overlay (1000)
*/
.skip-link {
position: absolute;
inset-block-start: var(--spacing-sm, 0.5625rem);
inset-inline-start: var(--spacing-sm, 0.5625rem);
z-index: var(--z-index-overlay, 1000);
padding: var(--spacing-sm, 0.5625rem) var(--spacing-md, 0.843rem);
border-radius: var(--border-radius-md, 0.5rem);
background: var(--color-accent, #ff3d40);
color: var(--color-text-inverse, #f2f2f4);
transform: translateY(-200%);
transition: transform var(--duration-fast, 0.15s) var(--ease-default, ease-in-out);
&:focus-visible {
transform: translateY(0);
/* bg/color contrast is the focus indicator */
/* el contraste de fondo/color es el indicador de enfoque */
outline: none;
}
}
}
/* ===================================================================================
SURFACE C | Unlayered Rules
===================================================================================
Any selector written outside an @layer automatically outranks every quell-core
layer, regardless of specificity. Use this for components that must win
without fighting the cascade.
=================================================================================== */
/* ===================================================================================
SUPERFICIE C | Reglas sin Capas (Unlayered Rules)
===================================================================================
Cualquier selector escrito fuera de un @layer supera automáticamente a todas las
capas de quell-core, independientemente de su especificidad. Utiliza esto para
componentes que deban ganar sin pelear contra la cascada.
=================================================================================== */
/*
* Card component — directly mirrors the quell-light .card implementation.
* Token mapping:
* Componente de Tarjeta (Card) — refleja directamente la implementación de .card de quell-light.
* Mapeo de tokens:
* width → --card-width (22.5rem) / --card-fluid-width (100%)
* background → --color-surface (#f2f2f4)
* border → --border-width-sm (0.0625rem) + --color-border (#dddddd)
* border-radius → --border-radius-md (0.5rem)
* box-shadow → --shadow-md
* padding → --spacing-lg (1.265rem)
*
* Specificity (0,1,0) — beats all quell-core layers.
* A downstream sheet can still override with another unlayered selector.
* Especificidad (0,1,0) — supera a todas las capas de quell-core.
* Una hoja de estilos descendente aún puede sobrescribirla con otro selector sin capas.
*/
.card {
width: var(--card-width, 22.5rem);
background: var(--color-surface, #f2f2f4);
border: var(--border-width-sm, 0.0625rem) solid var(--color-border, #dddddd);
border-radius: var(--border-radius-md, 0.5rem);
box-shadow: var(--shadow-md);
padding: var(--spacing-lg, 1.265rem);
}
/*
* Card header — matches quell-light.css .card-header.
* Border uses --color-primary-light (#35428f) to echo the navbar brand color.
*
* Encabezado de tarjeta (card header) — coincide con .card-header de quell-light.css.
* El borde utiliza --color-primary-light (#35428f) para reflejar el color de marca de la barra de navegación.
*/
.card-header {
padding: var(--spacing-xs, 0.375rem);
margin-bottom: var(--spacing-md, 0.843rem);
border-bottom: var(--border-width-sm, 0.0625rem) solid var(--color-primary-light, #35428f);
}
.card-body {
padding: var(--spacing-md, 0.843rem);
}
/* ==================================================================================
End of quell-core.css
================================================================================== */