/* ============================================================ Autonomia 16h — Design System (bundled tokens) Single-file token set for the Jinja/HTMX app. Import once from any template: Dark-first: set data-theme="dark" on . Source: Claude Design/extracted/tokens/*.css (v1) ============================================================ */ /* ---------- Fonts ---------- */ @import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800;900&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap'); /* ---------- Palette ---------- */ :root { --paper: #FFFCF2; --sand: #CCC5B9; --graphite: #403D39; --espresso: #252422; --ember: #EB5E28; --neutral-0: #FFFCF2; --neutral-50: #F7F3E8; --neutral-100: #EFE9DB; --neutral-200: #E2DBCB; --neutral-300: #CCC5B9; --neutral-400: #A8A096; --neutral-500: #837C72; --neutral-600: #5F5A53; --neutral-700: #403D39; --neutral-800: #302E2A; --neutral-900: #252422; --neutral-950: #1A1917; --ember-50: #FDEDE4; --ember-100: #FAD6C4; --ember-200: #F6B193; --ember-300: #F18A60; --ember-400: #EE713E; --ember-500: #EB5E28; --ember-600: #D14C1B; --ember-700: #A93C16; --ember-800: #802D11; --ember-900: #5C200C; --energy-quimica: #EB5E28; --energy-quimica-soft: #FAD6C4; --energy-temporal: #E0A526; --energy-temporal-soft: #F7E4B8; --energy-neuronal: #4B5FA6; --energy-neuronal-soft: #D2D7EC; --energy-cinetica: #5E8C4E; --energy-cinetica-soft: #D6E4CB; --success: #5E8C4E; --warning: #E0A526; --danger: #C0392B; --info: #4B5FA6; --bg-base: var(--paper); --bg-subtle: var(--neutral-50); --bg-muted: var(--neutral-100); --bg-gradient: linear-gradient(160deg, #FFFCF2 0%, #EFE9DB 100%); --surface-card: #FFFFFF; --surface-raised: var(--paper); --surface-dark: var(--espresso); --surface-dark-2: var(--graphite); --text-strong: var(--espresso); --text-body: var(--neutral-800); --text-muted: var(--neutral-600); --text-faint: var(--neutral-500); --text-on-dark: var(--paper); --text-on-dark-muted: var(--neutral-300); --text-on-accent: var(--paper); --text-accent: var(--ember-600); --border-subtle: var(--neutral-200); --border-default: var(--neutral-300); --border-strong: var(--neutral-400); --border-dark: var(--neutral-800); --accent: var(--ember-500); --accent-hover: var(--ember-600); --accent-active: var(--ember-700); --accent-soft: var(--ember-50); --focus-ring: var(--ember-500); --gauge-track: var(--neutral-200); --surface-header: rgba(255, 252, 242, 0.82); --surface-input: var(--neutral-100); } /* ---------- Typography ---------- */ :root { --font-display: 'Archivo', system-ui, sans-serif; --font-body: 'IBM Plex Sans', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 900; --text-2xs: 0.6875rem; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-md: 1rem; --text-lg: 1.125rem; --text-xl: 1.375rem; --text-2xl: 1.75rem; --text-3xl: 2.25rem; --text-4xl: 3rem; --text-5xl: 4rem; --text-6xl: 5.5rem; --leading-tight: 1.05; --leading-snug: 1.2; --leading-normal: 1.5; --leading-relaxed: 1.65; --tracking-tighter: -0.03em; --tracking-tight: -0.015em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-caps: 0.12em; } /* ---------- Spacing ---------- */ :root { --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; --space-9: 4rem; --space-10: 5rem; --space-11: 6rem; --space-12: 8rem; --container-max: 1200px; --container-prose: 680px; --gutter: 1.5rem; --section-y: 6rem; } /* ---------- Effects ---------- */ :root { --radius-xs: 3px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px; --radius-full: 50%; --border-hairline: 1px; --border-thick: 2px; --border-accent: 3px; --shadow-xs: 0 1px 2px rgba(37, 36, 34, 0.06); --shadow-sm: 0 1px 3px rgba(37, 36, 34, 0.08), 0 1px 2px rgba(37, 36, 34, 0.05); --shadow-md: 0 4px 12px rgba(37, 36, 34, 0.08), 0 2px 4px rgba(37, 36, 34, 0.05); --shadow-lg: 0 12px 28px rgba(37, 36, 34, 0.12), 0 4px 8px rgba(37, 36, 34, 0.06); --shadow-xl: 0 24px 56px rgba(37, 36, 34, 0.16), 0 8px 16px rgba(37, 36, 34, 0.08); --shadow-ember: 0 8px 24px rgba(235, 94, 40, 0.28); --shadow-inset: inset 0 1px 2px rgba(37, 36, 34, 0.08); --ring-width: 3px; --ring-color: rgba(235, 94, 40, 0.40); --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 360ms; --press-scale: 0.97; --hover-lift: -2px; } /* ---------- Dark theme remap ---------- */ [data-theme="dark"] { color-scheme: dark; --bg-base: #252422; --bg-subtle: #2b2925; --bg-muted: #302e2a; --bg-gradient: linear-gradient(160deg, #252422 0%, #2f2c28 58%, #211f1c 100%); --surface-card: #2d2b27; --surface-raised: #34322d; --surface-sunken: rgba(26, 25, 23, 0.6); --surface-dark: #1a1917; --surface-dark-2: #211f1c; --text-strong: #FFFCF2; --text-body: #EFE9DB; --text-muted: #CCC5B9; --text-faint: #A8A096; --text-accent: var(--ember-400); --border-subtle: rgba(204, 197, 185, 0.10); --border-default: rgba(204, 197, 185, 0.16); --border-strong: rgba(204, 197, 185, 0.28); --gauge-track: rgba(204, 197, 185, 0.12); --surface-header: rgba(37, 36, 34, 0.72); --surface-input: rgba(64, 61, 57, 0.55); --energy-quimica-soft: rgba(235, 94, 40, 0.14); --energy-temporal-soft: rgba(224, 165, 38, 0.16); --energy-neuronal-soft: rgba(105, 124, 196, 0.18); --energy-cinetica-soft: rgba(124, 168, 104, 0.18); --energy-neuronal: #6d80c4; --energy-cinetica: #7ca868; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.32), 0 1px 2px rgba(0, 0, 0, 0.24); --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.38), 0 2px 6px rgba(0, 0, 0, 0.26); --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.46), 0 6px 12px rgba(0, 0, 0, 0.30); --shadow-xl: 0 30px 70px rgba(0, 0, 0, 0.55), 0 10px 20px rgba(0, 0, 0, 0.34); --shadow-ember: 0 10px 30px rgba(235, 94, 40, 0.32); } /* ---------- Base resets ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-body); font-size: var(--text-md); line-height: var(--leading-normal); color: var(--text-body); background: var(--bg-base); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); color: var(--text-strong); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); margin: 0 0 0.5em; font-weight: var(--fw-bold); } h1 { font-size: var(--text-4xl); font-weight: var(--fw-black); line-height: var(--leading-tight); letter-spacing: var(--tracking-tighter); } h2 { font-size: var(--text-3xl); font-weight: var(--fw-black); } h3 { font-size: var(--text-2xl); } h4 { font-size: var(--text-xl); } p { margin: 0 0 1em; text-wrap: pretty; } a { color: var(--text-accent); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; display: block; } ::selection { background: var(--ember-200); color: var(--espresso); } :focus-visible { outline: var(--ring-width) solid var(--ring-color); outline-offset: 2px; } /* ---------- Brand devices ---------- */ .eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--fw-medium); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-accent); } .brand-underline { position: relative; display: inline-block; } .brand-underline::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.18em; height: var(--border-accent); background: var(--ember-500); } /* ---------- Shared app shell ---------- */ .a16h-shell { min-height: 100vh; background: var(--bg-gradient); color: var(--text-body); display: flex; flex-direction: column; } .a16h-topbar { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--border-subtle); background: var(--surface-header); backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 10; } .a16h-topbar-right { display: flex; align-items: center; gap: var(--space-4); } .a16h-user { font-size: var(--text-sm); color: var(--text-muted); } .a16h-user strong { color: var(--text-strong); font-weight: var(--fw-semibold); } .a16h-btn-ghost { padding: 7px 14px; background: transparent; border: 1px solid var(--border-default); border-radius: var(--radius-sm); color: var(--text-muted); font-family: inherit; font-size: var(--text-xs); font-weight: var(--fw-semibold); cursor: pointer; text-decoration: none; transition: all var(--dur-base) var(--ease-out); } .a16h-btn-ghost:hover { border-color: var(--ember-500); color: var(--ember-400); text-decoration: none; } .a16h-btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--radius-sm); border: 1px solid var(--border-default); background: transparent; color: var(--text-muted); cursor: pointer; transition: all var(--dur-base) var(--ease-out); } .a16h-btn-icon:hover { color: var(--ember-400); border-color: var(--ember-500); } [data-theme="light"] .a16h-logo { filter: invert(1) hue-rotate(180deg); } .a16h-page { max-width: 960px; margin: 0 auto; padding: 2.5rem 2rem 4rem; width: 100%; } .a16h-page-header { margin-bottom: var(--space-6); } .a16h-page-header h1 { font-size: var(--text-2xl); font-weight: var(--fw-black); letter-spacing: var(--tracking-tight); margin-bottom: 6px; } .a16h-page-header p { color: var(--text-muted); font-size: var(--text-sm); margin: 0; } .a16h-accent-line { width: 44px; height: 3px; background: var(--ember-500); border-radius: 2px; margin-top: 0.75rem; } .a16h-section-header { display: flex; align-items: center; gap: var(--space-3); margin: 2.25rem 0 var(--space-4); } .a16h-section-title { font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-faint); white-space: nowrap; } .a16h-section-line { flex: 1; height: 1px; background: var(--border-subtle); } /* ---------- Utility: primary CTA ---------- */ .a16h-cta { display: inline-flex; align-items: center; gap: var(--space-2); padding: 12px 22px; background: var(--ember-500); color: var(--paper); border-radius: var(--radius-md); font-family: inherit; font-weight: var(--fw-bold); font-size: var(--text-sm); border: none; cursor: pointer; text-decoration: none; transition: background var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); box-shadow: var(--shadow-ember); } .a16h-cta:hover { background: var(--ember-600); text-decoration: none; } .a16h-cta:active { transform: scale(var(--press-scale)); }