/** * CSS Custom Properties (Design Tokens) * TerraSentri Site Design System * * This file defines all design tokens used throughout the site. * These variables ensure consistency and make theme updates easy. */ :root { /* ============================================ COLOR — BACKGROUNDS ============================================ */ --color-bg: #0d0d0d; --color-bg-card: #1a1a1a; --color-bg-card-elevated: #222222; /* ============================================ COLOR — TEXT ============================================ */ --color-text-primary: #ffffff; --color-text-secondary: rgba(255, 255, 255, 0.55); --color-text-muted: rgba(255, 255, 255, 0.3); /* ============================================ COLOR — PRIMARY ============================================ */ --color-primary: #22c55e; --color-primary-glow: rgba(34, 197, 94, 0.25); /* ============================================ COLOR — BORDER ============================================ */ --color-border: rgba(255, 255, 255, 0.07); /* ============================================ COLOR — HAZARD ACCENTS ============================================ */ --color-hazard-earthquake: #f59e0b; --color-hazard-typhoon: #3b82f6; --color-hazard-flood: #06b6d4; --color-hazard-volcano: #f97316; --color-hazard-air-quality: #8b5cf6; --color-hazard-health: #22c55e; /* ============================================ TYPOGRAPHY — FONT FAMILIES ============================================ */ --font-heading: 'Outfit', system-ui, -apple-system, sans-serif; --font-body: 'Outfit', system-ui, -apple-system, sans-serif; /* ============================================ TYPOGRAPHY — FONT SIZES (Mobile First) ============================================ */ --font-size-xs: 0.75rem; /* 12px */ --font-size-sm: 0.875rem; /* 14px */ --font-size-base: 1rem; /* 16px */ --font-size-lg: 1.125rem; /* 18px */ --font-size-xl: 1.25rem; /* 20px */ --font-size-2xl: 1.5rem; /* 24px */ --font-size-3xl: 1.875rem; /* 30px */ --font-size-4xl: 2.25rem; /* 36px */ --font-size-5xl: 3rem; /* 48px */ --font-size-6xl: 3.75rem; /* 60px */ /* ============================================ TYPOGRAPHY — FONT WEIGHTS ============================================ */ --font-weight-regular: 400; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; /* ============================================ TYPOGRAPHY — LINE HEIGHTS ============================================ */ --line-height-tight: 1.25; --line-height-snug: 1.375; --line-height-normal: 1.5; --line-height-relaxed: 1.75; --line-height-loose: 2; /* ============================================ TYPOGRAPHY — LETTER SPACING ============================================ */ --letter-spacing-tight: -0.025em; --letter-spacing-normal: 0; --letter-spacing-wide: 0.025em; /* ============================================ SPACING SYSTEM ============================================ */ --spacing-xs: 0.25rem; /* 4px */ --spacing-sm: 0.5rem; /* 8px */ --spacing-md: 1rem; /* 16px */ --spacing-lg: 1.5rem; /* 24px */ --spacing-xl: 2rem; /* 32px */ --spacing-2xl: 3rem; /* 48px */ --spacing-3xl: 4rem; /* 64px */ --spacing-4xl: 6rem; /* 96px */ --spacing-5xl: 8rem; /* 128px */ /* ============================================ LAYOUT ============================================ */ /* Container */ --container-max-width: 1280px; --container-padding: var(--spacing-xl); --container-padding-mobile: var(--spacing-md); /* Responsive Breakpoints */ --breakpoint-mobile: 320px; --breakpoint-tablet: 768px; --breakpoint-desktop: 1024px; --breakpoint-wide: 1280px; --breakpoint-ultrawide: 1920px; /* Section Spacing */ --section-padding-y: var(--spacing-5xl); --section-padding-y-mobile: var(--spacing-4xl); /* ============================================ BORDERS — RADIUS ============================================ */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 14px; --radius-xl: 16px; --radius-xxl: 20px; /* ============================================ BORDERS — WIDTH ============================================ */ --border-width-thin: 1px; --border-width-medium: 2px; --border-width-thick: 4px; /* ============================================ SHADOWS ============================================ */ --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.04); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* Glassmorphism */ --glass-blur: blur(20px); /* ============================================ TRANSITIONS — DURATION ============================================ */ --transition-fast: 150ms; --transition-base: 250ms; --transition-slow: 350ms; --transition-slower: 500ms; /* ============================================ TRANSITIONS — TIMING FUNCTIONS ============================================ */ --ease-in-out: ease-in-out; --ease-out: cubic-bezier(0.33, 1, 0.68, 1); --ease-in: cubic-bezier(0.32, 0, 0.67, 0); --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Common Transitions */ --transition-colors: color var(--transition-base) var(--ease-in-out), background-color var(--transition-base) var(--ease-in-out), border-color var(--transition-base) var(--ease-in-out); --transition-transform: transform var(--transition-base) var(--ease-out); --transition-opacity: opacity var(--transition-base) var(--ease-in-out); --transition-all: all var(--transition-base) var(--ease-in-out); /* ============================================ Z-INDEX SCALE ============================================ */ --z-index-base: 0; --z-index-dropdown: 100; --z-index-sticky: 200; --z-index-fixed: 300; --z-index-modal-backdrop: 400; --z-index-modal: 500; --z-index-popover: 600; --z-index-tooltip: 700; /* ============================================ COMPONENT-SPECIFIC VARIABLES ============================================ */ /* Buttons */ --button-padding-x: var(--spacing-xl); --button-padding-y: var(--spacing-md); --button-border-radius: var(--radius-xl); --button-font-weight: var(--font-weight-bold); /* Cards */ --card-padding: var(--spacing-xl); --card-border-radius: var(--radius-xxl); --card-shadow: var(--shadow-lg); /* Focus Indicators */ --focus-ring-width: 3px; --focus-ring-offset: 2px; --focus-ring-color: var(--color-primary); --focus-ring-opacity: 0.5; } /* ============================================ RESPONSIVE TYPOGRAPHY ADJUSTMENTS ============================================ */ /* Tablet and above (768px+) */ @media (min-width: 768px) { :root { --font-size-3xl: 2rem; /* 32px */ --font-size-4xl: 2.5rem; /* 40px */ --font-size-5xl: 3.5rem; /* 56px */ --font-size-6xl: 4rem; /* 64px */ --container-padding: var(--spacing-xl); } } /* Desktop and above (1024px+) */ @media (min-width: 1024px) { :root { --font-size-4xl: 3rem; /* 48px */ --font-size-5xl: 4rem; /* 64px */ --font-size-6xl: 4.5rem; /* 72px */ --section-padding-y: var(--spacing-5xl); } } /* Wide screens (1280px+) */ @media (min-width: 1280px) { :root { --container-padding: var(--spacing-2xl); } }