/* ========================================================================== _tokens.css — Design tokens for the responsive/app-shell work Phase 1 of docs/RESPONSIVE_APP_UI_PLAN.md Loaded BEFORE style.css so these are plain defaults that existing rules still override. This file defines values only: it sets no layout, so it is safe to ship on its own and must produce zero visual change. Breakpoint scale (min-width, mobile-first) replacing the ~34 ad-hoc widths found across the theme and plugins: 360 --bp-xs small Android phone (most common width in India) 480 --bp-sm large phone 768 --bp-md tablet portrait -> app shell switches to the tablet rail 1024 --bp-lg tablet landscape 1200 --bp-xl desktop -> the existing pill header takes over CSS custom properties cannot be used inside a media query condition, so the numbers above are repeated literally in @media rules. They are recorded here as --bp-* so there is one documented source of truth, and so JS can read them via getComputedStyle instead of hard-coding its own copies. ========================================================================== */ :root { /* --- Breakpoints (reference values; see note above) -------------------- */ --bp-xs: 360px; --bp-sm: 480px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1200px; /* --- Container widths -------------------------------------------------- */ /* --max-width (1200px) already exists in style.css and is left untouched. */ --container-sm: 640px; /* prose / single column reading width */ --container-md: 880px; /* forms, auth, narrow article */ --container-lg: 1200px; /* matches the existing --max-width */ --container-xl: 1400px; /* wide dashboard surfaces */ --gutter: 16px; /* page side padding on phones */ --gutter-md: 24px; /* ... on tablets and up */ /* --- Fluid type scale -------------------------------------------------- rem-based on purpose: the theme's 432 hard-coded px font-sizes ignore the user's OS/browser text-size setting. These scale with it and interpolate between phone and desktop without needing a breakpoint for every step. */ --fs-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem); --fs-sm: clamp(0.875rem, 0.85rem + 0.20vw, 0.9375rem); --fs-base: clamp(1rem, 0.96rem + 0.20vw, 1.0625rem); --fs-lg: clamp(1.125rem, 1.05rem + 0.40vw, 1.375rem); --fs-xl: clamp(1.375rem, 1.20rem + 0.90vw, 2rem); --fs-2xl: clamp(1.75rem, 1.40rem + 1.80vw, 3rem); --fs-3xl: clamp(2rem, 1.50rem + 2.60vw, 3.75rem); --lh-tight: 1.2; --lh-snug: 1.35; --lh-base: 1.6; --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* --- Spacing scale (4px grid) ------------------------------------------ */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 48px; --sp-10: 56px; --sp-11: 64px; --sp-12: 80px; /* --- Safe areas --------------------------------------------------------- env() resolves to 0px unless the viewport meta carries viewport-fit=cover (added in header.php). The fallbacks keep these valid on every browser. */ --safe-top: env(safe-area-inset-top, 0px); --safe-right: env(safe-area-inset-right, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); /* --- App shell metrics (consumed in Phase 3) --------------------------- */ --appbar-h: 56px; /* phone top bar */ --tabbar-h: 58px; /* phone bottom nav*/ --tabbar-total: calc(var(--tabbar-h) + var(--safe-bottom)); --rail-w: 72px; /* tablet icon rail*/ --rail-w-wide: 220px; /* labelled rail */ --pane-list-w: 340px; /* two-pane left */ /* --- Touch targets ------------------------------------------------------ 44px is the Apple HIG minimum and Material's 48dp rounds near it. The audit found controls at padding:4px 10px and 6px 8px, well under this. */ --tap-min: 44px; --tap-min-sm: 40px; /* dense secondary controls, still thumb-safe */ /* --- Radius ------------------------------------------------------------ */ --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px; /* --- Elevation ---------------------------------------------------------- */ --sh-sm: 0 1px 2px rgba(0, 0, 0, .06), 0 1px 3px rgba(0, 0, 0, .10); --sh-md: 0 4px 12px rgba(0, 0, 0, .08), 0 2px 4px rgba(0, 0, 0, .06); --sh-lg: 0 8px 28px rgba(0, 0, 0, .12), 0 3px 8px rgba(0, 0, 0, .08); --sh-up: 0 -2px 12px rgba(0, 0, 0, .08); /* bottom bar, casts upward */ /* --- Z-index scale ------------------------------------------------------ The existing header sits at 9999, which left no room above it. The shell layers stay below that ceiling; overlays are explicitly above it. */ --z-base: 1; --z-sticky: 100; --z-rail: 900; --z-appbar: 1000; --z-tabbar: 1000; --z-dropdown: 1100; --z-backdrop: 9000; --z-drawer: 9500; --z-header: 9999; /* .header-float-wrap, unchanged */ --z-sheet: 10000; /* bottom sheets / modals must clear the header */ --z-toast: 10100; /* --- Motion ------------------------------------------------------------- Durations are referenced by the reduced-motion block below, which zeroes them globally rather than requiring each component to opt out. */ --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms; --ease-standard: cubic-bezier(.2, 0, 0, 1); --ease-decelerate: cubic-bezier(0, 0, 0, 1); --ease-accelerate: cubic-bezier(.3, 0, 1, 1); } /* Wider gutters once there is room for them. */ @media (min-width: 768px) { :root { --gutter: var(--gutter-md); } } /* Users who ask for less motion get it from the tokens themselves, so any component built on --dur-* inherits the preference without its own rule. */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; } }