/* ==========================================================================
IMCOPARTES — Design Tokens
Colors and Type
--------------------------------------------------------------------------
Source of truth: Manual de Marca IMCOPARTES 2023.
Brand palette is intentionally compact: Imcopartes Blue + Process Black.
Everything else (neutrals, surfaces, semantic colors) is derived to
support real product UI without violating the manual.
========================================================================== */
/* ---------- Fonts ---------- */
@font-face {
font-family: "Sofachrome";
src: url("./fonts/Sofachrome-RegularItalic.otf") format("opentype");
font-weight: 400;
font-style: italic;
font-display: swap;
}
/* Montserrat is the brand text family per the manual. Loaded via Google Fonts
when used in HTML. Imported tag (place once in ):
*/
:root {
/* =========================================================
COLOR — BRAND (Manual de Marca, page 9)
========================================================= */
/* Imcopartes Blue — PANTONE 106-16 C, CMYK 100/58/10/1, RGB 20 93 158 */
--imco-blue: #145D9E;
--imco-blue-rgb: 20 93 158;
/* Process Black — PANTONE Process Black, CMYK 75/65/62/81, RGB 34 34 33 */
--imco-black: #222221;
--imco-black-rgb: 34 34 33;
--imco-white: #FFFFFF;
/* =========================================================
COLOR — EXTENDED (derived; for product UI only)
Tints/shades of the brand blue, plus a neutral ramp anchored
to Process Black. Do NOT use these in the official mark.
========================================================= */
--blue-50: #EAF2FA;
--blue-100: #C9DDF0;
--blue-200: #93BCDF;
--blue-300: #5C9BCE;
--blue-400: #2E7BBA;
--blue-500: #145D9E; /* === brand blue === */
--blue-600: #114E84;
--blue-700: #0E3F6B;
--blue-800: #0B3052;
--blue-900: #082338;
/* Cool neutrals that sit comfortably with Process Black (#222221).
L* descending; very slight warm cast to match black temperature. */
--neutral-0: #FFFFFF;
--neutral-50: #F7F7F6;
--neutral-100: #EFEFEE;
--neutral-200: #E2E2E0;
--neutral-300: #C9C9C6;
--neutral-400: #A3A3A0;
--neutral-500: #76766F; /* mid; UI-safe gray */
--neutral-600: #4F4F4B;
--neutral-700: #3A3A37;
--neutral-800: #2C2C2A;
--neutral-900: #222221; /* === brand black === */
--neutral-950: #161615;
/* =========================================================
COLOR — SEMANTIC (UI only; not part of the mark)
========================================================= */
--success: #1F8A5B;
--success-soft: #E4F4EC;
--warning: #C57A12;
--warning-soft: #FBEFD9;
--danger: #B0271E;
--danger-soft: #F8E1DE;
--info: var(--blue-500);
--info-soft: var(--blue-50);
/* =========================================================
COLOR — ROLES (use these in components)
========================================================= */
/* Surface */
--bg: var(--neutral-0);
--bg-muted: var(--neutral-50);
--bg-subtle: var(--neutral-100);
--bg-inverse: var(--neutral-900);
--surface: var(--neutral-0);
--surface-raised: var(--neutral-0);
--surface-sunken: var(--neutral-50);
/* Foreground */
--fg: var(--neutral-900); /* primary text */
--fg-muted: var(--neutral-600); /* secondary text */
--fg-subtle: var(--neutral-500); /* tertiary / placeholder */
--fg-disabled: var(--neutral-400);
--fg-on-blue: var(--neutral-0);
--fg-on-black: var(--neutral-0);
/* Borders + lines */
--border: var(--neutral-200);
--border-strong: var(--neutral-300);
--border-inverse: var(--neutral-700);
--divider: var(--neutral-100);
/* Brand / accent */
--accent: var(--blue-500);
--accent-hover: var(--blue-600);
--accent-press: var(--blue-700);
--accent-soft: var(--blue-50);
--accent-fg: var(--neutral-0);
/* Focus ring (WCAG 3:1 against bg + accent) */
--focus-ring: 0 0 0 3px rgb(var(--imco-blue-rgb) / 0.35);
/* =========================================================
SPACING
4-pt scale, named for easy composition.
========================================================= */
--space-0: 0;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
--space-20: 80px;
--space-24: 96px;
--space-32: 128px;
/* =========================================================
RADII — modest. The wordmark uses bold geometric shapes
with sharp terminals; UI follows suit (no pill-everywhere).
========================================================= */
--radius-none: 0;
--radius-xs: 2px;
--radius-sm: 4px;
--radius-md: 6px;
--radius-lg: 10px;
--radius-xl: 16px;
--radius-pill: 999px;
/* =========================================================
SHADOWS — flat-ish; product cards use a single quiet shadow,
CTAs use a touch of brand-blue glow on focus.
========================================================= */
--shadow-xs: 0 1px 1px rgb(34 34 33 / 0.04);
--shadow-sm: 0 1px 2px rgb(34 34 33 / 0.06), 0 1px 3px rgb(34 34 33 / 0.04);
--shadow-md: 0 4px 12px rgb(34 34 33 / 0.08), 0 1px 2px rgb(34 34 33 / 0.04);
--shadow-lg: 0 12px 32px rgb(34 34 33 / 0.12), 0 2px 6px rgb(34 34 33 / 0.06);
--shadow-blue: 0 6px 18px rgb(20 93 158 / 0.28);
/* =========================================================
MOTION
========================================================= */
--ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
--ease-in-out: cubic-bezier(0.45, 0, 0.2, 1);
--duration-fast: 120ms;
--duration-base: 200ms;
--duration-slow: 320ms;
/* =========================================================
TYPE — FAMILIES
========================================================= */
--font-display: "Sofachrome", "Eurostile Extended", "Bank Gothic",
"Arial Black", system-ui, sans-serif;
--font-sans: "Montserrat", system-ui, -apple-system, "Segoe UI",
Roboto, "Helvetica Neue", Arial, sans-serif;
--font-mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo,
Consolas, monospace;
/* =========================================================
TYPE — SCALE (modular ~1.25)
========================================================= */
--fs-xs: 12px;
--fs-sm: 14px;
--fs-md: 16px; /* base */
--fs-lg: 18px;
--fs-xl: 20px;
--fs-2xl: 24px;
--fs-3xl: 30px;
--fs-4xl: 38px;
--fs-5xl: 48px;
--fs-6xl: 60px;
--fs-7xl: 76px;
--lh-tight: 1.1;
--lh-snug: 1.25;
--lh-normal: 1.5;
--lh-loose: 1.7;
--fw-light: 300;
--fw-regular: 400;
--fw-medium: 500;
--fw-semibold: 600;
--fw-bold: 700;
--fw-black: 900;
--tracking-tight: -0.02em;
--tracking-normal: 0;
--tracking-wide: 0.04em;
--tracking-wider: 0.12em; /* used in eyebrows / SECTION CHIPS */
}
/* ==========================================================================
SEMANTIC TYPE STYLES
Applied as classes (.h1, .body) OR auto-applied to native elements when
imported globally.
========================================================================== */
.font-display,
.display {
font-family: var(--font-display);
font-style: italic; /* Sofachrome is delivered italic — preserve */
font-weight: 400;
letter-spacing: var(--tracking-normal);
text-transform: uppercase;
}
.h1, h1 {
font-family: var(--font-sans);
font-size: var(--fs-6xl);
font-weight: var(--fw-black);
line-height: var(--lh-tight);
letter-spacing: var(--tracking-tight);
color: var(--fg);
text-wrap: balance;
}
.h2, h2 {
font-family: var(--font-sans);
font-size: var(--fs-4xl);
font-weight: var(--fw-bold);
line-height: var(--lh-snug);
letter-spacing: var(--tracking-tight);
color: var(--fg);
text-wrap: balance;
}
.h3, h3 {
font-family: var(--font-sans);
font-size: var(--fs-2xl);
font-weight: var(--fw-bold);
line-height: var(--lh-snug);
color: var(--fg);
}
.h4, h4 {
font-family: var(--font-sans);
font-size: var(--fs-xl);
font-weight: var(--fw-semibold);
line-height: var(--lh-snug);
color: var(--fg);
}
.eyebrow {
font-family: var(--font-sans);
font-size: var(--fs-xs);
font-weight: var(--fw-bold);
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--accent);
}
.lead {
font-family: var(--font-sans);
font-size: var(--fs-lg);
font-weight: var(--fw-regular);
line-height: var(--lh-normal);
color: var(--fg-muted);
text-wrap: pretty;
}
.body, p {
font-family: var(--font-sans);
font-size: var(--fs-md);
font-weight: var(--fw-regular);
line-height: var(--lh-normal);
color: var(--fg);
}
.body-sm, small {
font-family: var(--font-sans);
font-size: var(--fs-sm);
font-weight: var(--fw-regular);
line-height: var(--lh-normal);
color: var(--fg-muted);
}
.caption {
font-family: var(--font-sans);
font-size: var(--fs-xs);
font-weight: var(--fw-medium);
letter-spacing: 0.02em;
color: var(--fg-subtle);
}
.label {
font-family: var(--font-sans);
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
letter-spacing: 0.01em;
color: var(--fg);
}
code, .code {
font-family: var(--font-mono);
font-size: 0.92em;
background: var(--neutral-100);
padding: 0.1em 0.35em;
border-radius: var(--radius-xs);
color: var(--neutral-800);
}