/* ============================================ OroCredit — Design Tokens Origen: design system entregado 2026-05-17. Cargado en via para que las custom properties vivan en :root del documento y se hereden a todos los shadow roots automaticamente. ============================================ */ :root { /* Base palette — neutrals (warm cream tones) */ --oc-cream-50: #fbf9f4; --oc-cream-100: #f8f5ef; --oc-cream-200: #eeeae0; --oc-cream-300: #e2dccc; --oc-cream-400: #c9c2ae; --oc-cream-500: #a8a18c; /* Ink — deep classic blue family */ --oc-ink-900: #050e18; --oc-ink-800: #0a1828; --oc-ink-700: #11243b; --oc-ink-600: #1b3551; --oc-ink-500: #2e4a68; --oc-ink-400: #5a7290; --oc-ink-300: #8fa2b8; --oc-ink-200: #c0ccd9; --oc-ink-100: #e4eaf1; /* Gold — ceremonial accent */ --oc-gold-700: #8e764f; --oc-gold-600: #a38962; --oc-gold-500: #bfa181; /* primary gold */ --oc-gold-400: #d2b996; --oc-gold-300: #e3d2b7; --oc-gold-200: #f0e4d1; --oc-gold-100: #f8f1e4; /* Turquoise — functional accent */ --oc-teal-800: #0f5f5d; --oc-teal-700: #14716e; --oc-teal-600: #178582; /* primary teal */ --oc-teal-500: #2c9d9a; --oc-teal-400: #6bbdba; --oc-teal-300: #a6d8d6; --oc-teal-200: #d4ecec; --oc-teal-100: #eaf6f5; /* Semantic — quotes, gains, losses */ --oc-positive: #2f7d5b; --oc-positive-bg: #e5f0ea; --oc-negative: #b23a3a; --oc-negative-bg: #f4e4e2; --oc-warning: #b07a1a; --oc-warning-bg: #f6ecd6; /* ----- LIGHT MODE (default) ----- */ --bg: var(--oc-cream-100); --bg-elevated: #ffffff; --bg-subtle: var(--oc-cream-200); --bg-deep: var(--oc-cream-300); --bg-inverse: var(--oc-ink-800); --fg: var(--oc-ink-800); --fg-muted: var(--oc-ink-500); --fg-subtle: var(--oc-ink-400); --fg-faint: var(--oc-ink-300); --fg-inverse: var(--oc-cream-100); --border: var(--oc-cream-300); --border-strong: var(--oc-ink-200); --border-hairline: rgba(10, 24, 40, 0.08); --border-gold: var(--oc-gold-500); --accent: var(--oc-teal-600); --accent-fg: #ffffff; --accent-soft: var(--oc-teal-100); --gold: var(--oc-gold-500); --gold-strong: var(--oc-gold-700); --gold-soft: var(--oc-gold-100); --shadow-xs: 0 1px 0 0 rgba(10, 24, 40, 0.04); --shadow-sm: 0 1px 2px rgba(10, 24, 40, 0.06), 0 1px 0 rgba(10, 24, 40, 0.02); --shadow-md: 0 4px 12px -4px rgba(10, 24, 40, 0.1), 0 2px 4px -2px rgba(10, 24, 40, 0.04); --shadow-lg: 0 16px 32px -12px rgba(10, 24, 40, 0.18), 0 4px 8px -4px rgba(10, 24, 40, 0.06); --shadow-inset: inset 0 1px 0 0 rgba(255, 255, 255, 0.6); } [data-theme='dark'] { --bg: var(--oc-ink-900); --bg-elevated: var(--oc-ink-800); --bg-subtle: var(--oc-ink-700); --bg-deep: #020812; --bg-inverse: var(--oc-cream-100); --fg: var(--oc-cream-100); --fg-muted: var(--oc-ink-200); --fg-subtle: var(--oc-ink-300); --fg-faint: var(--oc-ink-400); --fg-inverse: var(--oc-ink-900); --border: var(--oc-ink-600); --border-strong: var(--oc-ink-500); --border-hairline: rgba(191, 161, 129, 0.12); --border-gold: var(--oc-gold-500); --accent: var(--oc-teal-500); --accent-fg: var(--oc-ink-900); --accent-soft: rgba(23, 133, 130, 0.16); --gold: var(--oc-gold-500); --gold-strong: var(--oc-gold-400); --gold-soft: rgba(191, 161, 129, 0.14); --shadow-xs: 0 1px 0 0 rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-md: 0 4px 12px -4px rgba(0, 0, 0, 0.6), 0 2px 4px -2px rgba(0, 0, 0, 0.4); --shadow-lg: 0 16px 32px -12px rgba(0, 0, 0, 0.7), 0 4px 8px -4px rgba(0, 0, 0, 0.5); --shadow-inset: inset 0 1px 0 0 rgba(255, 255, 255, 0.04); } :root { /* Type — three families */ --font-display: 'Cormorant Garamond', 'Source Serif Pro', Georgia, serif; --font-sans: 'Inter Tight', 'Söhne', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace; /* Type scale */ --text-xs: 11px; --text-sm: 13px; --text-base: 15px; --text-md: 17px; --text-lg: 20px; --text-xl: 24px; --text-2xl: 32px; --text-3xl: 44px; --text-4xl: 60px; --text-5xl: 84px; /* Spacing — 4pt base */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; /* Radii — restrained, mostly 4-8px */ --radius-none: 0; --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-xl: 14px; --radius-pill: 999px; /* Layout */ --hairline: 1px solid var(--border-hairline); --hairline-gold: 1px solid var(--gold); --container-max: 1280px; } /* Reset bits — globales del documento. No se replican en shadow roots porque el reset (* / body) no es adoptable a piezas aisladas. Las utility classes (eyebrow, etc.) viven en app.css para que cada shadow root las adopte. */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: var(--font-sans); font-size: var(--text-base); line-height: 1.5; color: var(--fg); background: var(--bg); -webkit-font-smoothing: antialiased; font-feature-settings: 'ss01', 'cv11'; }