/* ===================================================== Cercle Solar — Design Tokens v2.0 Source of truth: BrandDesigner (DIS-815, updated 2026-05-26) Supersedes: v1.0 (DIS-183) Aligned with production web tokens (DIS-557) ===================================================== */ /* @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Inter:wght@400;500;600&display=swap'); */ :root { /* === COLORS — Brand primaris (amb valors de producció) HEX · RGB · CMYK · Pantone aprox. ================================================= */ /* Solar Gold: energia, calidesa, optimisme */ --color-solar-gold: #E8A020; /* RGB 232 160 32 · CMYK 0 31 86 9 · PMS 7549 C */ --color-primary: var(--color-solar-gold); --color-primary-hover: #CF8F1A; /* Mediterranean Green: sostenibilitat, confiança, arrelament local */ --color-mediterranean-green: #2D7A5E; /* RGB 45 122 94 · CMYK 63 0 23 52 · PMS 568 C */ --color-secondary: var(--color-mediterranean-green); --color-secondary-hover: #255E48; /* Warm Charcoal: solidesa, llegibilitat */ --color-warm-charcoal: #1C2B3A; /* RGB 28 43 58 · CMYK 52 26 0 77 · PMS 296 C */ --color-dark: var(--color-warm-charcoal); /* === COLORS — Paleta web estesa === */ --color-cream-white: #F9F5EF; /* Fons pàgina principal */ --color-light-sage: #E8F4EF; /* Seccions alternades (tint verd) */ --color-amber-light: #FFF4DC; /* Seccions accent (tint daurat) */ --color-soft-charcoal: #3D4F61; /* Text secundari */ --color-charcoal-muted: #5F6B78; /* Text desenfatitzat, captions — min 16px */ --color-white: #FFFFFF; --color-rule: #D4DCE8; /* Separadors, bordes */ /* Aliases semàntics web (usar sempre a la implementació) */ --color-bg-base: var(--color-cream-white); --color-bg-light: #F4F6F4; --color-bg-section-tint: var(--color-light-sage); --color-bg-dark: var(--color-warm-charcoal); --color-bg-white: var(--color-white); --color-text-primary: var(--color-warm-charcoal); --color-text-secondary: var(--color-soft-charcoal); --color-text-muted: var(--color-charcoal-muted); --color-text-on-dark: var(--color-white); --color-accent-primary: var(--color-mediterranean-green); --color-accent-energy: var(--color-solar-gold); --color-link: var(--color-mediterranean-green); --color-link-hover: var(--color-secondary-hover); --color-gold-light: var(--color-amber-light); --color-green-light: var(--color-light-sage); --color-border: var(--color-rule); /* === COLORS — Alertes === */ --color-alert-success: #2D7A5E; --color-alert-error: #C0392B; --color-alert-info: #2980B9; /* WCAG 2.1 AA verificat: Charcoal sobre Cream 12.4:1 ✅✅ Charcoal sobre Gold 5.8:1 ✅ White sobre Green 5.1:1 ✅ White sobre Charcoal 13.2:1 ✅✅ ⚠️ White sobre Gold 2.9:1 ❌ — NO USAR per a text */ /* === TIPOGRAFIA === */ --font-heading: 'Outfit', system-ui, -apple-system, sans-serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; /* Escala responsiva */ --text-h1: clamp(2.25rem, 3.5vw + 0.5rem, 3.5rem); /* 36–56px */ --text-h2: clamp(1.75rem, 3vw + 0.25rem, 2.5rem); /* 28–40px */ --text-h3: clamp(1.375rem, 2vw + 0.125rem, 1.75rem); /* 22–28px */ --text-h4: 1.25rem; /* 20px */ --text-body-lg: 1.125rem; /* 18px */ --text-body: 1rem; /* 16px */ --text-body-sm: 0.875rem; /* 14px */ --text-caption: 0.8125rem; /* 13px */ --text-label: 0.75rem; /* 12px */ --text-button: 0.9375rem; /* 15px */ /* Pesos i interlineat per rol (ref. style-guide-cto.md) */ --weight-heading-xl: 700; --weight-heading: 600; --weight-body: 400; --weight-medium: 500; --leading-tight: 1.15; --leading-snug: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.65; --leading-loose: 1.7; --tracking-tight: -0.02em; --tracking-snug: -0.015em; --tracking-normal: 0; --tracking-wide: 0.06em; --tracking-wider: 0.08em; --tracking-widest: 0.1em; /* === ESPACIAT (escala named) === */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; --space-4xl: 96px; /* Aliases numèrics (compatibilitat templates anteriors) */ --space-1: var(--space-xs); --space-2: var(--space-sm); --space-4: var(--space-md); --space-6: var(--space-lg); --space-8: var(--space-xl); --space-12: var(--space-2xl); --space-16: var(--space-3xl); --space-24: var(--space-4xl); --section-padding-y: var(--space-4xl); /* 96px desktop */ --section-padding-y-sm: var(--space-2xl); /* 48px mobile */ /* === BORDER RADIUS === */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 20px; --radius-pill: 999px; /* === SHADOWS === */ --shadow-card: 0 2px 8px rgba(28, 43, 58, 0.08); --shadow-card-hover: 0 8px 24px rgba(28, 43, 58, 0.14); --shadow-hero-card: 0 4px 16px rgba(28, 43, 58, 0.15), 0 20px 60px rgba(28, 43, 58, 0.25); --shadow-cta: 0 4px 24px rgba(45, 122, 94, 0.25); /* === LAYOUT === */ --max-width: 1280px; --container-pad: 48px; --header-height: 72px; --layout-gutter: 24px; --layout-gutter-sm: 16px; /* === TRANSITIONS === */ --transition-fast: 0.15s ease; --transition-normal: 0.2s ease; --transition-base: var(--transition-normal); /* alias backward compat */ --transition-slow: 0.3s ease; /* === BOTONS === */ --btn-primary-bg: var(--color-mediterranean-green); --btn-primary-text: var(--color-white); --btn-primary-hover: var(--color-secondary-hover); --btn-primary-radius: var(--radius-pill); --btn-cta-bg: var(--color-solar-gold); --btn-cta-text: var(--color-warm-charcoal); --btn-cta-hover: var(--color-primary-hover); /* === LOGO — Clearspace i mida mínima === Digital horitzontal: mínim 120px d'amplada Digital icona: mínim 24px (favicon), 32px recomanat Impressió horitzontal: mínim 30mm Impressió icona: mínim 8mm Clearspace: 0.5× alçada del logo per tots els costats */ } /* === BREAKPOINTS (referència — usar en @media) Mobile: < 640px → --layout-gutter-sm, --section-padding-y-sm Tablet: 640–1023px Desktop: ≥ 1024px → --layout-gutter, --section-padding-y Wide: ≥ 1280px → --max-width capat ======================================================= */