/* ============================================================ COLORS — Grupo Martec dual-brand token system ------------------------------------------------------------ ONE neutral base, TWO accent expressions: • MÉTODO (PMECOMMERCE) → accent = gold, warmer • TECNOLOGIA (martec.app) → accent = purple/navy, cooler Default = dark + Tecnologia. Switch with: Every semantic token resolves in all four combinations. ============================================================ */ :root { /* ---- Brand palette (raw, mode-independent) ---- */ --m-purple-700: #36285F; --m-purple-600: #43337A; --m-purple-500: #503F8F; /* brand primary purple */ --m-purple-400: #6B57C4; --m-purple-300: #8C7BE0; --m-purple-200: #B4A8F0; --m-gold-600: #C99E0A; --m-gold-500: #F3C414; /* brand gold */ --m-gold-400: #FFD63D; --m-gold-200: #FFE891; --m-navy-700: #0E2B50; --m-navy-600: #143D70; /* brand navy */ --m-navy-500: #1F5599; --m-navy-400: #3B79C7; --m-orange-500: #E8772E; /* keyword accent */ --m-orange-400: #FF9145; --m-green-500: #2FAE6A; /* keyword accent / positive */ --m-green-400: #46D389; --m-red-500: #E5484D; /* negative / destructive */ --m-red-400: #FF6369; /* ---- Neutral ink ramp (telemetry near-black → white) ---- */ --ink-950: #07080B; --ink-900: #0A0C11; --ink-850: #0E1017; --ink-800: #12151D; --ink-700: #181C26; --ink-600: #222734; --ink-500: #2E3543; --ink-400: #3D4555; --ink-300: #5A6477; --ink-200: #828D9F; --ink-150: #A6B0BF; --ink-100: #C7CED9; --ink-50: #E7EBF0; --ink-0: #F6F8FB; /* ============================================================ SEMANTIC TOKENS — DARK base (default) ============================================================ */ --bg-base: var(--ink-950); --bg-sunken: #050609; --surface-1: var(--ink-850); /* page sections */ --surface-2: var(--ink-800); /* cards */ --surface-3: var(--ink-700); /* raised / hover */ --surface-inset: var(--ink-900); /* wells, terminal */ --border-subtle: rgba(255,255,255,0.06); --border-default: rgba(255,255,255,0.10); --border-strong: rgba(255,255,255,0.18); --text-primary: #F4F6FA; --text-secondary: var(--ink-150); --text-tertiary: var(--ink-200); --text-muted: var(--ink-300); --text-inverse: var(--ink-950); --focus-ring: #8C7BE0; /* status (mode-independent) */ --status-positive: var(--m-green-400); --status-warning: var(--m-gold-400); --status-negative: var(--m-red-400); --status-online: var(--m-green-400); /* keyword highlight roles used in headlines */ --kw-gold: var(--m-gold-400); --kw-orange: var(--m-orange-400); --kw-green: var(--m-green-400); --kw-purple: var(--m-purple-300); /* ============================================================ ACCENT — defaults to TECNOLOGIA (martec.app) ============================================================ */ --accent: var(--m-purple-400); --accent-hover: var(--m-purple-300); --accent-active: var(--m-purple-500); --accent-contrast: #FFFFFF; /* text/icon on accent fill */ --accent-soft: rgba(107,87,196,0.14); --accent-border: rgba(140,123,224,0.40); --accent-deep: var(--m-navy-600); /* secondary cool accent */ --accent-glow: rgba(107,87,196,0.35); color-scheme: dark; } /* ============================================================ MODE: TECNOLOGIA (martec.app) — explicit, same as default cool, monochromatic + 1 accent ============================================================ */ :root[data-mode="tech"] { --accent: var(--m-purple-400); --accent-hover: var(--m-purple-300); --accent-active: var(--m-purple-500); --accent-contrast: #FFFFFF; --accent-soft: rgba(107,87,196,0.14); --accent-border: rgba(140,123,224,0.40); --accent-deep: var(--m-navy-600); --accent-glow: rgba(107,87,196,0.35); --focus-ring: #8C7BE0; } /* ============================================================ MODE: MÉTODO (PMECOMMERCE) — warm, gold-led, editorial ============================================================ */ :root[data-mode="method"] { --accent: var(--m-gold-500); --accent-hover: var(--m-gold-400); --accent-active: var(--m-gold-600); --accent-contrast: var(--ink-950); /* dark text on gold */ --accent-soft: rgba(243,196,20,0.12); --accent-border: rgba(243,196,20,0.38); --accent-deep: var(--m-purple-500); --accent-glow: rgba(243,196,20,0.30); --focus-ring: #FFD63D; } /* ============================================================ THEME: LIGHT (near-white base) — both modes resolve on top ============================================================ */ :root[data-theme="light"] { --bg-base: #F6F8FB; --bg-sunken: #ECEFF4; --surface-1: #FFFFFF; --surface-2: #FFFFFF; --surface-3: #F1F4F8; --surface-inset: #0A0C11; /* terminal stays dark */ --border-subtle: rgba(10,12,17,0.07); --border-default: rgba(10,12,17,0.12); --border-strong: rgba(10,12,17,0.20); --text-primary: #0A0C11; --text-secondary: #3D4555; --text-tertiary: #5A6477; --text-muted: #828D9F; --text-inverse: #F6F8FB; color-scheme: light; } :root[data-theme="light"][data-mode="tech"] { --accent: var(--m-purple-500); --accent-hover: var(--m-purple-600); --accent-active: var(--m-purple-700); --accent-contrast: #FFFFFF; --accent-soft: rgba(80,63,143,0.10); --accent-border: rgba(80,63,143,0.30); } :root[data-theme="light"][data-mode="method"] { --accent: var(--m-gold-500); --accent-hover: var(--m-gold-600); --accent-active: var(--m-gold-600); --accent-contrast: var(--ink-950); --accent-soft: rgba(243,196,20,0.16); --accent-border: rgba(201,158,10,0.40); }