/* ============================================================ PRAGMATIK — Design Tokens Source of truth for all CSS values across the site. Edit here, propagates everywhere. Typography : Nunito — loaded via Google Fonts in each page's (preconnect + woff2 swap). No @import here. ============================================================ */ :root { /* ---------------------------------------------------------- COLORS ---------------------------------------------------------- */ /* Base — pure white identity (10 Minutes Hotels canonical) */ --color-white: #FFFFFF; --color-bg: #FFFFFF; /* Pure white */ --color-surface: #F5F5F3; /* Subtle gray — section backgrounds */ --color-border: #E8E8E6; /* Neutral border */ /* Text */ --color-text: #0D0D0D; /* Near-black — primary text */ --color-text-muted: #585858; /* Secondary text, captions */ --color-text-faint: #9A9A9A; /* Placeholder, tertiary */ /* Accent — lime, used ONLY for CTAs and key actions */ --color-accent: #7AE37C; --color-accent-hover: #5EC236; --color-accent-light: #EDFAE4; /* Tinted background for accent areas */ /* Dark surfaces */ --color-dark: #0D0D0D; /* Full dark sections */ --color-dark-muted: #222222; /* Slightly lighter dark */ /* ---------------------------------------------------------- TYPOGRAPHY ---------------------------------------------------------- */ --font-logo: 'Nunito', 'Varela Round', sans-serif; --font-display: 'Nunito', sans-serif; --font-body: 'Nunito', sans-serif; /* 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: 3.75rem; /* 60px */ --text-7xl: 4.5rem; /* 72px */ --text-8xl: 6rem; /* 96px */ /* Weight */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Line height */ --leading-tight: 1.1; --leading-snug: 1.3; --leading-normal: 1.5; --leading-relaxed: 1.7; /* Letter spacing */ --tracking-tight: -0.03em; --tracking-normal: 0; --tracking-wide: 0.06em; --tracking-wider: 0.12em; /* ---------------------------------------------------------- SPACING (base 8px) ---------------------------------------------------------- */ --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-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-32: 8rem; /* 128px */ --space-40: 10rem; /* 160px */ /* ---------------------------------------------------------- LAYOUT ---------------------------------------------------------- */ --container-max: 1280px; --container-text: 760px; /* Max width for readable text */ --container-narrow: 640px; --gutter: clamp(1.5rem, 5vw, 4rem); /* Responsive horizontal padding */ --section-padding: clamp(4rem, 10vw, 8rem); /* Responsive vertical section spacing */ /* ---------------------------------------------------------- BORDERS & RADIUS ---------------------------------------------------------- */ --radius-sm: 8px; --radius-md: 14px; --radius-pill: 100px; /* For tags/badges only */ --border: 1px solid var(--color-border); /* ---------------------------------------------------------- TRANSITIONS ---------------------------------------------------------- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --duration-fast: 200ms; --duration-base: 400ms; --duration-slow: 700ms; /* ---------------------------------------------------------- SHADOWS — minimal, used sparingly ---------------------------------------------------------- */ --shadow-sm: 0 1px 3px rgba(13, 13, 13, 0.06); --shadow-md: 0 4px 16px rgba(13, 13, 13, 0.08); --shadow-lg: 0 12px 40px rgba(13, 13, 13, 0.10); /* ---------------------------------------------------------- Z-INDEX ---------------------------------------------------------- */ --z-base: 0; --z-above: 10; --z-nav: 100; --z-modal: 1000; }