/* ========================================================= GD Project Solutions — Color tokens Copper / Steel / Bone. Copper is a disciplined accent, split into background fill vs text so it always passes WCAG 2.2 AA. ========================================================= */ :root { color-scheme: light; /* ---------- Steel — primary neutral (acero) ---------- */ --steel-950: #0E0E10; /* deepest control surface */ --steel-900: #1C1C1E; /* ink / primary dark surface */ --steel-800: #2A2A2D; --steel-700: #3A3A3C; /* secondary text (denim) */ --steel-600: #4B4D52; --steel-500: #5F6368; /* muted text */ --steel-400: #8B9099; /* faint text */ --steel-300: #B7BBC2; --steel-200: #D7CEC3; /* hairline on light */ --steel-100: #E7E2DC; --steel-050: #F5F1EC; /* bone — page background */ /* ---------- Copper — single brand accent ---------- Split for AA on white: -700/-800 carry white or sit as text, -500 is decorative only (rules, dots, focus halo, hairlines). */ --copper-900: #6E2D11; --copper-800: #8F3F16; /* ACCENT TEXT on #FFF — 7.27:1 AA */ --copper-700: #A44920; /* ACCENT FILL with white text — 5.91:1 AA */ --copper-600: #B85A28; --copper-500: #C45D2C; /* DECORATIVE fill / primary copper */ --copper-400: #D4713F; --copper-300: #E69266; /* eyebrows + links on dark */ --copper-200: #F0BEA4; --copper-100: #F4DCCC; --copper-050: #FBF1EA; /* Bone (hueso) is the page wash, aliased from steel-050. */ --bone: var(--steel-050); /* ---------- Signal — vivid, decisive (warm tints) ---------- */ --signal-success: #0E8A43; /* strong green — AA on white */ --signal-success-bg: #EAF1DB; /* warm green tint */ --signal-warn: #C56A00; /* strong amber */ --signal-warn-bg: #FBEAC6; /* warm amber tint */ --signal-error: #D12B1E; /* strong red — AA on white */ --signal-error-bg: #FCE4D8; /* warm peach tint */ --signal-info: #1563C9; /* strong blue */ --signal-info-bg: #EBEAEF; /* warmed neutral-blue tint */ --white: #FFFFFF; --black: #000000; /* ---------- Brand / logo-specific ---------- The official LinkedIn mark uses navy ink, NOT pure steel. Reserved for the logo lockup only — body text + dark surfaces still use --steel-900. */ --brand-navy: #1B1D32; /* ---------- Semantic aliases ---------- */ --bg: var(--white); --bg-bone: var(--steel-050); --bg-dark: var(--steel-900); --bg-darkest: var(--steel-950); --fg: var(--steel-900); /* primary text on light */ --fg-muted: var(--steel-500); /* secondary on light */ --fg-faint: var(--steel-400); --fg-on-dark: #FFFFFF; /* primary text on dark */ --fg-on-dark-mute: var(--steel-300); --line: var(--steel-200); /* hairline on light */ --line-strong: var(--steel-300); --line-on-dark: rgba(255,255,255,.10); --accent-bg: var(--copper-700); /* fills with WHITE text (AA 5.91:1) */ --accent-bg-hover: var(--copper-800); /* darker on hover (AA 7.27:1) */ --accent-decor: var(--copper-500); /* DECORATIVE only — rules, dots, focus halo */ --accent-text: var(--copper-800); /* anchors, eyebrows on white (AA 7.27:1) */ --accent-text-on-dark: var(--copper-300); /* eyebrows + links on dark */ --accent-soft: rgba(196,93,44,.06);/* copper-050 fill */ --accent-ring: rgba(196,93,44,.18);/* focus halo */ --surface-card: var(--white); --surface-card-on-dark: rgba(255,255,255,.035); --focus-ring: 0 0 0 3px var(--accent-ring); --focus-outline: 2px solid var(--accent-decor); /* Signal text/border aliases — flip in dark so form states keep AA. */ --signal-error-text: var(--signal-error); --signal-success-text: var(--signal-success); --signal-error-border: rgba(209,43,30,.6); --signal-success-border: rgba(14,138,67,.45); --signal-error-ring: rgba(209,43,30,.14); } ::selection { background: var(--copper-500); color: var(--white); } /* ========================================================= THEME tokens — light (default) + dark (auto via OS, or forced with html[data-theme]). Components reference these so the whole UI flips between modes from one place. ========================================================= */ :root { --page-bg: #E9E2D7; --surface-1: #FFFFFF; --surface-2: #FFFFFF; --surface-3: #F4EFE7; --surface-hover: #FFFFFF; --ink: #1C1C1E; --ink-2: #5A5E63; --ink-3: #82868E; --hairline: rgba(28,28,30,.15); --hairline-2: rgba(28,28,30,.24); --accent-ink: var(--copper-800); --accent-line: var(--copper-500); --accent-chip-bg: rgba(196,93,44,.08); --accent-chip-bd: rgba(196,93,44,.30); --card-shadow: 0 12px 34px rgba(7,20,38,.14); --glow-strong: rgba(196,93,44,.08); --glow-soft: rgba(196,93,44,.05); --topbar-bg: rgba(255,255,255,.85); --topbar-border: rgba(28,28,30,.10); color-scheme: light; } :root[data-theme="dark"] { --page-bg: #17181D; --surface-1: rgba(255,255,255,.045); --surface-2: rgba(255,255,255,.028); --surface-3: rgba(20,20,24,.55); --surface-hover: rgba(255,255,255,.06); --ink: #FFFFFF; --ink-2: #B7BBC2; --ink-3: #8B9099; --hairline: rgba(255,255,255,.10); --hairline-2: rgba(255,255,255,.18); --accent-ink: var(--copper-300); --accent-line: var(--copper-400); --accent-chip-bg: rgba(199,100,50,.14); --accent-chip-bd: rgba(227,144,97,.30); --card-shadow: 0 18px 44px rgba(0,0,0,.42); --glow-strong: rgba(196,93,44,.15); --glow-soft: rgba(196,93,44,.10); color-scheme: dark; /* original semantic tokens (used by the home + legal pages) flip too */ --bg: #17181D; --bg-bone: #1E1F25; --bg-dark: #14151A; --bg-darkest: #0E0E10; --fg: #FFFFFF; --fg-muted: #B7BBC2; --fg-faint: #8B9099; --line: rgba(255,255,255,.10); --line-strong: rgba(255,255,255,.20); --accent-text: var(--copper-300); --accent-soft: rgba(199,100,50,.10); --surface-card: rgba(255,255,255,.045); --topbar-bg: rgba(23,24,29,.82); --topbar-border: rgba(255,255,255,.08); --signal-error-text: #F08374; --signal-success-text: #5BC487; --signal-error-border: rgba(240,131,116,.55); --signal-success-border: rgba(91,196,135,.4); --signal-error-ring: rgba(240,131,116,.18); }