/** * Local360Connect — Unified Platform Design Tokens (2026 Evolution) * * Single source of truth for colors, typography, spacing, radii, shadows, and motion. * Pure CSS custom properties designed for high performance, zero build-step overhead, * and seamless interoperability across Consumer, Business Owner, Staff, and Admin. * * Design Philosophy: Calm, Premium, Trustworthy, Local, Fast, Simple, Spacious, Human. */ :root { /* ─── Surface & Backgrounds ─────────────────────────────────────────── */ --l360-bg: #FAFAFA; /* Calm, premium off-white canvas */ --l360-color-bg: #FAFAFA; /* Semantic alias */ --l360-surface: #FFFFFF; /* Pure white card and sheet surface */ --l360-color-surface: #FFFFFF; /* Semantic alias */ --l360-surface-subtle: #F5F5F7; /* Soft secondary background */ --l360-surface-hover: #F3F4F6; /* Subtle hover highlight */ --l360-surface-active: #E5E7EB; /* Active state highlight */ --l360-surface-muted: #F9FAFB; /* Quiet card sub-section */ /* ─── Typography & Ink ──────────────────────────────────────────────── */ --l360-text-primary: #111111; /* Near-black high-contrast ink */ --l360-color-text-primary: #111111; /* Semantic alias */ --l360-text-secondary: #4B5563; /* Balanced slate gray for descriptions & body */ --l360-color-text-secondary:#4B5563; /* Semantic alias */ --l360-text-muted: #6B7280; /* Muted gray for captions & metadata */ --l360-color-text-muted: #6B7280; /* Semantic alias */ --l360-text-placeholder: #9CA3AF; /* Light placeholder text */ --l360-text-inverse: #FFFFFF; /* White text on dark surfaces */ /* ─── Structural Dividers & Borders ─────────────────────────────────── */ --l360-border: #EAEAEA; /* Crisp 1px structural border */ --l360-color-border: #EAEAEA; /* Semantic alias */ --l360-border-hover: #D1D5DB; /* Border hover emphasis */ --l360-border-focus: #111111; /* Focus ring accent */ --l360-border-subtle: #F0F0F2; /* Ultra-light separator */ --l360-divider: #F0F0F0; /* Internal hairline divider */ --l360-touch-target: 44px; /* Minimum touch target */ /* ─── Primary Brand & Action Colors ─────────────────────────────────── */ --l360-brand: #111111; /* Restrained Monochrome Brand Tone */ --l360-color-primary: #111111; /* Semantic primary */ --l360-color-accent: #059669; /* Semantic accent */ --l360-brand-hover: #262626; --l360-brand-active: #000000; --l360-action-blue: #0071E3; /* Hyperlocal action blue (Call, Links) */ --l360-action-blue-hover: #005BB5; --l360-action-blue-subtle: #F0F7FF; /* ─── Semantic Status Colors (Solid + Tint Backgrounds) ─────────────── */ /* Success / Verified / Open Now */ --l360-success: #16803C; --l360-success-bg: #EBF7EE; --l360-success-border: #C3E8CC; /* Warning / Pending / Notice */ --l360-warning: #B7791F; --l360-warning-bg: #FEF7EB; --l360-warning-border: #F7DEB4; /* Danger / Error / Urgent / Deals */ --l360-danger: #C53030; --l360-danger-bg: #FDECEC; --l360-danger-border: #F8BDBD; /* Info / Scheduled / In Progress */ --l360-info: #0284C7; --l360-info-bg: #F0F9FF; --l360-info-border: #BAE6FD; /* ─── RGB Triples for CSS Opacity Modifiers (rgba) ───────────────────── */ --l360-brand-rgb: 17, 17, 17; --l360-text-primary-rgb: 17, 17, 17; --l360-action-blue-rgb: 0, 113, 227; --l360-success-rgb: 22, 128, 60; --l360-warning-rgb: 183, 121, 31; --l360-danger-rgb: 197, 48, 48; --l360-info-rgb: 2, 132, 199; /* ─── Typography Scales ──────────────────────────────────────────────── */ --l360-font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --l360-font-family: var(--l360-font-sans); --l360-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace; --l360-font-telugu: "Noto Sans Telugu", "Inter", sans-serif; /* Semantic Typography Tokens */ --l360-text-display: 2.25rem; /* 36px */ --l360-text-display-lh: 1.15; --l360-text-display-weight: 700; --l360-text-display-track: -0.025em; --l360-text-title: 1.5rem; /* 24px */ --l360-text-title-lh: 1.25; --l360-text-title-weight: 700; --l360-text-title-track: -0.02em; --l360-text-section: 1.25rem; /* 20px */ --l360-text-section-lh: 1.3; --l360-text-section-weight: 600; --l360-text-section-track: -0.015em; --l360-text-card-title: 1rem; /* 16px */ --l360-text-card-title-lh: 1.35; --l360-text-card-title-weight: 600; --l360-text-card-title-track: -0.01em; --l360-text-body: 1rem; /* 16px (Announcement Standard) */ --l360-text-body-lh: 1.625; --l360-text-body-weight: 400; --l360-text-body-sm: 0.875rem; /* 14px */ --l360-text-body-sm-lh: 1.5; --l360-text-body-sm-weight: 400; --l360-text-label: 0.75rem; /* 12px */ --l360-text-label-lh: 1.2; --l360-text-label-weight: 600; --l360-text-label-track: 0.02em; --l360-text-caption: 0.75rem; /* 12px */ --l360-text-caption-lh: 1.35; --l360-text-caption-weight: 500; /* Backward compatibility aliases */ --l360-text-hero: var(--l360-text-display); --l360-text-hero-lg: 3rem; --l360-text-h1: 1.75rem; --l360-text-h1-lg: var(--l360-text-display); --l360-font-size-2xl: 1.75rem; --l360-text-h2: var(--l360-text-title); --l360-text-h2-lg: var(--l360-text-title); --l360-text-h3: var(--l360-text-section); --l360-text-base: 1rem; --l360-font-size-base: 1rem; --l360-text-sm: var(--l360-text-body); --l360-text-xs: var(--l360-text-label); /* ─── Spacing Scale (Geometric 8pt with 4pt half-step) ──────────────── */ --l360-space-1: 4px; --l360-space-2: 8px; --l360-space-3: 12px; --l360-space-4: 16px; --l360-space-5: 20px; --l360-space-6: 24px; --l360-space-8: 32px; --l360-space-10: 40px; --l360-space-12: 48px; --l360-space-16: 64px; /* ─── Border Radii ──────────────────────────────────────────────────── */ --l360-radius-xs: 4px; --l360-radius-sm: 6px; --l360-radius-md: 10px; /* Inputs, controls, small buttons */ --l360-radius-lg: 16px; /* Standard Cards, Alerts, Tables */ --l360-radius-xl: 24px; /* Modals, Bottom Sheets, Large Cards */ --l360-radius-pill: 9999px; /* Pills, Chips, Badges */ --l360-radius-full: 9999px; /* ─── Elevation & Box Shadows ───────────────────────────────────────── */ --l360-shadow-none: none; --l360-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.03); --l360-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.04); --l360-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.05); --l360-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.07); --l360-shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.10); /* ─── Standard Container Widths ─────────────────────────────────────── */ --l360-container-full: 100%; --l360-container-wide: 1280px; /* max-w-7xl */ --l360-container-standard: 1152px; /* max-w-6xl */ --l360-container: 1152px; /* standard container alias */ --l360-container-narrow: 896px; /* max-w-4xl */ --l360-container-focus: 512px; /* max-w-lg */ /* Legacy aliases */ --l360-container-max: var(--l360-container-wide); --l360-narrow-max: var(--l360-container-narrow); /* ─── Layout Heights & Headers ──────────────────────────────────────── */ --l360-header-height: 64px; --l360-header-mobile-height:56px; --l360-bottom-nav-height: 56px; /* ─── Transition Timings & Easing ───────────────────────────────────── */ --l360-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --l360-transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1); --l360-transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1); } /* ─── High-Contrast Mode & Reduced Motion Media Queries ──────────────────── */ @media (prefers-reduced-motion: reduce) { *, ::before, ::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }