/* * Tokens de diseño. Los valores y su justificación están en DESIGN.md. * * Hay dos niveles: * 1. Materiales (--material-*): los colores en sí, con valor fijo. Solo se usan * dentro de este archivo y en el ámbito de papel (css/components/paper.css). * 2. Roles (--color-*): para qué sirve cada color. Es lo único que usan los * componentes, y lo que cambia entre el tema de día y el de noche. */ @layer tokens { :root { /* ── Materiales ────────────────────────────────────────────────────── */ --material-day-desk: oklch(0.972 0.012 300); /* #f7f4fd · escritorio de día */ --material-night-desk: oklch(0.19 0.042 292); /* #141025 · escritorio de noche */ --material-paper: oklch(1 0 0); /* #ffffff · papel a plena luz */ --material-paper-dim: oklch(0.945 0.012 300); /* #eeebf4 · papel con la luz baja */ --material-ink: oklch(0.25 0.08 292); /* #241844 · tinta de escribir */ --material-ink-soft: oklch(0.45 0.055 292); /* #565072 · tinta rebajada */ --material-moon: oklch(0.94 0.015 300); /* #ece9f4 · texto claro sobre la noche */ --material-moon-soft: oklch(0.78 0.04 296); /* #b9b3cf · texto secundario sobre la noche */ --material-print: oklch(0.24 0.02 292); /* #1f1e28 · texto impreso */ --material-stamp: oklch(0.47 0.2 293); /* #6435be · tinta de sello */ --material-stamp-deep: oklch(0.4 0.19 293); /* #511fa2 · sello, más cargado */ --material-stamp-bright: oklch(0.53 0.21 293); /* #7545d7 · sello sobre la noche */ --material-stamp-brighter: oklch(0.58 0.2 293); /* #8359e3 · sello sobre la noche, resaltado */ --material-lavender: oklch(0.78 0.105 295); /* #bcaaf4 · violeta legible sobre la noche */ --material-tinta: oklch(0.28 0.115 292); /* #2d175b · banda de tinta */ --material-tinta-night: oklch(0.3 0.12 292); /* #321b63 · banda de tinta sobre la noche */ --material-mist: oklch(0.84 0.05 296); /* #cdc5e8 · texto secundario sobre la tinta */ --material-line: oklch(0.87 0.03 296); /* #d5d1e6 · línea fina de día */ --material-line-night: oklch(0.36 0.06 292); /* #3e375a · línea fina de noche */ --material-line-tinta: oklch(0.45 0.11 292); /* #57488d · línea fina sobre la tinta */ --material-pencil: oklch(0.54 0.21 27); /* #cd171e · lápiz rojo */ --material-highlight: oklch(0.92 0.15 100); /* #fce765 · resaltador */ --material-shadow-day: 0 1px 2px oklch(0.25 0.08 292 / 0.08), 0 18px 40px -12px oklch(0.25 0.08 292 / 0.22); --material-shadow-day-low: 0 1px 2px oklch(0.25 0.08 292 / 0.06), 0 8px 20px -10px oklch(0.25 0.08 292 / 0.16); --material-shadow-night: 0 1px 2px oklch(0.1 0.03 292 / 0.5), 0 18px 40px -12px oklch(0.1 0.03 292 / 0.75); --material-shadow-night-low: 0 1px 2px oklch(0.1 0.03 292 / 0.45), 0 8px 20px -10px oklch(0.1 0.03 292 / 0.6); /* ── Roles: tema de día ─────────────────────────────────────────────── */ color-scheme: light; --color-desk: var(--material-day-desk); /* fondo de la página */ --color-paper: var(--material-paper); /* fondo de las hojas */ --color-ink: var(--material-ink); /* texto principal */ --color-ink-soft: var(--material-ink-soft); /* texto secundario y bordes de controles */ --color-print: var(--material-print); /* texto impreso dentro de las hojas */ --color-accent: var(--material-stamp); /* rellenos de acción: botones, sello */ --color-accent-strong: var(--material-stamp-deep); /* botón al pasar el cursor */ --color-accent-text: var(--material-stamp); /* acento como texto o trazo: enlaces, números */ --color-on-accent: var(--material-paper); /* texto sobre un relleno de acento */ --color-tinta: var(--material-tinta); /* fondo de la banda oscura */ --color-on-tinta: var(--material-day-desk); /* texto sobre la banda oscura */ --color-on-tinta-soft: var(--material-mist); /* texto secundario sobre la banda */ --color-line: var(--material-line); /* líneas finas */ --color-line-on-tinta: var(--material-line-tinta); /* líneas finas sobre la banda */ --color-pencil: var(--material-pencil); /* observaciones a lápiz */ --color-highlight: var(--material-highlight); /* resaltador */ --color-focus: var(--color-accent-text); /* anillo de foco */ /* * Pestaña en reposo: papel que deja ver un poco del escritorio. Se mezcla en * oklab y no en oklch: el blanco no tiene tono, y al mezclar tonos el resultado * tiraba a rosa. */ --color-tab-idle: color-mix(in oklab, var(--color-paper) 66%, var(--color-desk)); --shadow-paper: var(--material-shadow-day); --shadow-paper-low: var(--material-shadow-day-low); /* ── Tipografía ────────────────────────────────────────────────────── */ --font-brand: "Archivo", "Archivo Respaldo", "Helvetica Neue", Arial, sans-serif; --font-display: "Archivo", "Archivo Respaldo Titulares", "Helvetica Neue", Arial, sans-serif; --font-document: "Tinos", "Times New Roman", Times, serif; --font-hand: "Mynerve", "Segoe Print", "Bradley Hand", cursive; --width-display: 110%; /* ancho de Archivo en titulares */ --width-condensed: 62%; /* números de etapa */ --width-stamp: 66%; /* sello */ --weight-regular: 400; --weight-medium: 550; --weight-strong: 650; --weight-stamp: 800; --leading-display: 1.03; --leading-heading: 1.12; --leading-snug: 1.4; --leading-body: 1.55; --leading-document: 1.5; --tracking-display: -0.018em; /* Tamaños fijos de interfaz: no crecen con la ventana. */ --text-ui: 1rem; /* 16 px · navegación, botón compacto, mensaje */ --text-brand: 1.1875rem; /* 19 px · nombre de la marca */ /* Escala fluida entre 320 y 1440 px de ventana. */ --step--1: clamp(0.875rem, 0.8571rem + 0.0893vw, 0.9375rem); /* 14 → 15 px */ --step-0: clamp(1.0625rem, 1.0268rem + 0.1786vw, 1.1875rem); /* 17 → 19 px */ --step-1: clamp(1.25rem, 1.1786rem + 0.3571vw, 1.5rem); /* 20 → 24 px */ --step-2: clamp(1.4375rem, 1.3125rem + 0.625vw, 1.875rem); /* 23 → 30 px */ --step-3: clamp(1.75rem, 1.5357rem + 1.0714vw, 2.5rem); /* 28 → 40 px */ --step-4: clamp(2rem, 1.6429rem + 1.7857vw, 3.25rem); /* 32 → 52 px */ --step-5: clamp(2.25rem, 1.7143rem + 2.6786vw, 4.125rem); /* 36 → 66 px */ /* ── Espaciado (base 4) ────────────────────────────────────────────── */ --space-3xs: 0.25rem; /* 4 px */ --space-2xs: 0.5rem; /* 8 px */ --space-xs: 0.75rem; /* 12 px */ --space-s: 1rem; /* 16 px */ --space-m: 1.5rem; /* 24 px */ --space-l: clamp(2rem, 1.8571rem + 0.7143vw, 2.5rem); /* 32 → 40 px */ --space-xl: clamp(3rem, 2.5714rem + 2.1429vw, 4.5rem); /* 48 → 72 px */ --space-2xl: clamp(4.5rem, 3.7857rem + 3.5714vw, 7rem); /* 72 → 112 px */ --space-3xl: clamp(6rem, 4.7143rem + 6.4286vw, 10.5rem); /* 96 → 168 px */ --gutter: clamp(1.25rem, 0.75rem + 2.5vw, 3rem); /* 20 → 48 px */ --content-max: 73.75rem; /* 1180 px */ --header-height: 4.25rem; /* 68 px */ --measure: 65ch; /* largo de línea cómodo */ /* ── Forma ─────────────────────────────────────────────────────────── */ --radius-mark: 0.125rem; /* 2 px · marcas */ --radius-paper: 0.1875rem; /* 3 px · hojas */ --radius-control: 0.625rem; /* 10 px · botones */ /* ── Movimiento ────────────────────────────────────────────────────── */ --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); --duration-fast: 140ms; --duration-base: 260ms; } /* * ── Roles: tema de noche ─────────────────────────────────────────────── * El escritorio se oscurece; las hojas siguen siendo papel, con la luz más baja. * * El tema se decide así: * - sin data-theme en , manda la preferencia del dispositivo; * - data-theme="light" o "dark" la sustituyen (lo pone el selector del pie). * CSS no permite compartir declaraciones entre una consulta de medios y un * selector, así que el bloque está dos veces: los dos deben decir lo mismo. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --color-desk: var(--material-night-desk); --color-paper: var(--material-paper-dim); --color-ink: var(--material-moon); --color-ink-soft: var(--material-moon-soft); --color-accent: var(--material-stamp-bright); --color-accent-strong: var(--material-stamp-brighter); --color-accent-text: var(--material-lavender); --color-tinta: var(--material-tinta-night); --color-line: var(--material-line-night); --shadow-paper: var(--material-shadow-night); --shadow-paper-low: var(--material-shadow-night-low); } } :root[data-theme="dark"] { color-scheme: dark; --color-desk: var(--material-night-desk); --color-paper: var(--material-paper-dim); --color-ink: var(--material-moon); --color-ink-soft: var(--material-moon-soft); --color-accent: var(--material-stamp-bright); --color-accent-strong: var(--material-stamp-brighter); --color-accent-text: var(--material-lavender); --color-tinta: var(--material-tinta-night); --color-line: var(--material-line-night); --shadow-paper: var(--material-shadow-night); --shadow-paper-low: var(--material-shadow-night-low); } /* * Respaldo para navegadores anteriores a 2023, que no entienden oklch(). * Son los mismos materiales en hexadecimal (equivalencias en DESIGN.md). */ @supports not (color: oklch(0 0 0)) { :root { --material-day-desk: #f7f4fd; --material-night-desk: #141025; --material-paper: #ffffff; --material-paper-dim: #eeebf4; --material-ink: #241844; --material-ink-soft: #565072; --material-moon: #ece9f4; --material-moon-soft: #b9b3cf; --material-print: #1f1e28; --material-stamp: #6435be; --material-stamp-deep: #511fa2; --material-stamp-bright: #7545d7; --material-stamp-brighter: #8359e3; --material-lavender: #bcaaf4; --material-tinta: #2d175b; --material-tinta-night: #321b63; --material-mist: #cdc5e8; --material-line: #d5d1e6; --material-line-night: #3e375a; --material-line-tinta: #57488d; --material-pencil: #cd171e; --material-highlight: #fce765; --material-shadow-day: 0 1px 2px rgb(36 24 68 / 0.08), 0 18px 40px -12px rgb(36 24 68 / 0.22); --material-shadow-day-low: 0 1px 2px rgb(36 24 68 / 0.06), 0 8px 20px -10px rgb(36 24 68 / 0.16); --material-shadow-night: 0 1px 2px rgb(4 2 11 / 0.5), 0 18px 40px -12px rgb(4 2 11 / 0.75); --material-shadow-night-low: 0 1px 2px rgb(4 2 11 / 0.45), 0 8px 20px -10px rgb(4 2 11 / 0.6); --color-tab-idle: var(--color-paper); } } }