/* IA en Obra - tokens del design system, concatenados. fonts.css se omite: su @import de Google Fonts bloqueaba el render; las fuentes se cargan con en el . */ /* ---- colors.css ---- */ /* IA en Obra — Color tokens Palette proportion: 60% graphite/neutral · 28% light · 9% coral · 3% teal. Contrast rule: on coral, use graphite text (#14100E), never white. */ :root { /* ---- Brand base (from brand.md) ---- */ --ia-coral: #D85A30; /* brand / accent / CTA */ --ia-coral-dark: #993C1D; /* coral text / hover */ --ia-coral-light: #F0997B; /* detail / soft fill */ --ia-coral-pale: #FDEEE8; /* light surface */ --ia-ink: #2E100A; /* primary text (ink) */ --ia-obra: #14100E; /* dark bg / covers (Negro Obra) */ --ia-teal: #008C84; /* complementary accent */ --ia-teal-dark: #00655F; /* teal hover */ --ia-teal-pale: #E0F0EE; /* light teal surface */ --ia-border: #E7C9BB; /* warm hairline border */ --ia-muted: #8A6A5E; /* muted / secondary text */ /* ---- Neutrals (warm graphite ramp) ---- */ --ia-white: #FFFFFF; --ia-paper: #FBF8F6; /* app background, warm off-white */ --ia-surface: #FFFFFF; /* card surface */ --ia-surface-2: #F5EDE9; /* subtle raised / hover surface */ --ia-line: #EDE3DD; /* neutral divider */ --ia-obra-2: #201A16; /* raised surface on dark */ --ia-obra-3: #2E2620; /* border on dark */ /* ---- Semantic (status) ---- */ --ia-success: #008C84; /* reuse teal for positive */ --ia-success-pale:#E0F0EE; --ia-warning: #D89A30; /* amber, sibling of coral */ --ia-warning-pale:#FBF0DC; --ia-danger: #C23A2B; --ia-danger-pale: #FBE6E2; --ia-info: #2E6C8C; --ia-info-pale: #E2EEF3; /* ---- Semantic aliases (use these in UI) ---- */ --bg-app: var(--ia-paper); --bg-dark: var(--ia-obra); --surface-card: var(--ia-surface); --surface-raised: var(--ia-surface-2); --text-strong: var(--ia-ink); --text-body: #3D2A22; --text-muted: var(--ia-muted); --text-on-coral: var(--ia-obra); --text-on-dark: #F3ECE7; --accent: var(--ia-coral); --accent-hover: var(--ia-coral-dark); --accent-2: var(--ia-teal); --border-soft: var(--ia-line); --border-warm: var(--ia-border); /* ---- Graphic signature: coral→teal progress bar ---- */ --ia-bar: linear-gradient(90deg, #D85A30 82%, #008C84 82%); /* @kind other */ /* Cover overlay: dark protection gradient for imagery */ --ia-cover-scrim: linear-gradient(90deg, rgba(20,16,14,0.92) 0%, rgba(20,16,14,0.55) 45%, rgba(20,16,14,0.15) 100%); /* @kind other */ --ia-cover-scrim-bottom: linear-gradient(0deg, rgba(20,16,14,0.90) 0%, rgba(20,16,14,0.0) 70%); /* @kind other */ } /* ---- typography.css ---- */ /* IA en Obra — Typography tokens Space Grotesk (display/titles) · IBM Plex Sans (body) · IBM Plex Mono (labels/data). */ :root { --ia-font-display: 'Space Grotesk', Arial, sans-serif; --ia-font-body: 'IBM Plex Sans', Calibri, system-ui, sans-serif; --ia-font-mono: 'IBM Plex Mono', ui-monospace, monospace; /* Type scale (px) */ --ia-display: 64px; /* hero / cover */ --ia-h1: 48px; --ia-h2: 30px; --ia-h3: 22px; --ia-body-lg: 19px; --ia-body: 17px; --ia-body-sm: 15px; --ia-label: 12px; /* mono, uppercase, tracked */ /* Weights */ --ia-w-regular: 400; /* @kind font */ --ia-w-medium: 500; /* @kind font */ --ia-w-semibold: 600; /* @kind font */ --ia-w-bold: 700; /* @kind font */ /* Line heights */ --ia-lh-tight: 1.05; /* @kind font */ --ia-lh-heading: 1.15; /* @kind font */ --ia-lh-body: 1.6; /* @kind font */ /* Letter spacing */ --ia-track-label: 0.16em; /* @kind font */ --ia-track-display: -0.02em; /* @kind font */ } /* ---- spacing.css ---- */ /* IA en Obra — Spacing, radii, elevation, motion */ :root { /* Spacing scale (4px base) */ --ia-space-1: 4px; --ia-space-2: 8px; --ia-space-3: 12px; --ia-space-4: 16px; --ia-space-5: 20px; --ia-space-6: 24px; --ia-space-8: 32px; --ia-space-10: 40px; --ia-space-12: 48px; --ia-space-16: 64px; --ia-space-20: 80px; /* Radii */ --ia-radius-sm: 8px; --ia-radius: 12px; --ia-radius-lg: 16px; --ia-radius-xl: 24px; --ia-radius-pill: 999px; --ia-radius-logo: 24%; /* @kind radius */ /* Elevation — warm, low, engineering-restrained */ --ia-shadow-sm: 0 1px 2px rgba(46,16,10,0.06), 0 1px 3px rgba(46,16,10,0.08); --ia-shadow: 0 2px 8px rgba(46,16,10,0.08), 0 8px 24px rgba(46,16,10,0.06); --ia-shadow-lg: 0 8px 28px rgba(46,16,10,0.12), 0 24px 60px rgba(46,16,10,0.10); --ia-shadow-coral: 0 6px 18px rgba(216,90,48,0.28); /* Motion */ --ia-ease: cubic-bezier(0.2, 0.6, 0.2, 1); /* @kind other */ --ia-dur-fast: 120ms; /* @kind other */ --ia-dur: 200ms; /* @kind other */ --ia-dur-slow: 360ms; /* @kind other */ } /* ---- base.css ---- */ /* IA en Obra — Base element defaults + link colors. Keeps consumers consistent without forcing a reset. */ :root { color-scheme: light; } body { font-family: var(--ia-font-body); font-size: var(--ia-body); line-height: var(--ia-lh-body); color: var(--text-body); background: var(--bg-app); -webkit-font-smoothing: antialiased; } /* Links inherit the brand — never browser blue */ a { color: var(--ia-coral-dark); text-decoration: none; } a:hover { color: var(--ia-coral); text-decoration: underline; text-underline-offset: 2px; } /* Mono label helper (etiquetas / datos) */ .ia-label { font-family: var(--ia-font-mono); font-size: var(--ia-label); font-weight: var(--ia-w-medium); letter-spacing: var(--ia-track-label); text-transform: uppercase; color: var(--text-muted); } /* Graphic signature bar */ .ia-bar { height: 4px; border-radius: 999px; background: var(--ia-bar); } /* Selection */ ::selection { background: var(--ia-coral); color: var(--ia-obra); }