/* ========================================================================= 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. */ @import url("https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,300..800;1,8..60,300..800&family=Inter+Tight:ital,wght@0,300..800;1,300..800&family=JetBrains+Mono:ital,wght@0,300..800;1,300..800&display=swap"); /* ---------- 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: 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; } }