/* ============================================================ Design System — Tokens v1.0 Single source of truth for color, type, spacing, radii, motion. Sampled from the live site (jorgealbertogutierrez.com). See --documentacion/jag-design-system/README.md §2 for the rationale. ============================================================ */ /* -- Font loading -- All three families self-hosted as variable TTFs. Inter + Inter Tight + JetBrains Mono. No CDN is contacted at runtime. */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/Inter-VariableFont_opsz_wght.ttf') format('truetype-variations'), url('fonts/Inter-VariableFont_opsz_wght.ttf') format('truetype'); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 100 900; font-display: swap; src: url('fonts/Inter-Italic-VariableFont_opsz_wght.ttf') format('truetype-variations'), url('fonts/Inter-Italic-VariableFont_opsz_wght.ttf') format('truetype'); } @font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/InterTight-VariableFont_wght.ttf') format('truetype-variations'), url('fonts/InterTight-VariableFont_wght.ttf') format('truetype'); } @font-face { font-family: 'Inter Tight'; font-style: italic; font-weight: 100 900; font-display: swap; src: url('fonts/InterTight-Italic-VariableFont_wght.ttf') format('truetype-variations'), url('fonts/InterTight-Italic-VariableFont_wght.ttf') format('truetype'); } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/JetBrainsMono-VariableFont_wght.ttf') format('truetype-variations'), url('fonts/JetBrainsMono-VariableFont_wght.ttf') format('truetype'); } @font-face { font-family: 'JetBrains Mono'; font-style: italic; font-weight: 100 900; font-display: swap; src: url('fonts/JetBrainsMono-Italic-VariableFont_wght.ttf') format('truetype-variations'), url('fonts/JetBrainsMono-Italic-VariableFont_wght.ttf') format('truetype'); } :root { /* ---- Core brand color (extracted from jorgealbertogutierrez.com) ---- */ --c-ink: #0E0E0E; /* logo, text, label chips */ --c-paper: #FFFFFF; /* window / card interiors */ --c-signal: #FA8057; /* construction-tape orange — primary accent */ --c-signal-hi: #FB9966; /* lighter orange — underlines, < > brackets */ --c-alert: #F9444B; /* traffic-light red — window dot, alerts */ --c-steel: #5C6577; /* navy grey — muted text */ /* desktop "brushed metal" backdrop — light navy grey */ --c-silver: #BEC4D0; /* base */ --c-silver-hi: #D7DBE3; /* highlight / gradient center */ --c-silver-lo: #828BA0; /* shadow / gradient edge */ /* aliases kept for backward-compat with older site.css rules */ --c-carbon: var(--c-ink); --c-bone: var(--c-paper); /* RGB triplets used by the glassmorphism exception (navbar + buttons). See site.css for the exception rules and brand-v1 §5.2 in --documentacion/jag-design-system/README.md for why glassmorphism survives as an exception on this brand. */ --c-paper-rgb: 255, 255, 255; --c-silver-rgb: 190, 196, 208; --c-ink-rgb: 14, 14, 14; --c-bone-rgb: 255, 255, 255; /* legacy alias of --c-paper-rgb */ --c-carbon-rgb: 14, 14, 14; /* legacy alias of --c-ink-rgb */ /* the signature desktop gradient — assign to a full-viewport backdrop */ --bg-desktop: radial-gradient(120% 120% at 50% 18%, var(--c-silver-hi) 0%, var(--c-silver) 46%, var(--c-silver-lo) 100%); /* ---- Semantic — light (the desktop + windows on it) ---- */ --bg: var(--c-silver); /* flat fallback for the desktop */ --surface: var(--c-paper); /* the window/card you put content in */ --fg: var(--c-ink); --fg-muted: var(--c-steel); --accent: var(--c-signal); --accent-hi: var(--c-signal-hi); --alert: var(--c-alert); --border: rgba(14, 14, 14, 0.10); --border-strong: rgba(14, 14, 14, 0.20); /* ---- Semantic — dark surface (e.g. the contact window interior) ---- */ --bg-dark: #161214; --surface-dark: #1C1718; --fg-dark: var(--c-paper); --fg-muted-dark: rgba(255, 255, 255, 0.55); --border-dark: rgba(255, 255, 255, 0.10); --border-strong-dark: rgba(255, 255, 255, 0.20); /* ---- Type families ---- */ --font-display: 'Inter Tight', 'Inter', -apple-system, sans-serif; --font-body: 'Inter', -apple-system, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace; --w-regular: 400; --w-medium: 500; /* ---- Type scale ---- */ --t-display-xl: 4rem; /* 64 — hero only */ --t-display-lg: 3rem; /* 48 — section hero */ --t-display-md: 2rem; /* 32 — h1 */ --t-display-sm: 1.5rem; /* 24 — h2 */ --t-body-lg: 1.125rem; /* 18 — lead */ --t-body: 1rem; /* 16 — body */ --t-body-sm: 0.875rem; /* 14 — caption, inline code */ --t-meta: 0.75rem; /* 12 — meta, file path */ --t-micro: 0.6875rem; /* 11 — footnote, signature */ --lh-display: 1.1; --lh-body: 1.65; --lh-mono: 1.5; --tr-display: -0.02em; --tr-mark: -0.03em; /* ---- Spacing (base 4px) ---- */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem; /* ---- Radii ---- */ --r-sm: 4px; --r-md: 8px; --r-lg: 12px; /* ---- Motion ---- */ --motion-fast: 120ms ease-out; } /* Dark surface — swap semantic tokens, never the core brand tokens. Used for dark window interiors (e.g. the contact window) and for the existing manual moon-toggle theme on jag3d's hero. */ [data-theme="dark"] { --bg: var(--bg-dark); --surface: var(--surface-dark); --fg: var(--fg-dark); --fg-muted: var(--fg-muted-dark); --border: var(--border-dark); --border-strong: var(--border-strong-dark); } /* Note: no prefers-color-scheme auto-swap. The brand default is the silver desktop on every OS; dark is opt-in via [data-theme="dark"] (the site's moon toggle), matching the design system spec. */