/* ============================================================================ Hanamaru.ai rebuild — design tokens (master spec §1) ---------------------------------------------------------------------------- Single source of truth. EVERY color / font / spacing / size used anywhere in the site must reference a custom property defined here. Never hardcode hex values in other CSS or in page files (spec hard rule). ---------------------------------------------------------------------------- BREAKPOINTS — custom properties cannot be used inside @media conditions, so the breakpoint system is documented here and must be kept in sync manually: mobile : max-width: 767px (<768px) tablet : 768px – 1024px desktop : min-width: 1025px (>1024px) Layout switches at 1024px/1025px (spec §2.4): <=1024px : sidebar (rail + expanded) hidden entirely; bottom tab bar and off-canvas drawer shown; header may wrap to two rows on home (logo row + scrollable pill bar). >=1025px : sidebar visible (rail 72px or expanded 208px); no bottom nav, no drawer. ============================================================================ */ :root { /* ------------------------------------------------------------------ Bloom palette (live on the WP kit) ------------------------------------------------------------------ */ --pine: #1D4A3A; /* primary — headings, active pills */ --indigo: #2C5076; /* secondary — mental/calm accents */ --sumi: #272C29; /* body text */ --vermilion: #DD5240; /* accent — CTAs, links, the hanamaru mark */ --vermilion-dark: #C8412F; /* AA-safe small text on light bg; hover state */ --matcha: #3E8E6E; /* physical/vitality accent */ --gold: #E3A53A; /* financial accent */ --sakura: #F3D3CE; /* soft pink sections */ --washi: #FAF6EF; /* warm cream bg (About page bg) */ --sage: #E9EFE9; /* pale green-grey — inactive pill bg */ --stone: #6E7A72; /* muted/secondary text */ /* ------------------------------------------------------------------ Neutrals observed on live site ------------------------------------------------------------------ */ --white: #FFFFFF; --slate-400: #94A3B8; /* empty-state text */ --slate-500: #64748B; /* inactive nav icon+label */ --card-bg: #F8FAFC; /* empty-state / card wells */ --border: #E2E8F0; /* hairlines, dividers */ /* Supporting neutrals (measured in spec §2.1) */ --icon-strong: #333333; /* hamburger / header icon color */ --ghost-hover: #F2F2F2; /* hover ghost circle behind icon buttons */ --sage-dark: #DCE5DC; /* inactive pill hover (slightly darker sage) */ --scrim: rgba(39, 44, 41, 0.45); /* drawer overlay scrim (sumi @ 45%) */ /* Nav active accent: live site uses #3B82F6 (Luna carryover). Rebuild standardizes on indigo (spec §1). */ --nav-active: var(--indigo); /* Pillar accents */ --relationships: var(--indigo); --health: var(--matcha); --wealth: var(--gold); --career: var(--vermilion); /* ------------------------------------------------------------------ Typography Google Fonts: Manrope:wght@400;500;600;700;800 (loaded in ) Body default: Manrope 16px, --sumi on --white. ------------------------------------------------------------------ */ --font-sans: 'Manrope', -apple-system, 'Segoe UI', system-ui, ui-sans-serif, sans-serif; /* ------------------------------------------------------------------ Layout dimensions (measured from live site, spec §2) ------------------------------------------------------------------ */ --header-h: 47px; /* fixed top header, desktop */ --header-h-mobile: 44px; /* mobile header row 1 (hamburger + logo) */ --pillbar-h: 46px; /* mobile pill bar row (home only): 30px pill + 2×8px pad */ --sidebar-w: 208px; /* expanded sidebar */ --sidebar-rail-w: 72px; /* icon rail sidebar */ --bottomnav-h: 56px; /* mobile bottom tab bar (+ safe-area-inset) */ --drawer-w: 280px; /* mobile off-canvas drawer */ --header-pad-x: 5px; /* aligns hamburger center with sidebar flame icon */ --header-gap: 4px; /* logo tight against hamburger */ --rail-offset-top: 16px; /* rail icons align with first grid row */ --content-max: 1200px;/* generic .container max width */ --column-max: 760px; /* post article / legal hub column */ /* ------------------------------------------------------------------ Spacing scale (4px base) ------------------------------------------------------------------ */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 64px; /* ------------------------------------------------------------------ Radius scale ------------------------------------------------------------------ */ --radius-sm: 6px; /* buttons (Subscribe / Send) */ --radius-md: 8px; /* empty cards, row thumbs, list items */ --radius-lg: 12px; /* card thumbs, hero images, contact cards */ --radius-pill: 20px; /* category pills */ --radius-full: 999px; /* chips, circular ghost buttons */ /* ------------------------------------------------------------------ Shadows ------------------------------------------------------------------ */ --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08); /* contact cards (spec §3.6) */ --shadow-drawer: 0 12px 32px rgba(0, 0, 0, 0.18); /* off-canvas drawer, toast */ /* ------------------------------------------------------------------ Z-index scale ------------------------------------------------------------------ */ --z-sidebar: 900; /* fixed sidebar sits under the header */ --z-header: 1000; /* fixed top header (spec §2.1) */ --z-bottom-nav: 1000; /* mobile bottom tab bar */ --z-scrim: 1200; /* drawer overlay scrim (above header) */ --z-drawer: 1210; /* off-canvas drawer panel */ --z-toast: 1300; /* transient toasts above everything */ /* ------------------------------------------------------------------ Motion ------------------------------------------------------------------ */ --speed: 0.3s; /* header hide/reveal, drawer slide (spec ~0.3s ease) */ --speed-fast: 0.15s; /* hovers */ --ease: ease; }