/* ============================================================================= VARIABLES.CSS Design Tokens for Caparros UI All CSS custom properties (variables) are defined here. Edit this file to change the entire design system at once. ============================================================================= */ :root { /* --------------------------------------------------------------------------- COLOR PALETTE Ivory / Stone / Champagne luxury editorial system --------------------------------------------------------------------------- */ /* Background Colors */ --color-bg-primary: #F7F3ED; /* warm ivory — main page background */ --color-bg-secondary: #EEE9E1; /* soft stone — section alternates */ --color-bg-tertiary: #E8E2D9; /* champagne beige — cards, sidebars */ --color-bg-dark: #1E1A17; /* espresso — dark sections, footer */ --color-bg-dark-secondary: #2A2420; /* slightly lighter espresso */ /* Surface / Component Colors */ --color-surface-card: #F2EDE6; /* card background */ --color-surface-input: #FFFCF8; /* form input background */ --color-surface-overlay: rgba(30, 26, 23, 0.92); /* dark overlay */ /* Text Colors */ --color-text-primary: #1E1A17; /* deep charcoal — primary headings */ --color-text-secondary: #4A4440; /* espresso brown — body text */ --color-text-muted: #8C837A; /* muted warm gray — captions, meta */ --color-text-on-dark: #F2EDE6; /* ivory text on dark backgrounds */ --color-text-on-dark-muted: #A09690; /* muted text on dark backgrounds */ /* Accent Colors */ --color-accent-gold: #B8965A; /* antique gold — primary accent */ --color-accent-gold-light: #D4B07A; /* soft gold — hover states */ --color-accent-gold-dark: #8C6E3C; /* dark gold — pressed states */ --color-accent-bronze: #9E7B4A; /* bronze — secondary accent */ /* Border and Divider Colors */ --color-border-light: #DDD7CE; /* soft champagne-gray border */ --color-border-medium: #C8BFB4; /* slightly more visible border */ --color-border-dark: #3A3430; /* border on dark backgrounds */ /* State Colors */ --color-focus-ring: #B8965A; /* focus outline — gold */ --color-error: #C0392B; /* form error */ --color-success: #27734C; /* form success */ /* --------------------------------------------------------------------------- TYPOGRAPHY --------------------------------------------------------------------------- */ /* Font Families */ --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; /* Font Sizes — Fluid Clamp Scale */ --font-size-xs: 0.6875rem; /* 11px */ --font-size-sm: 0.8125rem; /* 13px */ --font-size-base: 1rem; /* 16px */ --font-size-md: 1.125rem; /* 18px */ --font-size-lg: 1.375rem; /* 22px */ --font-size-xl: 1.75rem; /* 28px */ --font-size-2xl: 2.25rem; /* 36px */ --font-size-3xl: 3rem; /* 48px */ --font-size-4xl: 3.75rem; /* 60px */ --font-size-5xl: clamp(3.5rem, 7vw, 6rem); /* Hero headline — fluid */ --font-size-6xl: clamp(4rem, 9vw, 8rem); /* Display scale — fluid */ /* Font Weights */ --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* Line Heights */ --line-height-tight: 1.1; --line-height-snug: 1.25; --line-height-normal: 1.5; --line-height-relaxed: 1.7; --line-height-loose: 1.9; /* Letter Spacings */ --letter-spacing-tightest: -0.04em; --letter-spacing-tight: -0.02em; --letter-spacing-normal: 0em; --letter-spacing-wide: 0.05em; --letter-spacing-wider: 0.1em; --letter-spacing-widest: 0.15em; /* --------------------------------------------------------------------------- SPACING SCALE Based on 4px base unit --------------------------------------------------------------------------- */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-14: 3.5rem; /* 56px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-28: 7rem; /* 112px */ --space-32: 8rem; /* 128px */ --space-40: 10rem; /* 160px */ --space-48: 12rem; /* 192px */ /* Section Padding — top and bottom */ --section-padding-sm: clamp(3rem, 6vw, 5rem); --section-padding-md: clamp(4rem, 8vw, 7rem); --section-padding-lg: clamp(5rem, 10vw, 10rem); --section-padding-xl: clamp(6rem, 12vw, 14rem); /* --------------------------------------------------------------------------- LAYOUT / CONTAINERS --------------------------------------------------------------------------- */ --container-max-width: 1400px; --container-padding-x: clamp(1.25rem, 4vw, 5rem); --container-padding-x-wide: clamp(1.25rem, 6vw, 7rem); --grid-gap: 2rem; --grid-gap-large: 3rem; /* --------------------------------------------------------------------------- BORDER RADIUS --------------------------------------------------------------------------- */ --radius-sm: 0.25rem; /* 4px */ --radius-md: 0.5rem; /* 8px */ --radius-lg: 0.75rem; /* 12px */ --radius-xl: 1rem; /* 16px */ --radius-2xl: 1.5rem; /* 24px */ --radius-full: 999px; /* pill / circle */ /* --------------------------------------------------------------------------- SHADOWS --------------------------------------------------------------------------- */ --shadow-sm: 0 1px 3px rgba(30, 26, 23, 0.08), 0 1px 2px rgba(30, 26, 23, 0.06); --shadow-md: 0 4px 12px rgba(30, 26, 23, 0.10), 0 2px 6px rgba(30, 26, 23, 0.07); --shadow-lg: 0 10px 30px rgba(30, 26, 23, 0.12), 0 4px 12px rgba(30, 26, 23, 0.08); --shadow-xl: 0 20px 50px rgba(30, 26, 23, 0.14), 0 8px 20px rgba(30, 26, 23, 0.10); --shadow-card: 0 2px 16px rgba(30, 26, 23, 0.08); --shadow-card-hover: 0 12px 40px rgba(30, 26, 23, 0.16); /* --------------------------------------------------------------------------- TRANSITIONS --------------------------------------------------------------------------- */ --transition-speed-fast: 150ms; --transition-speed-normal: 300ms; --transition-speed-slow: 500ms; --transition-speed-slower: 700ms; --transition-easing-default: cubic-bezier(0.25, 0.1, 0.25, 1); --transition-easing-smooth: cubic-bezier(0.4, 0, 0.2, 1); --transition-easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --transition-easing-in-out: cubic-bezier(0.76, 0, 0.24, 1); --transition-easing-out-expo: cubic-bezier(0.16, 1, 0.3, 1); /* Shorthand transition defaults */ --transition-default: var(--transition-speed-normal) var(--transition-easing-smooth); --transition-fast: var(--transition-speed-fast) var(--transition-easing-smooth); --transition-slow: var(--transition-speed-slow) var(--transition-easing-smooth); /* --------------------------------------------------------------------------- Z-INDEX LAYERS --------------------------------------------------------------------------- */ --z-index-below: -1; --z-index-base: 0; --z-index-above: 10; --z-index-sticky: 50; --z-index-header: 100; --z-index-overlay: 200; --z-index-modal: 300; --z-index-toast: 400; --z-index-cursor: 500; --z-index-loader: 999; /* --------------------------------------------------------------------------- HEADER --------------------------------------------------------------------------- */ --header-height: 72px; --header-height-mobile: 60px; /* --------------------------------------------------------------------------- ANIMATION CONFIG --------------------------------------------------------------------------- */ --reveal-distance: 40px; /* how far elements travel on reveal */ --reveal-duration: 0.8s; --reveal-easing: cubic-bezier(0.16, 1, 0.3, 1); }