/* ========================================================================== Asiste 2026 — "La agenda viva" — design tokens (flag features.rediseno) -------------------------------------------------------------------------- Single source for every redesigned surface (landing, auth, panel). Page layers (rd-auth.css, rd-landing.css, rd-panel.css) only consume these. Brand «Pulso» (public/images/asiste-logo.svg): pulse violet #5B3DF5, lime dot #C5F04A (decoration only, never text), ink #0F1020. The --rd-azul* and --rd-turquesa* names are historical: they now hold violet and a green for «confirmed / done», so every page that reads them follows the brand. Fonts are self-hosted (latin subset, OFL — see public/fonts/OFL.txt). ========================================================================== */ @font-face { font-family: "Bricolage Grotesque"; src: url("/fonts/bricolage-grotesque-latin.woff2") format("woff2"); font-weight: 500 800; font-stretch: 75% 100%; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Instrument Sans"; src: url("/fonts/instrument-sans-latin.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* ---- Type ---- */ --rd-font-display: "Bricolage Grotesque", "Instrument Sans", ui-sans-serif, system-ui, sans-serif; --rd-font: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; /* Scale (1.2 minor third, 16 base): 12 · 13 · 14 · 16 · 19 · 23 · 28 · 33 · 40 · 48 · 58 */ --rd-fs-xs: 12px; --rd-fs-sm: 13px; --rd-fs-md: 14px; --rd-fs: 16px; --rd-fs-lg: 19px; --rd-fs-h4: 23px; --rd-fs-h3: 28px; --rd-fs-h2: clamp(28px, 2.4vw + 14px, 40px); --rd-fs-h1: clamp(36px, 4.2vw + 16px, 64px); /* ---- Brand (from the logo) ---- */ --rd-azul: #5B3DF5; /* pulse violet — primary actions */ --rd-azul-hover: #4A2FE0; --rd-azul-press: #3F24D6; --rd-azul-claro: #A897FF; /* primary text on dark */ --rd-lima: #C5F04A; /* the logo's dot — highlights, never text */ --rd-turquesa: #17A86B; /* confirmed / done */ --rd-turquesa-texto: #0E7A4E; --rd-mango: #FFB020; /* pending / needs you */ --rd-mango-texto: #8A5300; --rd-coral: #EF4B55; /* cancelled / error */ --rd-coral-texto: #B8232E; --rd-noche: #0F1020; /* ink — the wordmark */ /* ---- Semantic roles (light) ---- */ --rd-bg: #F5F4FA; --rd-surface: #FFFFFF; --rd-surface-2: #FAF9FE; --rd-surface-3: #F1EFFB; --rd-line: #E4E1F0; --rd-line-strong: #CDC8E2; --rd-text: #0F1020; --rd-text-2: #3A3D52; --rd-muted: #5C5F73; /* 6.3:1 on white */ --rd-primary: var(--rd-azul); --rd-primary-hover: var(--rd-azul-hover); --rd-primary-press: var(--rd-azul-press); --rd-primary-text: #4A2FE0; --rd-primary-soft: rgba(91, 61, 245, .08); --rd-primary-soft-2: rgba(91, 61, 245, .14); --rd-ring: rgba(91, 61, 245, .3); --rd-ok: var(--rd-turquesa); --rd-ok-text: var(--rd-turquesa-texto); --rd-ok-soft: rgba(23, 168, 107, .11); --rd-warn: var(--rd-mango); --rd-warn-text: var(--rd-mango-texto); --rd-warn-soft: rgba(255, 176, 32, .16); --rd-danger: var(--rd-coral); --rd-danger-text: var(--rd-coral-texto); --rd-danger-soft: rgba(239, 75, 85, .10); /* Planner paper: faint hour lines, the product's own vernacular */ --rd-hour-line: rgba(15, 16, 32, .055); /* ---- Shape: radius follows hierarchy, never one value everywhere ---- */ --rd-r-xs: 6px; /* chips, badges */ --rd-r-sm: 10px; /* small controls */ --rd-r: 14px; /* buttons, inputs */ --rd-r-lg: 20px; /* cards */ --rd-r-xl: 28px; /* sheets, shells */ --rd-r-pill: 999px; /* ---- Elevation: tinted with the brand ink, not grey ---- */ --rd-e1: 0 1px 0 rgba(15, 16, 32, .04), 0 1px 3px rgba(15, 16, 32, .06); --rd-e2: 0 2px 4px rgba(15, 16, 32, .04), 0 10px 24px -8px rgba(43, 25, 140, .14); --rd-e3: 0 4px 10px rgba(15, 16, 32, .06), 0 32px 64px -24px rgba(43, 25, 140, .3); --rd-e-primary: 0 10px 24px -10px rgba(91, 61, 245, .6); /* ---- Motion (one personality: crisp, decisive, no bounce in UI) ---- */ --rd-ease-out: cubic-bezier(.23, 1, .32, 1); /* enter / respond */ --rd-ease-in-out: cubic-bezier(.77, 0, .175, 1); /* on-screen movement */ --rd-ease-drawer: cubic-bezier(.32, .72, 0, 1); /* sheets, drawers */ --rd-t-press: 140ms; --rd-t-fast: 180ms; --rd-t: 240ms; --rd-t-panel: 340ms; --rd-t-story: 700ms; /* marketing only */ /* ---- Layout ---- */ --rd-gutter: clamp(16px, 4vw, 40px); --rd-max: 1200px; --rd-safe-top: env(safe-area-inset-top, 0px); --rd-safe-bottom: env(safe-area-inset-bottom, 0px); } /* ---- Dark: the ink of the wordmark, tinted violet, never neutral black ---- */ html[data-theme="dark"] { --rd-bg: #0B0C18; --rd-surface: #14152A; --rd-surface-2: #1A1C35; --rd-surface-3: #222443; --rd-line: #26284A; --rd-line-strong: #36385F; --rd-text: #F1F0FA; --rd-text-2: #C9CADB; --rd-muted: #9597B3; /* 6.4:1 on surface */ --rd-primary-text: var(--rd-azul-claro); --rd-primary-soft: rgba(168, 151, 255, .13); --rd-primary-soft-2: rgba(168, 151, 255, .22); --rd-ring: rgba(168, 151, 255, .45); --rd-ok-text: #4FD99A; --rd-ok-soft: rgba(79, 217, 154, .13); --rd-warn-text: #FFC35C; --rd-warn-soft: rgba(255, 176, 32, .14); --rd-danger-text: #FF7A82; --rd-danger-soft: rgba(255, 122, 130, .13); --rd-hour-line: rgba(201, 202, 219, .05); --rd-e1: 0 1px 0 rgba(0, 0, 0, .3), 0 1px 3px rgba(0, 0, 0, .35); --rd-e2: 0 2px 4px rgba(0, 0, 0, .3), 0 14px 30px -10px rgba(0, 0, 0, .6); --rd-e3: 0 4px 10px rgba(0, 0, 0, .35), 0 40px 80px -24px rgba(0, 0, 0, .75); --rd-e-primary: 0 10px 28px -10px rgba(91, 61, 245, .8); } /* Shared reduced-motion contract: keep fades, drop travel. */ @media (prefers-reduced-motion: reduce) { :root { --rd-t-press: 1ms; --rd-t-story: 1ms; } }