/* ============================================================ Clickable Studio — Design System: Colors & Typography Source: Manual de Identidad Clickable Studio ============================================================ */ /* ── FONT FACES ─────────────────────────────────────────── */ /* Montserrat now loads from Google Fonts (see preconnect + stylesheet link in every page) — pre-compressed WOFF2, ~5-6x smaller than the local OTF files this project shipped with, and often already cached by visitors' browsers from other sites. Local OTFs are still in fonts/ if ever needed. */ /* ── COLOR TOKENS ────────────────────────────────────────── */ :root { /* Brand Primary */ --color-black: #000000; --color-red: #C60000; --color-white: #FFFFFF; /* Brand Secondary */ --color-gray: #474F58; --color-dark-red: #6B0000; /* Semantic — Foreground */ --fg1: var(--color-black); --fg2: var(--color-gray); --fg-inverse: var(--color-white); --fg-accent: var(--color-red); /* Semantic — Background */ --bg-primary: var(--color-white); --bg-dark: var(--color-black); --bg-muted: #F4F4F4; --bg-accent: var(--color-red); --bg-accent-dark: var(--color-dark-red); --bg-gray: var(--color-gray); /* Semantic — Border */ --border-default: var(--color-black); --border-muted: #DEDEDE; --border-accent: var(--color-red); /* ── TYPOGRAPHY TOKENS ───────────────────────────────── */ --font-primary: 'Montserrat', sans-serif; /* Font Weights */ --fw-thin: 100; --fw-extralight: 200; --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; --fw-black: 900; /* Type Scale */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2.25rem; /* 36px */ --text-5xl: 3rem; /* 48px */ --text-6xl: 4rem; /* 64px */ /* Line Heights */ --leading-tight: 1.1; --leading-snug: 1.3; --leading-normal: 1.5; --leading-relaxed: 1.75; /* Letter Spacing */ --tracking-tight: -0.02em; --tracking-normal: 0em; --tracking-wide: 0.05em; --tracking-wider: 0.1em; --tracking-widest: 0.2em; /* ── SPACING TOKENS ─────────────────────────────────── */ --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; /* ── RADIUS ──────────────────────────────────────────── */ --radius-none: 0px; --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; --radius-full: 9999px; /* ── SHADOWS ─────────────────────────────────────────── */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.12); --shadow-md: 0 4px 12px rgba(0,0,0,0.18); --shadow-lg: 0 8px 24px rgba(0,0,0,0.22); } /* ── SEMANTIC ELEMENT STYLES ─────────────────────────────── */ body { font-family: var(--font-primary); font-weight: var(--fw-regular); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--fg1); background: var(--bg-primary); -webkit-font-smoothing: antialiased; } h1 { font-family: var(--font-primary); font-weight: var(--fw-black); font-size: var(--text-5xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--fg1); text-transform: uppercase; } h2 { font-family: var(--font-primary); font-weight: var(--fw-bold); font-size: var(--text-3xl); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); color: var(--fg1); } h3 { font-family: var(--font-primary); font-weight: var(--fw-semibold); font-size: var(--text-xl); line-height: var(--leading-snug); color: var(--fg1); } h4 { font-family: var(--font-primary); font-weight: var(--fw-medium); font-size: var(--text-lg); line-height: var(--leading-normal); color: var(--fg1); } p { font-family: var(--font-primary); font-weight: var(--fw-regular); font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--fg1); } small, .caption { font-family: var(--font-primary); font-weight: var(--fw-regular); font-size: var(--text-sm); color: var(--fg2); } .label { font-family: var(--font-primary); font-weight: var(--fw-semibold); font-size: var(--text-xs); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--fg2); } .display { font-family: var(--font-primary); font-weight: var(--fw-black); font-size: var(--text-6xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); text-transform: uppercase; }