/* One shared webfont load for the whole product — Inter (body/UI) and Space Grotesk (--font-display below) — instead of dashboard.css, auth.css, and home.css each requesting overlapping weights of the same families separately. Weight list is the union of what every page actually uses. */ /* Served from this site (public/assets/fonts, SIL Open Font License) instead of an @import of Google Fonts: the @import was a render-blocking third-party chain (the SEO audit, 10 Oct 2026). Variable fonts, Latin + Latin Extended, plus a rupee-only file (below); file names carry the upstream version, so they are cached for a year. */ @font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/inter-latin-ext-v20.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20B8,U+20BA-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/inter-latin-v20.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500 700;font-display:swap;src:url(/assets/fonts/space-grotesk-latin-ext-v22.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20B8,U+20BA-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500 700;font-display:swap;src:url(/assets/fonts/space-grotesk-latin-v22.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} /* The rupee sign on its own (about 1 KB each), so the price pages no longer download the 85 KB latin-ext file just for ₹ (SEO audit v3). Cut from the latin-ext files with fontTools, weight axis kept. */ @font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/inter-rupee-v20.woff2) format('woff2');unicode-range:U+20B9} @font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500 700;font-display:swap;src:url(/assets/fonts/space-grotesk-rupee-v22.woff2) format('woff2');unicode-range:U+20B9} /* Until Inter arrives, text is drawn in Arial scaled to Inter's width, so the swap does not re-wrap lines and push the page down (the homepage hero moved 30px on phones - SEO audit v4). Ratios measured on the homepage text: Inter is 6.8% wider than Arial at 400, 2.2% wider than Arial Bold at 700. */ @font-face{font-family:'Inter Fallback';font-style:normal;font-weight:400 500;src:local('Arial'),local('ArialMT');size-adjust:106.8%} @font-face{font-family:'Inter Fallback';font-style:normal;font-weight:600 800;src:local('Arial Bold'),local('Arial-BoldMT');size-adjust:102.2%} /* ===== Shared design tokens — single source of truth ===== Naming follows the dashboard's original convention — --bg/--panel/--panel2/ --line/--line2/--text/--muted for surfaces, --violet/--violet2 for the brand accent, --green/--red/--amber for semantic status colors. --violet-soft is a tinted/translucent accent background; --violet-dark/ --violet-light are the two ends of the brand gradient used throughout every primary button and glow. Brand color: indigo/violet (#4f46e5/#6366f1) — the CEO-requested palette, restored after a teal/cyan design pass didn't stick. Only the color VALUES changed back; the layout, Space Grotesk display face, and every design primitive added alongside teal (--glass-bg/--glass-border, --ease, --radius-sm/--radius-full) stayed. Light mode only — the dark theme and its toggle were removed site-wide, so this is the only palette now; there is no [data-theme] variant. color-scheme:light opts out of the browser's OWN forced/auto-dark rendering (confirmed live: Android Chrome's auto-dark was repainting the hero's plain-color heading text near-invisible against a forced- dark background, while leaving the gradient-clipped alone — a browser rendering quirk, not anything in this CSS). The static HTML pages (privacy.html etc.) already set this inline; this file never did, even though every page using it (home, signin, register, dashboard) needs the same opt-out. */ :root { color-scheme: light; --bg: #f9fafb; --bg2: #ffffff; --panel: #ffffff; --panel2: #f3f4f6; --line: #e5e7eb; --line2: #d1d5db; --text: #111827; /* One step darker than Tailwind gray-500 (was #6b7280) — against --panel2 (#f3f4f6), gray-500 measures 4.39:1, just under WCAG AA's 4.5:1 for normal text (flagged by a real Lighthouse accessibility audit on the live homepage: feature card copy, plan names/prices/ descriptions, the billing toggle). gray-600 clears 6.87:1 against --panel2 and 7.56:1 against white, same hue family, barely a visible shift. --muted is shared app-wide, so this improves contrast everywhere it's used, not just the homepage. */ --muted: #4b5563; --dim: #9ca3af; --violet: #4f46e5; --violet2: #4338ca; --violet-soft: rgba(79, 70, 229, 0.1); --violet-dark: #4338ca; --violet-light: #4338ca; --green: #16a34a; --green-soft: rgba(22, 163, 74, 0.1); --blue: #2778c4; --red: #dc2f45; --red-soft: rgba(220, 47, 69, 0.08); --amber: #b0790f; --amber-soft: rgba(176, 121, 15, 0.1); --shadow: 0 1px 3px rgba(16, 24, 40, 0.08); --shadow-glow: 0 1px 3px rgba(16, 24, 40, 0.08); --glass-bg: rgba(16, 24, 38, 0.03); --glass-border: rgba(16, 24, 38, 0.07); --radius-sm: 10px; --radius-lg: 14px; --radius-xl: 18px; --radius-full: 999px; --ease: cubic-bezier(.16, .84, .44, 1); /* No separate display face — the target design uses one plain sans throughout (headings, numbers, everything), not a geometric display font for emphasis. */ --font-display: 'Inter', 'Inter Fallback', 'Segoe UI', Arial, sans-serif; }