/* Lets Crooz shared brand system. * * ONE canonical source of typography AND colour for the whole platform. Served at * /assets/emr_app/css/brand.css * which resolves both on letscrooz.com (the marketing landing) and on every app * subdomain, so the landing and the in-app pages reference exactly this file. * * TYPOGRAPHY (one rule, and only one): * --lc-sans every piece of text and every heading * --lc-display the Lets Crooz wordmark, and nothing else * * COLOUR (theme tokens — nothing in the product hardcodes a colour, it references these): * Dark is the default (the Fable brand: emerald / cyan / violet on near-black). * Light wears the existing indigo palette on a light ground. * Screens set the theme by putting data-theme="light" (or "dark") on ; the * theme toggle in the nav flips it and remembers the choice. Every --lc-* token below * has a dark value here and a light value under :root[data-theme="light"], so a single * attribute flip re-colours the whole platform. */ /* Self-hosted. This used to be an @import to Google's font CDN -- a BLOCKING stylesheet fetch on every page, including login, against a third party we do not control. The files now ship with the app. Latin + latin-ext only; the UI does not need Cyrillic, Greek or Vietnamese and they would triple the payload. font-display:swap keeps text visible while they load, exactly as before. */ @font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap; src:url('/assets/emr_app/fonts/Inter-400-latin-ext.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap; src:url('/assets/emr_app/fonts/Inter-400-latin.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:'Inter';font-style:normal;font-weight:500;font-display:swap; src:url('/assets/emr_app/fonts/Inter-500-latin-ext.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap; src:url('/assets/emr_app/fonts/Inter-500-latin.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:'Inter';font-style:normal;font-weight:600;font-display:swap; src:url('/assets/emr_app/fonts/Inter-600-latin-ext.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap; src:url('/assets/emr_app/fonts/Inter-600-latin.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:'Inter';font-style:normal;font-weight:700;font-display:swap; src:url('/assets/emr_app/fonts/Inter-700-latin-ext.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap; src:url('/assets/emr_app/fonts/Inter-700-latin.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:600;font-display:swap; src:url('/assets/emr_app/fonts/SpaceGrotesk-600-latin-ext.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap; src:url('/assets/emr_app/fonts/SpaceGrotesk-600-latin.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:700;font-display:swap; src:url('/assets/emr_app/fonts/SpaceGrotesk-700-latin-ext.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap; src:url('/assets/emr_app/fonts/SpaceGrotesk-700-latin.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} :root { /* LIGHT IS THE DEFAULT. It used to be dark, which meant any page that did not stamp data-theme before paint rendered dark -- the deferred theme script runs too late to stop that. Dark is now the opt-in override below. Do not invert this again without adding an inline no-flash script to every page first. */ /* ---- Typography ---- */ --lc-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --lc-display: "Space Grotesk", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* ================= DARK THEME (default — the Fable brand) ================= */ color-scheme: light; /* Fixed brand stops — the logo mark + gradient use these in BOTH themes. */ --lc-em: #2EE6A8; --lc-cy: #3EC1F5; --lc-vi: #8B7CF6; --lc-wa: #25D366; /* WhatsApp-specific UI only */ /* Surfaces / ground */ --lc-bg: #FBFAFF; --lc-bg-2: #F7F5FF; --lc-surface: #FFFFFF; --lc-bg-card: rgba(255,255,255,.72); --lc-glass: rgba(255,255,255,.72); --lc-glass-2: #FFFFFF; --lc-tint: #F1EEFB; --lc-tint-2: #ECE9FB; /* Text */ --lc-ink: #1A1330; --lc-text: #1A1330; --lc-muted: #6B6580; --lc-faint: #8A8397; /* Lines / shadow / overlay */ --lc-line: rgba(106,75,255,.14); --lc-shadow: rgba(76,40,160,.45); --lc-overlay: rgba(26,19,48,.5); --lc-focus: rgba(106,75,255,.35); /* Brand accent / action */ --lc-brand: #6A4BFF; --lc-accent: #6A4BFF; --lc-brand-2: #8B5CF6; --lc-primary-ink:#FFFFFF; --lc-grad: linear-gradient(135deg, #7C3AED 0%, #6A4BFF 55%, #5B8CFF 100%); --lc-glass-hover: rgba(106,75,255,.10); --lc-knob: #EAF0FB; /* control knob (toggle handle) — light in both themes */ /* Semantic status (paid / overdue / pending etc.) */ --lc-ok: #0E8A5F; --lc-ok-bg: rgba(18,185,129,.13); --lc-danger: #C0392B; --lc-danger-bg: rgba(214,69,69,.12); --lc-warn: #B57400; --lc-warn-bg: rgba(214,158,0,.14); /* Back-compat aliases used by the funnel screens (resolve per-theme via the tokens above). */ --lc-card: var(--lc-surface); --lc-bad: var(--lc-danger); } /* Dark: opt in by stamping data-theme="dark" (the toggle and the no-flash scripts do this). Only the properties that actually differ live here. */ :root[data-theme="dark"] { color-scheme: dark; --lc-bg: #04060D; /* page background */ --lc-bg-2: #070C18; /* secondary / deep panel ground */ --lc-surface: #0C1424; /* solid raised card */ --lc-bg-card: rgba(148,180,255,.05); /* glass card */ --lc-glass: rgba(148,180,255,.05); --lc-glass-2: rgba(148,180,255,.09); --lc-tint: rgba(148,180,255,.08); /* subtle step / chip fill */ --lc-tint-2: rgba(148,180,255,.14); --lc-ink: #EAF0FB; /* primary text (alias --lc-text) */ --lc-text: #EAF0FB; --lc-muted: #93A0BE; /* secondary text */ --lc-faint: #5C6883; /* captions, labels, disabled */ --lc-line: rgba(148,170,215,.14); --lc-shadow: rgba(0,0,0,.55); --lc-overlay: rgba(2,4,10,.66); --lc-focus: rgba(62,193,245,.4); --lc-brand: #2EE6A8; /* primary accent (alias --lc-accent) */ --lc-accent: #2EE6A8; --lc-brand-2: #8B7CF6; /* gradient end / secondary */ --lc-primary-ink:#04120E; /* text on a bright brand fill */ --lc-grad: linear-gradient(100deg, #2EE6A8, #3EC1F5 55%, #8B7CF6); --lc-glass-hover: rgba(148,180,255,.10); --lc-ok: #34D399; --lc-ok-bg: rgba(52,211,153,.16); --lc-danger: #F87171; --lc-danger-bg: rgba(248,113,113,.16); --lc-warn: #FBBF24; --lc-warn-bg: rgba(251,191,36,.15); } /* Explicitly-light pages already stamp this; it resolves to the root values. */ :root[data-theme="light"] { color-scheme: light; } body { font-family: var(--lc-sans); /* theme flips are instant on load (a no-flash script sets data-theme before paint); the transition only softens a manual toggle. */ transition: background-color .25s ease, color .25s ease; } /* The wordmark, and only the wordmark. */ .lc-wordmark { font-family: var(--lc-display); font-weight: 700; letter-spacing: -0.01em; }