/* ===================================================================== tokens.css — SINGLE SOURCE OF TRUTH for iGestionlocative design tokens --------------------------------------------------------------------- RULES: 1. Load this file ONCE, before every other stylesheet. 2. No other file may declare :root or redefine these variables. Other stylesheets only CONSUME them with var(--token). 3. A section that needs different values overrides them on a CLASS, never on :root. e.g. .dark-band { --ink: #fff; } ===================================================================== */ :root { /* ------------------------------------------------------------------- 1. BRAND / INTERACTIVE ------------------------------------------------------------------- */ --blue: #1554f5; --blue-dark: #0b43d9; --focus-ring: rgba(21, 84, 245, 0.12); /* Legacy aliases — the header partial used --orange for the same blue. Kept so old CSS keeps working; prefer --blue / --blue-dark in new code. */ --orange: var(--blue); --orange-dark: var(--blue-dark); /* ------------------------------------------------------------------- 2. INK & TEXT (darkest → lightest) CONFLICT RESOLVED: --ink is #2f4050. One head block declared #0f1c34, but the header partial's :root overrode it to #2f4050, which wins site-wide — so #2f4050 is canonical. #0f1c34 is dropped. Likewise --muted is #62788e (was #828a96, also overridden). ------------------------------------------------------------------- */ --ink-deep: #253342; /* deepest navy: large headings, dark bands */ --ink: #2f4050; /* primary dark: default text, dark panels */ --ink-2: #16263f; /* reserved (currently unused) */ --title: #14213d; /* form labels */ --text: #4a525e; /* body copy */ --muted: #62788e; /* secondary text / captions */ --placeholder: #aeb4bd; /* input + textarea placeholder */ /* Semantic alias used by the header partial */ --title-deep: var(--ink-deep); /* ------------------------------------------------------------------- 3. SURFACES & LINES ------------------------------------------------------------------- */ --white: #ffffff; --bg-soft: #f6f7f9; /* soft grey surface: inputs, light bands */ --bg-page: #f7fbff; /* page background used by header/footer */ --line: #e7e9ee; /* default border / divider */ --line-hover: #d4dae3; /* card hover border */ /* ------------------------------------------------------------------- 4. ON-DARK (text & icons placed over --ink / --ink-deep) ------------------------------------------------------------------- */ --on-dark: #c7ccd4; --on-dark-sub: #aab7cc; --on-dark-icon: #e6eaf1; --on-dark-strong-hover: #cbd4e3; --on-dark-social: #dfe4ec; --accent-soft: #bdddfc; /* light-blue accent on dark bars (promo, kicker) */ /* ------------------------------------------------------------------- 5. OVERLAYS (white over dark, by opacity) ------------------------------------------------------------------- */ --overlay-07: rgba(255, 255, 255, 0.07); --overlay-10: rgba(255, 255, 255, 0.10); --overlay-14: rgba(255, 255, 255, 0.14); --overlay-18: rgba(255, 255, 255, 0.18); --overlay-32: rgba(255, 255, 255, 0.32); /* ------------------------------------------------------------------- 6. RADII ------------------------------------------------------------------- */ --radius: 14px; /* cards */ --radius-md: 12px; /* icon tiles */ --radius-sm: 10px; /* large buttons, logo */ --radius-control: 9px; /* buttons, inputs */ --radius-xs: 8px; /* small chips */ --radius-pill: 999px; /* pills & badges */ /* ------------------------------------------------------------------- 7. ELEVATION ------------------------------------------------------------------- */ --shadow-card: 0 30px 80px -30px rgba(20, 22, 27, 0.32); --shadow-soft: 0 12px 40px -16px rgba(20, 22, 27, 0.14); /* ------------------------------------------------------------------- 8. LAYOUT NOTE: header (1180) and footer (1280) historically used different max widths. They are both kept below; align them if you want one. ------------------------------------------------------------------- */ --container: 1180px; --footer-container: 1280px; /* ------------------------------------------------------------------- 9. TYPOGRAPHY The main pages use "Inter"; the header/footer partials use the "InterVariable" / "ManropeVariable" @font-face faces directly. --font is the canonical body stack; --font-display is the heading stack used by the partials (migrate CSS to these when convenient). ------------------------------------------------------------------- */ --font: "Inter", "InterVariable", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-display: "ManropeVariable", "Inter", "InterVariable", ui-sans-serif, system-ui, sans-serif; /* ------------------------------------------------------------------- 10. FOOTER — legacy namespaced tokens Kept so the existing footer partial works unchanged. Where a footer value equals a core token it is aliased; the rest are footer-only shades. Migrate the footer CSS to the core names when convenient. ------------------------------------------------------------------- */ --footer-ink: var(--ink-deep); --footer-text: #34475a; --footer-muted: #6a7e91; --footer-line: #cfe3f7; --footer-soft: var(--bg-page); --footer-white: var(--white); --footer-blue: var(--blue); --footer-blue-dark: var(--blue-dark); --footer-gold: #f2b705; --footer-bg: #eef6fd; /* footer background */ --footer-link: #52677b; /* footer links & bottom text*/ --footer-dot: rgba(98, 120, 142, 0.34); /* link bullet (muted/alpha) */ --footer-sep: rgba(98, 120, 142, 0.42); /* legal separator */ /* ------------------------------------------------------------------- 11. HEADER / NAVIGATION Tokens used by the header partial (promo bar, sticky header, nav dropdowns, mobile menu). Exact values preserved from the original header CSS so nothing changes visually. NOTE: the promo bar's light-blue (189,221,252 = --accent-soft) and the control borders' light-blue (189,220,252) differ by 1 unit — almost certainly an original typo. Kept distinct; safe to unify. ------------------------------------------------------------------- */ /* Surfaces (translucent) */ --header-bg: rgba(247, 251, 255, 0.92); /* sticky header */ --header-bg-compact: rgba(247, 251, 255, 0.96); /* header on small vps */ --surface-menu: rgba(255, 255, 255, 0.99); /* nav dropdown */ --surface-menu-panel: rgba(251, 253, 255, 0.98); /* mobile menu panel */ --surface-translucent: rgba(255, 255, 255, 0.75);/* mobile menu link bg */ /* Borders & tints — light blue */ --line-accent: rgba(189, 220, 252, 0.9); /* control borders */ --line-accent-soft: rgba(189, 220, 252, 0.72); /* softer border */ --line-accent-faint: rgba(189, 220, 252, 0.45); /* dropdown border */ --line-accent-strong: rgba(189, 220, 252, 0.95); /* mobile panel border */ --tint-accent: rgba(189, 220, 252, 0.28); /* hover background */ --line-promo: rgba(189, 221, 252, 0.16); /* promo bottom border */ --divider-promo: rgba(189, 221, 252, 0.32); /* promo separator */ /* Borders & tints — blue / slate */ --tint-blue: rgba(21, 84, 245, 0.08); /* active / hover bg */ --line-blue: rgba(21, 84, 245, 0.2); /* hover border */ --line-blue-inset: rgba(21, 84, 245, 0.14); /* active inset border */ --focus-slate: rgba(106, 137, 167, 0.24); /* focus outline */ --line-slate-hover: rgba(106, 137, 167, 0.34); /* hover border */ /* Header text */ --header-sub: #6a7e91; /* brand subtitle */ --promo-text: rgba(255, 255, 255, 0.9); /* promo paragraph */ /* Header shadows */ --shadow-menu: 0 16px 40px rgba(56, 73, 89, 0.08); --shadow-control: 0 10px 24px rgba(56, 73, 89, 0.08); --shadow-menu-panel: 0 22px 48px rgba(56, 73, 89, 0.14); --shadow-tip: 0 14px 30px rgba(31, 35, 51, 0.22); }