/* ========================================================================== HERBALISSA DESIGN TOKENS Source of truth: "Editorial Artisanship" Design System These tokens map directly to the design system document. All components reference these variables — never hardcode values. ========================================================================== */ :root { /* ------------------------------------------------------------------ COLORS — "Forest Floor" Palette ------------------------------------------------------------------ */ /* Primary — Deep chlorophyll greens */ --color-primary: #173124; --color-primary-container: #2d4739; --color-on-primary: #ffffff; --color-on-primary-container: #c8e6c9; /* Secondary — Botanical accent greens */ --color-secondary: #5a682f; --color-secondary-container: #d6e7a1; --color-on-secondary: #ffffff; --color-on-secondary-container: #5a682f; /* Tertiary — Warm earth tones */ --color-tertiary: #7c5635; --color-tertiary-container: #f5dcc0; --color-on-tertiary: #ffffff; --color-on-tertiary-container: #5a3a1a; /* Surface hierarchy — "Stacked fine papers" */ --color-surface: #fcf9f1; --color-surface-bright: #fefcf4; --color-surface-dim: #f0ede5; --color-surface-container-lowest: #ffffff; --color-surface-container-low: #f6f3eb; --color-surface-container: #f1eee6; --color-surface-container-high: #ebe8e0; --color-surface-container-highest: #e5e2da; /* On-surface — NEVER pure black */ --color-on-surface: #1c1c17; --color-on-surface-variant: #46483d; /* Outline */ --color-outline: #76786b; --color-outline-variant: #c6c8b9; /* Inverse */ --color-inverse-surface: #313126; --color-inverse-on-surface: #f3f0e8; --color-inverse-primary: #a0d4a5; /* Error / feedback */ --color-error: #ba1a1a; --color-error-container: #ffdad6; --color-on-error: #ffffff; --color-on-error-container: #410002; /* Success */ --color-success: #2d6a30; --color-success-container: #c8e6c9; /* ------------------------------------------------------------------ TYPOGRAPHY — Heritage × Modernity dialogue ------------------------------------------------------------------ */ /* Font families */ --font-display: 'Noto Serif', Georgia, 'Times New Roman', serif; --font-body: 'Manrope', system-ui, -apple-system, sans-serif; /* Display — "Artisanal anchors" (Noto Serif) */ --text-display-lg: 3.5rem; /* 56px — hero statements */ --text-display-lg-lh: 1.12; --text-display-lg-tracking: 0.02em; --text-display-md: 2.75rem; /* 44px */ --text-display-md-lh: 1.16; --text-display-md-tracking: 0.01em; --text-display-sm: 2.25rem; /* 36px */ --text-display-sm-lh: 1.2; --text-display-sm-tracking: 0; /* Headline (Noto Serif) */ --text-headline-lg: 2rem; /* 32px */ --text-headline-lg-lh: 1.25; --text-headline-md: 1.75rem; /* 28px */ --text-headline-md-lh: 1.29; --text-headline-sm: 1.5rem; /* 24px */ --text-headline-sm-lh: 1.33; /* Title (Manrope) */ --text-title-lg: 1.375rem; /* 22px */ --text-title-lg-lh: 1.27; --text-title-md: 1rem; /* 16px — medium weight */ --text-title-md-lh: 1.5; --text-title-md-weight: 600; --text-title-sm: 0.875rem; /* 14px */ --text-title-sm-lh: 1.43; --text-title-sm-weight: 600; /* Body (Manrope) */ --text-body-lg: 1rem; /* 16px */ --text-body-lg-lh: 1.625; --text-body-md: 0.875rem; /* 14px */ --text-body-md-lh: 1.57; --text-body-sm: 0.75rem; /* 12px */ --text-body-sm-lh: 1.5; /* Label — "Apothecary categorization" (Manrope, uppercase) */ --text-label-lg: 0.875rem; /* 14px */ --text-label-lg-lh: 1.43; --text-label-lg-tracking: 0.06em; --text-label-lg-weight: 600; --text-label-md: 0.75rem; /* 12px */ --text-label-md-lh: 1.5; --text-label-md-tracking: 0.08em; --text-label-md-weight: 600; --text-label-sm: 0.6875rem; /* 11px */ --text-label-sm-lh: 1.45; --text-label-sm-tracking: 0.1rem; --text-label-sm-weight: 600; /* ------------------------------------------------------------------ SPACING — Generous breathing room ------------------------------------------------------------------ */ --space-0: 0; --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.75rem; /* 44px — card internal separation */ --space-12: 3.5rem; /* 56px */ --space-16: 5.5rem; /* 88px — major section gap */ --space-20: 7rem; /* 112px — hero-level breathing room */ --space-24: 8.5rem; /* 136px */ /* Responsive overrides — applied via media queries in components */ --space-section: var(--space-16); --space-section-hero: var(--space-20); --space-component: var(--space-10); --space-element: var(--space-6); /* ------------------------------------------------------------------ BORDER RADIUS — "Organic" vibe, no sharp corners ------------------------------------------------------------------ */ --radius-sm: 0.5rem; /* 8px — minimum roundedness */ --radius-md: 0.75rem; /* 12px — buttons, inputs */ --radius-lg: 1rem; /* 16px — cards, product images */ --radius-xl: 1.5rem; /* 24px — large containers */ --radius-full: 9999px; /* pill shapes — Herb Chips */ /* ------------------------------------------------------------------ ELEVATION — Tonal layering, not structural shadows "Forest canopy" shadows tinted with primary ------------------------------------------------------------------ */ /* Ambient — barely there, for subtle float */ --shadow-ambient: 0 4px 40px rgba(23, 49, 36, 0.04); /* Low — floating elements like FABs */ --shadow-low: 0 4px 48px rgba(23, 49, 36, 0.05); /* Medium — modals, drawers */ --shadow-medium: 0 8px 60px rgba(23, 49, 36, 0.06); /* Ghost border — accessibility fallback, 15% opacity */ --ghost-border: 1px solid rgba(198, 200, 185, 0.15); /* ------------------------------------------------------------------ GLASSMORPHISM — Floating navigation / modals ------------------------------------------------------------------ */ --glass-bg: rgba(246, 243, 235, 0.80); /* surface-container-low @ 80% */ --glass-blur: 20px; --glass-blur-heavy: 40px; /* ------------------------------------------------------------------ TRANSITIONS ------------------------------------------------------------------ */ --ease-default: cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; /* ------------------------------------------------------------------ LAYOUT ------------------------------------------------------------------ */ --container-max: 1280px; --container-narrow: 860px; --container-wide: 1440px; --gutter: var(--space-6); /* 24px default */ --gutter-wide: var(--space-8); /* 32px on larger screens */ /* ------------------------------------------------------------------ Z-INDEX SCALE ------------------------------------------------------------------ */ --z-base: 1; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; } /* ========================================================================== RESPONSIVE TOKEN OVERRIDES ========================================================================== */ /* Tablet and below */ @media (max-width: 1024px) { :root { --text-display-lg: 2.5rem; --text-display-md: 2rem; --text-display-sm: 1.75rem; --space-section: var(--space-12); --space-section-hero: var(--space-16); --gutter: var(--space-5); } } /* Mobile */ @media (max-width: 640px) { :root { --text-display-lg: 2rem; --text-display-md: 1.625rem; --text-display-sm: 1.375rem; --text-headline-lg: 1.625rem; --text-headline-md: 1.375rem; --text-headline-sm: 1.25rem; --space-section: var(--space-8); --space-section-hero: var(--space-12); --space-component: var(--space-8); --gutter: var(--space-4); } }