/* ===================================================================== IntegraDox — Theme tokens (BASE / LIGHT) — v6 "Mix razonado" ===================================================================== Concept: cream paper field + saturated deep navy primary + terracotta clay accent + 7 earth-tone module accents. Sans display (Inter Tight), serif kept available only for one editorial moment (the "problem" beat). Reads: theme.css ships LIGHT defaults in :root. dark.css overrides semantic role tokens when [data-theme="dark"]. Components NEVER read raw palette colors — only semantic --idx-* tokens. ===================================================================== */ :root { color-scheme: light; /* ---------- Ink scale (cool neutrals, slight blue undertone) ---------- */ --idx-ink-1000: #0A0E1A; /* darkest — dark theme bg + display text on light */ --idx-ink-900: #14192A; /* body text on light */ --idx-ink-800: #1E2334; /* secondary surface dark */ --idx-ink-700: #3A4156; /* muted text */ --idx-ink-500: #6B7286; /* tertiary text, captions */ --idx-ink-400: #9CA3AF; /* placeholder, subtle */ --idx-ink-300: #C7CBD7; /* hairlines on dark */ --idx-ink-200: #E3E5ED; /* hairlines on light, grid motif */ --idx-ink-100: #EFF0F4; /* subtle surface */ /* ---------- Paper (warm cream — load-bearing brand color) ---------- */ --idx-paper: #F7F4ED; --idx-paper-2: #FBF9F3; /* ---------- Brand: navy + clay ---------- */ --idx-navy-900: #0F2255; --idx-navy-700: #1A3478; /* primary — saturated, "deep navy" */ --idx-navy-500: #2E4A8C; /* hover */ --idx-navy-300: #6F84B0; /* on dark surfaces */ --idx-navy-100: #DCE3EF; --idx-clay-700: #8C3A1F; --idx-clay-500: #B8552E; /* accent — used ONCE per viewport */ --idx-clay-300: #E2A285; --idx-clay-100: #F4DDD0; /* Supporting semantics */ --idx-sage: #2F6E68; /* success / banking-friendly */ --idx-brick: #A24A3A; /* danger — same family as clay, lower chroma */ --idx-slate: #4E5B6E; /* info / neutral data */ /* ---------- Module accents (used ONLY in modules section) ---------- */ --idx-mod-admin: #1A3478; /* deep navy — the spine, echoes primary */ --idx-mod-account: #5C4E8C; /* aubergine — accounting / IFRS */ --idx-mod-bank: #2F6E68; /* teal-green — banking, reconciliation */ --idx-mod-payroll: #B8552E; /* clay (echoes brand accent) — payroll */ --idx-mod-asset: #8A6A3B; /* bronze — fixed assets, tangibility */ --idx-mod-lease: #6E5050; /* mauve-brown — contracts */ --idx-mod-prod: #3F4A55; /* graphite — production, coming soon */ /* ---------- Semantic roles (light defaults) ---------- */ --idx-bg: var(--idx-paper); --idx-bg-subtle: var(--idx-ink-100); --idx-bg-strong: var(--idx-ink-1000); --idx-surface: #FFFFFF; --idx-surface-2: var(--idx-paper-2); --idx-fg: var(--idx-ink-900); --idx-fg-display: var(--idx-ink-1000); --idx-fg-muted: var(--idx-ink-700); --idx-fg-subtle: var(--idx-ink-500); --idx-fg-on-strong: var(--idx-paper); --idx-border: var(--idx-ink-200); --idx-border-strong: var(--idx-ink-300); --idx-primary: var(--idx-navy-700); --idx-primary-fg: #FFFFFF; --idx-primary-hover: var(--idx-navy-900); --idx-primary-press: var(--idx-navy-900); --idx-primary-soft: var(--idx-navy-100); --idx-accent: var(--idx-clay-500); --idx-accent-fg: var(--idx-ink-1000); --idx-accent-soft: var(--idx-clay-100); /* ---------- Blog editorial accent (slate family) ---------- Used ONLY in /blog views. Keeps the blog feeling like a sibling surface (sober, editorial) without touching --idx-primary (navy) which governs the rest of the marketing site. Derived from the existing --idx-slate token. */ --idx-blog-accent: #3B4862; /* slate-navy, chip text + body links */ --idx-blog-accent-soft: #5A6B8A; /* hover state, secondary slate */ --idx-blog-bar: #3B4862; /* editorial bar above h2 in body */ /* ---------- Typography ---------- */ --idx-font-sans: "Inter Tight Variable", "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; --idx-font-serif: "Source Serif 4 Variable", "Source Serif 4", "Source Serif Pro", ui-serif, Georgia, "Times New Roman", serif; --idx-font-mono: "JetBrains Mono Variable", "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Menlo, Consolas, monospace; /* Type scale (rem; 1rem = 16px) */ --idx-text-xs: 0.75rem; --idx-text-sm: 0.875rem; --idx-text-base: 1rem; --idx-text-md: 1.0625rem; --idx-text-lg: 1.25rem; --idx-text-xl: 1.5rem; --idx-text-2xl: 2rem; --idx-text-3xl: 2.625rem; --idx-display-sm: clamp(2.5rem, 4vw, 3.25rem); --idx-display: clamp(2.5rem, 5vw, 3.875rem); /* hero H1 — sans, NOT serif */ --idx-weight-regular: 400; --idx-weight-medium: 500; --idx-weight-semibold: 600; --idx-weight-bold: 700; --idx-leading-display: 1.05; --idx-leading-tight: 1.15; --idx-leading-snug: 1.4; --idx-leading-normal: 1.55; --idx-tracking-display: -0.032em; --idx-tracking-tight: -0.025em; --idx-tracking-normal: 0; --idx-tracking-eyebrow: 0.08em; /* ---------- Spacing scale (8px base + 4px half-step) ---------- */ --idx-space-0_5: 0.25rem; --idx-space-1: 0.5rem; --idx-space-1_5: 0.75rem; --idx-space-2: 1rem; --idx-space-3: 1.5rem; --idx-space-4: 2rem; --idx-space-5: 2.5rem; --idx-space-6: 3rem; --idx-space-7: 3.5rem; --idx-space-8: 4rem; --idx-space-12: 6rem; --idx-space-16: 8rem; --idx-space-24: 12rem; /* ---------- Radius — sharp, deliberate ---------- */ --idx-radius-sm: 4px; --idx-radius: 6px; --idx-radius-lg: 10px; /* ---------- Elevation — barely-there ---------- */ --idx-shadow-hairline: inset 0 0 0 1px var(--idx-ink-200); --idx-shadow-sm: 0 1px 0 rgba(10,14,26,.04), 0 1px 2px rgba(10,14,26,.04); --idx-shadow-md: 0 6px 20px -6px rgba(10,14,26,.10); --idx-shadow-lift: 0 18px 40px -16px rgba(10,14,26,.18), 0 2px 4px rgba(10,14,26,.04); --idx-shadow-focus: 0 0 0 2px var(--idx-paper), 0 0 0 4px var(--idx-primary); /* ---------- Motion ---------- */ --idx-ease: cubic-bezier(0.2, 0, 0, 1); --idx-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --idx-dur-fast: 120ms; --idx-dur: 200ms; --idx-dur-slow: 400ms; /* ---------- Layout ---------- */ --idx-container-max: 1240px; --idx-container-pad: clamp(20px, 5vw, 40px); --idx-section-y: clamp(96px, 12vw, 144px); /* ---------- The brand motif: 8x8 hairline grid background ---------- */ --idx-grid: linear-gradient(to right, var(--idx-ink-200) 1px, transparent 1px), linear-gradient(to bottom, var(--idx-ink-200) 1px, transparent 1px); /* ---------- Bridge to Bootstrap 5 variables ---------- */ --bs-primary: var(--idx-primary); --bs-primary-rgb: 26, 52, 120; --bs-link-color: var(--idx-primary); --bs-link-hover-color: var(--idx-primary-hover); --bs-body-bg: var(--idx-bg); --bs-body-color: var(--idx-fg); --bs-body-font-family: var(--idx-font-sans); --bs-border-color: var(--idx-border); --bs-border-radius: var(--idx-radius); --bs-success: var(--idx-sage); --bs-danger: var(--idx-brick); --bs-info: var(--idx-slate); }