/* ========================================================================= Atazel — Design Tokens ------------------------------------------------------------------------- Drop this file in once. Theme by setting [data-palette="iris|vault|ledger"] on or any container; default is "iris". ========================================================================= */ /* ---------- Fonts ------------------------------------------------------- */ /* Fonts load from Google Fonts. For offline / self-hosting, swap this for @font-face rules pointing at files in `fonts/`. The three families used are Google-Fonts-available, OFL-licensed, no paid type. */ @font-face { font-family: 'Inter Tight'; font-style: italic; font-weight: 300 800; font-display: swap; src: url(./fonts/inter-tight-italic-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter Tight'; font-style: italic; font-weight: 300 800; font-display: swap; src: url(./fonts/inter-tight-italic-latin.woff2) format('woff2'); 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: 'Inter Tight'; font-style: normal; font-weight: 300 800; font-display: swap; src: url(./fonts/inter-tight-normal-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 300 800; font-display: swap; src: url(./fonts/inter-tight-normal-latin.woff2) format('woff2'); 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: 'JetBrains Mono'; font-style: italic; font-weight: 300 800; font-display: swap; src: url(./fonts/jetbrains-mono-italic-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'JetBrains Mono'; font-style: italic; font-weight: 300 800; font-display: swap; src: url(./fonts/jetbrains-mono-italic-latin.woff2) format('woff2'); 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: 'JetBrains Mono'; font-style: normal; font-weight: 300 800; font-display: swap; src: url(./fonts/jetbrains-mono-normal-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 300 800; font-display: swap; src: url(./fonts/jetbrains-mono-normal-latin.woff2) format('woff2'); 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: 'Source Serif 4'; font-style: italic; font-weight: 300 800; font-display: swap; src: url(./fonts/source-serif-4-italic-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Source Serif 4'; font-style: italic; font-weight: 300 800; font-display: swap; src: url(./fonts/source-serif-4-italic-latin.woff2) format('woff2'); 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: 'Source Serif 4'; font-style: normal; font-weight: 300 800; font-display: swap; src: url(./fonts/source-serif-4-normal-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 300 800; font-display: swap; src: url(./fonts/source-serif-4-normal-latin.woff2) format('woff2'); 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; } /* ---------- Palette: LEDGER (DEFAULT — chosen by stakeholder) ----------- Azul Ledger: blue primary + ochre warnings + green = healthy, on white. */ :root, :root[data-palette="ledger"] { --bg-page: #FFFFFF; --bg-surface: #FFFFFF; --bg-muted: #EFF3F9; --bg-inverse: #0C1B2E; --fg-default: #16263B; --fg-strong: #0B1A2E; --fg-muted: #566476; --fg-subtle: #909CAC; --fg-on-inverse: #F8FAFD; --fg-on-iris: #FFFFFF; --iris-50: #E8F0FD; --iris-100: #C4D9F8; --iris-300: #6FA0EC; --iris-500: #1F6FE0; /* azul primario */ --iris-600: #1759BC; /* hover */ --iris-700: #114493; /* press */ --iris-900: #0A244F; --amber-50: #FFF1D2; --amber-300: #F4BB44; --amber-500: #D88B12; /* ámbar = avisos */ --amber-700: #955E0A; --success-50: #DFF3E6; --success-500: #1C9E55; /* verde = margen sano */ --success-700: #0E6A38; --warning-50: #FFF1D2; --warning-500: #D88B12; --warning-700: #955E0A; --danger-50: #FCE3E1; --danger-500: #DE4133; --danger-700: #97271C; /* Serie de datos «dinero disponible» en gráficos de tesorería. Token funcional de chart (como success/danger), NO un acento de marca: azul pizarra apagado que convive con la crema cálida del Ledger. */ --chart-available-500: #33617F; --border-subtle: #E4E9F0; --border-default: #C7D0DD; --border-strong: #566476; --shadow-1: 0 1px 2px rgba(13, 38, 76, 0.06), 0 2px 6px rgba(13, 38, 76, 0.05); --shadow-2: 0 6px 16px rgba(13, 38, 76, 0.08), 0 12px 32px rgba(13, 38, 76, 0.10); --focus-ring: 0 0 0 2px var(--bg-page), 0 0 0 4px var(--iris-500); } /* ---------- Palette: IRIS (alternate) ------------------------------------ */ :root[data-palette="iris"] { --bg-page: #F5F1E8; --bg-surface: #FBF8F1; --bg-muted: #EFEADD; --bg-inverse: #14201F; --fg-default: #14201F; --fg-strong: #0A1413; --fg-muted: #5B6968; --fg-subtle: #8A9594; --fg-on-inverse: #FBF8F1; --fg-on-iris: #FBF8F1; --iris-50: #E6EFEE; --iris-100: #C2D6D3; --iris-300: #5E8784; --iris-500: #1F4F4B; --iris-600: #173F3C; --iris-700: #0F2F2D; --iris-900: #061412; --amber-50: #FBF1DC; --amber-300: #E8B454; --amber-500: #C68A1F; --amber-700: #8A5E10; --success-50: #E3EFE3; --success-500: #2E7A47; --success-700: #1E5631; --warning-50: #FBF1DC; --warning-500: #C68A1F; --warning-700: #8A5E10; --danger-50: #F4DDD9; --danger-500: #B43D2C; --danger-700: #841F11; /* Serie «dinero disponible» — token funcional de chart (paleta iris/teal). */ --chart-available-500: #2F6E86; --border-subtle: #D9D2C0; --border-default: #C7BEA7; --border-strong: #5B6968; --shadow-1: 0 1px 2px rgba(20, 32, 31, 0.06), 0 2px 6px rgba(20, 32, 31, 0.04); --shadow-2: 0 6px 16px rgba(20, 32, 31, 0.08), 0 12px 32px rgba(20, 32, 31, 0.10); --focus-ring: 0 0 0 2px var(--bg-page), 0 0 0 4px var(--iris-500); } /* ---------- Palette: VAULT (alternate — sober finance terminal) ------- */ :root[data-palette="vault"] { --bg-page: #FAFAFA; --bg-surface: #FFFFFF; --bg-muted: #F1F2F4; --bg-inverse: #0C1118; --fg-default: #0C1118; --fg-strong: #05080C; --fg-muted: #4D5666; --fg-subtle: #7A8294; --fg-on-inverse: #FFFFFF; --fg-on-iris: #FFFFFF; --iris-50: #E5EBF4; --iris-100: #BFCDE5; --iris-300: #5878B0; --iris-500: #1E3A6B; /* ink blue */ --iris-600: #162E58; --iris-700: #0F2244; --iris-900: #050E22; --amber-50: #FFF4DC; --amber-300: #F0B85B; --amber-500: #D08816; --amber-700: #8C5908; --success-50: #E2F1E6; --success-500: #207A3C; --success-700: #155429; --warning-50: #FFF4DC; --warning-500: #D08816; --warning-700: #8C5908; --danger-50: #FBE2DE; --danger-500: #C0392B; --danger-700: #861F16; /* Serie «dinero disponible» — token funcional de chart. En Vault el acento ya es azul tinta (--iris-500), así que la línea usa un acero más claro para no confundirse con él. */ --chart-available-500: #4C7BA8; --border-subtle: #E5E7EC; --border-default: #CCD1DA; --border-strong: #4D5666; --shadow-1: 0 1px 2px rgba(12, 17, 24, 0.06), 0 2px 6px rgba(12, 17, 24, 0.04); --shadow-2: 0 6px 16px rgba(12, 17, 24, 0.10), 0 12px 32px rgba(12, 17, 24, 0.12); --focus-ring: 0 0 0 2px var(--bg-page), 0 0 0 4px var(--iris-500); } /* (LEDGER palette is defined as the default above.) */ /* ---------- Type system ------------------------------------------------- */ :root { --font-serif: "Source Serif 4", "Iowan Old Style", Georgia, serif; --font-sans: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* Type scale — a major-third (1.250) ramp anchored at 16 */ --text-2xs: 11px; /* footnotes, table-meta */ --text-xs: 12px; /* badges */ --text-sm: 13px; /* secondary body */ --text-base: 14px; /* UI default */ --text-md: 15px; /* primary body */ --text-lg: 17px; --text-xl: 20px; --text-2xl: 24px; --text-3xl: 32px; --text-4xl: 44px; --text-5xl: 60px; --text-6xl: 84px; --text-display: 64px; /* serif hero — login quote, slide titles (type-display-serif) */ --leading-tight: 1.15; --leading-snug: 1.30; --leading-normal: 1.50; --leading-relaxed: 1.65; --tracking-tight: -0.02em; --tracking-snug: -0.01em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-widest: 0.16em; /* overlines / section labels (h5, .overline) */ --tracking-wordmark: 0.18em; /* the brand wordmark (STYLEGUIDE §Wordmark) */ } /* ---------- Spacing ----------------------------------------------------- */ :root { --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-pill: 999px; } /* ---------- Semantic shortcuts ----------------------------------------- */ /* Use these in components so the role is obvious from the markup. */ :root { --color-primary: var(--iris-500); --color-primary-hover: var(--iris-600); --color-primary-press: var(--iris-700); --color-on-primary: var(--fg-on-iris); --color-accent: var(--amber-500); --color-success: var(--success-500); --color-warning: var(--warning-500); --color-danger: var(--danger-500); --color-text: var(--fg-default); --color-text-muted: var(--fg-muted); --color-text-subtle: var(--fg-subtle); --color-bg: var(--bg-page); --color-surface: var(--bg-surface); --color-surface-muted: var(--bg-muted); --color-border: var(--border-subtle); --color-border-strong: var(--border-strong); } /* ---------- Reset-y baselines ------------------------------------------ */ html, body { background-color: var(--bg-page); color: var(--fg-default); font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-normal); font-feature-settings: "ss01", "cv11"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Headings use the serif. h5/h6 are small overlines and use the sans uppercase. */ h1, .h1 { font-family: var(--font-serif); font-weight: 600; font-size: var(--text-4xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--fg-strong); margin: 0; } h2, .h2 { font-family: var(--font-serif); font-weight: 600; font-size: var(--text-3xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-snug); color: var(--fg-strong); margin: 0; } h3, .h3 { font-family: var(--font-serif); font-weight: 600; font-size: var(--text-2xl); line-height: var(--leading-snug); letter-spacing: var(--tracking-snug); color: var(--fg-strong); margin: 0; } h4, .h4 { font-family: var(--font-sans); font-weight: 600; font-size: var(--text-lg); line-height: var(--leading-snug); letter-spacing: var(--tracking-snug); color: var(--fg-strong); margin: 0; } h5, .h5, .overline { font-family: var(--font-sans); font-weight: 600; font-size: var(--text-xs); line-height: var(--leading-snug); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--fg-muted); margin: 0; } p, .body { font-family: var(--font-sans); font-size: var(--text-md); line-height: var(--leading-relaxed); color: var(--fg-default); margin: 0; text-wrap: pretty; } .body-sm { font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--fg-muted); } /* The wordmark — used for the brand lockup only */ .wordmark { font-family: var(--font-serif); font-weight: 600; letter-spacing: var(--tracking-wordmark); text-transform: uppercase; font-feature-settings: "smcp" off; } /* Numbers everywhere money happens */ .num, .mono { font-family: var(--font-mono); font-feature-settings: "tnum", "zero", "cv02"; font-variant-numeric: tabular-nums; letter-spacing: 0; } code, pre, kbd, samp { font-family: var(--font-mono); font-size: 0.9em; font-feature-settings: "tnum", "zero"; } /* Link */ a { color: var(--iris-500); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; transition: color 120ms cubic-bezier(0.2, 0, 0, 1); } a:hover { color: var(--iris-700); } /* Selection */ ::selection { background: var(--iris-100); color: var(--iris-900); } /* ---------- Motion ------------------------------------------------------ */ :root { --ease-out: cubic-bezier(0.2, 0, 0, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-inout: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; } } /* ========================================================================= BROADSHEET — cimientos de atmósfera del landing ------------------------------------------------------------------------- Vocabulario compartido por portada, precios, funcionalidades y fichas. La idea rectora: esto es un periódico financiero, un libro mayor impreso. Papel opaco, pautas finas y folios tabulares. Sin degradados, sin glow y sin cristal: sólo tinta sobre papel (reglas 5 y 9 del sistema). ========================================================================= */ :root { /* Grano de papel: ruido fractal en gris, teselado y a muy baja alfa. Se nota como textura, nunca como suciedad. Va como background-image y no como capa superpuesta, para no tocar el z-index de ninguna página ni interceptar el ratón. */ --texture-paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23p)'/%3E%3C/svg%3E"); /* Folio: el numeral de página del broadsheet. */ --folio-size: var(--text-3xl); --folio-color: var(--fg-subtle); /* Pautas: la fina que separa y el filete de tinta que abre sección. */ --rule-hair: 1px solid var(--border-subtle); --rule-ink: 2px solid var(--fg-strong); } /* El papel de fondo de todo el sitio. Las tarjetas y las bandas opacas lo tapan, así que el grano queda donde debe: al fondo, en los márgenes y en los héroes. */ body { background-image: var(--texture-paper); background-repeat: repeat; } /* Para la superficie que quiere el grano de forma explícita. */ .paper { background-color: var(--bg-page); background-image: var(--texture-paper); background-repeat: repeat; } /* ---------- Folio ------------------------------------------------------- */ /* El numeral tabular y fantasma que da ritmo a listados y niveles. El tamaño se hereda del token para que cada contexto pueda subirlo o bajarlo. */ .folio { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum", "zero"; font-weight: 500; font-size: var(--folio-size); line-height: 1; letter-spacing: var(--tracking-tight); color: var(--folio-color); } /* ---------- Pautas de sección ------------------------------------------- */ /* Regla de broadsheet: una fina de lado a lado con un tramo de tinta al principio, como el filete que abre sección en un diario. */ .rule-broadsheet { position: relative; border: 0; border-top: var(--rule-hair); margin: 0; } .rule-broadsheet::before { content: ""; position: absolute; top: -1px; left: 0; width: 64px; border-top: var(--rule-ink); } /* ---------- Divisor atalaya --------------------------------------------- */ /* El ojo de la marca partiendo una pauta: el corte de sección de un libro. La marca va en el marcado (SVG); aquí sólo las dos pautas y el aire. */ .atalaya-divider { display: flex; align-items: center; gap: var(--space-5); color: var(--fg-subtle); margin: var(--space-8) 0; } .atalaya-divider::before, .atalaya-divider::after { content: ""; flex: 1 1 auto; border-top: var(--rule-hair); }