/* ============================================================================ OTLO — DESIGN TOKENS Hyperlocal real-time OS for Surat. Layer 1 of 2. Import this before otlo-components.css. ARCHITECTURE ------------ Two-tier tokens. Tier 1 = primitives (raw ramps, never used in components). Tier 2 = semantic aliases (--color-surface, --text-primary...). Components ONLY consume Tier 2. This is what makes dark mode a 40-line override instead of a rewrite. THEMING ------- | Omit the attribute and the OS preference decides (see @media block). ========================================================================= */ /* --------------------------------------------------------------------------- FONTS Plus Jakarta Sans — display. Geometric-humanist, rounded terminals that rhyme with the icon's round-cap arch. It was drawn as a city identity typeface, which is the right story for a city OS. Inter — body/UI. Unbeatable at 13–15px, real tabular numerals. JetBrains Mono — data. Distances, timestamps, coordinates, confirm counts. This is the "Linear precision" cue; use it ONLY for values. Noto Sans Gujarati — script fallback. Surat will post in ગુજરાતી. Ships in the stack so mixed-script lines don't break the baseline. --------------------------------------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600&family=Noto+Sans+Gujarati:wght@400;500;600;700&display=swap'); :root { /* ========================================================================= TIER 1 — PRIMITIVES ====================================================================== */ /* --- Coral. Pulled straight from the app icon (#FF5233 = coral-500). ---- */ --coral-50: #FFF3F0; --coral-100: #FFE1DA; --coral-200: #FFC3B5; --coral-300: #FF9C85; --coral-400: #FF7554; --coral-500: #FF5233; /* BRAND. Identity only — icon, splash, illustration */ --coral-600: #D8330D; /* INTERACTIVE. Button fills — white label = 4.77:1 */ --coral-700: #B02809; /* INK. Coral text on light surfaces = 6.8:1 */ --coral-800: #8A1F07; --coral-900: #5F1505; /* --- Gold. The amber dot in the icon. Surat = Diamond City; this is the "cut stone" colour. Reserved for trust, verification, saved. -------- */ --gold-50: #FFF9EB; --gold-100: #FFEFC7; --gold-200: #FFE199; --gold-300: #FFD470; --gold-400: #FFC94B; /* BRAND ACCENT — matches icon exactly */ --gold-500: #F0A800; --gold-600: #C48200; --gold-700: #8A5A00; /* INK — gold text on light (4.9:1) */ /* --- Warm neutrals. Hue 24°, 4–8% sat. Keeps whites from going clinical and keeps dark mode off pure black. This is the "stone otlo". ------- */ --sand-0: #FFFFFF; --sand-25: #FDFCFB; --sand-50: #FAF9F7; --sand-100: #F4F2EF; --sand-200: #E9E6E1; --sand-300: #D9D4CD; --sand-400: #B3ACA3; --sand-500: #8A827A; --sand-550: #786F68; /* smallest passing grey on white at 11px */ --sand-600: #6B635C; --sand-700: #4E4843; --sand-800: #35302C; --sand-850: #282320; --sand-900: #1D1917; --sand-950: #141110; --sand-1000: #0D0B0A; /* --- Signals. Six hues, deliberately spaced around the wheel so that no two categories are confusable at 32px on a map. Each has a -base (fills, rails, pins, dots) and an -ink (text, ≥4.5:1 on light). ----- */ --sig-emergency: #D50032; /* crimson — accident, fire, medical, SOS */ --sig-emergency-ink: #A80027; --sig-emergency-bg: #FFF0F3; --sig-traffic: #DB6E00; /* saffron — jams, closures, diversions */ --sig-traffic-ink: #9A4E00; --sig-traffic-bg: #FFF6EC; --sig-water: #0B7FD4; /* azure — waterlogging, monsoon, supply */ --sig-water-ink: #0A5FA0; --sig-water-bg: #EDF6FE; --sig-verified: #00875A; /* jade — verified, resolved, all-clear */ --sig-verified-ink: #006644; --sig-verified-bg: #EBFAF3; --sig-market: #8B46D9; /* orchid — marketplace, recommendations */ --sig-market-ink: #6D2FB0; --sig-market-bg: #F7F0FE; --sig-civic: #4F5B76; /* steel — power, gas, notices, admin */ --sig-civic-ink: #3B455C; --sig-civic-bg: #F2F4F8; /* ========================================================================= TYPOGRAPHY ====================================================================== */ --font-display: 'Plus Jakarta Sans', 'Noto Sans Gujarati', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-body: 'Inter', 'Noto Sans Gujarati', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* Scale. Tuned for a 390px viewport first — this is a phone product. Names describe role, not size, so the scale can be retuned centrally. */ --fs-micro: 0.6875rem; /* 11 — mono eyebrows, pin labels */ --fs-caption:0.75rem; /* 12 — timestamps, helper text */ --fs-small: 0.8125rem; /* 13 — chips, metadata, secondary body */ --fs-body: 0.9375rem; /* 15 — post body. The workhorse. */ --fs-lead: 1.0625rem; /* 17 — post titles, list rows */ --fs-h3: 1.25rem; /* 20 — card headers, sheet titles */ --fs-h2: 1.5rem; /* 24 — screen titles */ --fs-h1: 1.875rem; /* 30 — hero, onboarding */ --fs-display:2.375rem; /* 38 — splash, big numbers */ --lh-tight: 1.15; /* display sizes */ --lh-snug: 1.3; /* titles */ --lh-normal: 1.5; /* body */ --lh-relaxed: 1.65; /* long-form reading, AI answers */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800; /* Optical tracking. Large type tightens, small type opens up. This single detail is most of the difference between "clean" and "Linear-clean". */ --ls-display: -0.035em; --ls-title: -0.02em; --ls-body: -0.006em; --ls-micro: 0.02em; --ls-caps: 0.08em; /* ========================================================================= SPACING — 4px base ====================================================================== */ --space-0: 0; --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.25rem; /* 20 */ --space-6: 1.5rem; /* 24 */ --space-8: 2rem; /* 32 */ --space-10: 2.5rem; /* 40 */ --space-12: 3rem; /* 48 */ --space-16: 4rem; /* 64 */ --gutter: var(--space-4); /* screen-edge padding, phone */ --nav-height: 64px; --nav-inset: 12px; /* float gap under the nav */ --safe-bottom: env(safe-area-inset-bottom, 0px); /* ========================================================================= RADII Derived from the icon: 76 / 320 = 23.75% corner ratio. Every radius below is that ratio applied to a real component height, so the whole UI is geometrically the same family as the app icon. ====================================================================== */ --radius-xs: 6px; /* tags, tiny swatches */ --radius-sm: 10px; /* inputs, small buttons (44px × 23.75%) */ --radius-md: 14px; /* buttons, list rows */ --radius-lg: 18px; /* post cards */ --radius-xl: 24px; /* sheets, modals, map panel */ --radius-2xl: 28px; /* floating nav bar */ --radius-full: 999px; /* chips, avatars, pills */ --radius-icon: 23.75%; /* app-icon squircle ratio */ /* ========================================================================= ELEVATION Warm-tinted shadows (hue 20°, not neutral black) so cards look like they sit on stone in daylight. Every level is two layers: a tight contact shadow + a wide diffuse one. That pairing is the whole "premium" trick. ====================================================================== */ --shadow-rgb: 46 26 18; /* warm brown-black */ --shadow-xs: 0 1px 2px rgb(var(--shadow-rgb) / 0.06); --shadow-sm: 0 1px 2px rgb(var(--shadow-rgb) / 0.05), 0 2px 6px rgb(var(--shadow-rgb) / 0.05); --shadow-md: 0 2px 4px rgb(var(--shadow-rgb) / 0.05), 0 6px 16px rgb(var(--shadow-rgb) / 0.07); --shadow-lg: 0 4px 8px rgb(var(--shadow-rgb) / 0.05), 0 12px 28px rgb(var(--shadow-rgb) / 0.09); --shadow-xl: 0 8px 16px rgb(var(--shadow-rgb) / 0.06), 0 24px 48px rgb(var(--shadow-rgb) / 0.12); --shadow-nav: 0 2px 8px rgb(var(--shadow-rgb) / 0.06), 0 16px 40px rgb(var(--shadow-rgb) / 0.14); /* Coloured glows — only for the primary action and live/emergency states */ --glow-coral: 0 4px 14px rgb(255 82 51 / 0.32); --glow-coral-lg: 0 8px 28px rgb(255 82 51 / 0.38); --glow-emergency: 0 4px 16px rgb(213 0 50 / 0.28); /* ========================================================================= MOTION Fast in, gentle out. Nothing over 400ms — this app competes with looking out of the window. ====================================================================== */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* default UI ease */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* dots, toggles, pins */ --dur-instant: 90ms; --dur-fast: 160ms; --dur-base: 240ms; --dur-slow: 360ms; /* ========================================================================= GLASSMORPHISM One knob per property so you can dial the whole app's glass at once, and kill it on low-end devices with a single class. See .no-glass in otlo-components.css. ====================================================================== */ --glass-blur: 24px; --glass-saturate: 180%; --glass-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); --z-nav: 100; --z-sheet: 200; --z-toast: 300; } /* =========================================================================== TIER 2 — SEMANTIC ALIASES · LIGHT (default) ======================================================================== */ :root, [data-theme='light'] { color-scheme: light; /* Canvas & surfaces */ --bg-canvas: var(--sand-50); --bg-subtle: var(--sand-100); --surface: var(--sand-0); --surface-raised: var(--sand-0); --surface-sunken: var(--sand-100); --surface-hover: var(--sand-100); --surface-active: var(--sand-200); --scrim: rgb(29 25 23 / 0.42); /* Text */ --text-primary: var(--sand-900); --text-secondary: var(--sand-600); --text-tertiary: var(--sand-550); --text-disabled: var(--sand-400); --text-inverse: var(--sand-0); --text-brand: var(--coral-700); --text-link: var(--coral-700); /* Lines */ --border-subtle: rgb(29 25 23 / 0.07); --border-default: rgb(29 25 23 / 0.11); --border-strong: rgb(29 25 23 / 0.20); --border-brand: var(--coral-500); --hairline: 1px; /* Brand roles */ --brand: var(--coral-500); --brand-action: var(--coral-600); --brand-ink: var(--coral-700); --on-brand: #FFFFFF; --brand-wash: var(--coral-50); --brand-wash-2: var(--coral-100); --accent: var(--gold-400); --accent-ink: var(--gold-700); --accent-wash: var(--gold-50); /* Glass — light */ --glass-bg: rgb(255 255 255 / 0.72); --glass-bg-strong: rgb(255 255 255 / 0.86); --glass-border: rgb(255 255 255 / 0.65); --glass-highlight: inset 0 1px 0 rgb(255 255 255 / 0.85); --glass-shade: inset 0 -1px 0 rgb(29 25 23 / 0.05); /* Gradients */ --gradient-silk: linear-gradient( 118deg, #FF5233 0%, #FF6B3D 22%, #FF8A4C 45%, #FFAE45 72%, #FFC94B 100%); --gradient-brand: linear-gradient(180deg, var(--coral-600) 0%, var(--coral-700) 100%); --gradient-fade: linear-gradient(90deg, rgb(250 249 247 / 0) 0%, var(--bg-canvas) 78%); --on-brand-silk: var(--sand-1000); --gradient-facet: linear-gradient( 100deg, rgb(255 255 255 / 0) 20%, rgb(255 255 255 / 0.9) 48%, rgb(255 201 75 / 0.35) 56%, rgb(255 255 255 / 0) 80%); --map-dim: rgb(29 25 23 / 0.04); /* Legacy aliases for backward compatibility */ --bg-primary: var(--sand-0); --bg-secondary: var(--sand-50); --bg-tertiary: var(--sand-100); --bg-card: var(--sand-0); --bg-elevated: var(--sand-0); --bg-overlay: rgb(29 25 23 / 0.42); --bg-hover: rgb(99 102 241 / 0.04); --bg-active: rgb(99 102 241 / 0.08); --border: var(--border-default); --border-light: var(--border-subtle); --border-focus: var(--coral-500); --color-primary: var(--coral-500); --color-primary-light: var(--coral-400); --color-primary-dark: var(--coral-600); --color-primary-50: var(--coral-50); --color-primary-100: var(--coral-100); --color-primary-200: var(--coral-200); --color-accent: var(--gold-400); --color-success: var(--sig-verified); --color-success-light: #2ECC94; --color-success-bg: var(--sig-verified-bg); --color-warning: var(--sig-traffic); --color-warning-light: #FFA23D; --color-warning-bg: var(--sig-traffic-bg); --color-danger: var(--sig-emergency); --color-danger-light: #FF4D6D; --color-danger-bg: var(--sig-emergency-bg); --color-info: var(--sig-water); --color-info-bg: var(--sig-water-bg); --color-emergency: var(--sig-emergency); --text-muted: var(--sand-400); --gradient-primary: var(--gradient-brand); --gradient-warm: var(--gradient-silk); --shadow-card: var(--shadow-sm); --shadow-card-hover: var(--shadow-md); --shadow-glow: var(--glow-coral); --shadow-glow-accent: var(--glow-coral-lg); --header-height: 56px; --bottom-nav-height: var(--nav-height); --container-max: 480px; --safe-area-bottom: var(--safe-bottom); --safe-area-top: env(safe-area-inset-top, 0px); --font-family: var(--font-body); --font-size-xs: var(--fs-micro); --font-size-sm: var(--fs-small); --font-size-base: var(--fs-body); --font-size-md: var(--fs-body); --font-size-lg: var(--fs-lead); --font-size-xl: var(--fs-h3); --font-size-2xl: var(--fs-h2); --font-size-3xl: var(--fs-h1); --font-weight-normal: var(--fw-regular); --font-weight-medium: var(--fw-medium); --font-weight-semibold: var(--fw-semibold); --font-weight-bold: var(--fw-bold); --font-weight-extrabold: var(--fw-black); --line-height-tight: var(--lh-tight); --line-height-normal: var(--lh-normal); --line-height-relaxed: var(--lh-relaxed); --duration-fast: var(--dur-fast); --duration-normal: var(--dur-base); --duration-slow: var(--dur-slow); --sidebar-width: 280px; } /* =========================================================================== TIER 2 — SEMANTIC ALIASES · DARK Not black. A warm ink (hue 24°, ~5% sat) that reads as stone at night and keeps the coral from vibrating the way it does on pure #000. Surfaces step up in lightness rather than in shadow, because shadows don't exist in the dark — elevation is communicated by luminance + a 1px top highlight. ======================================================================== */ [data-theme='dark'] { color-scheme: dark; --bg-canvas: var(--sand-1000); --bg-subtle: var(--sand-950); --surface: var(--sand-900); --surface-raised: var(--sand-850); --surface-sunken: var(--sand-950); --surface-hover: var(--sand-850); --surface-active: var(--sand-800); --scrim: rgb(0 0 0 / 0.62); --text-primary: #F6F3F1; --text-secondary: #B5ADA6; --text-tertiary: #8A827A; --text-disabled: #5C544E; --text-inverse: var(--sand-950); --text-brand: var(--coral-400); --text-link: var(--coral-300); --border-subtle: rgb(255 245 240 / 0.07); --border-default: rgb(255 245 240 / 0.12); --border-strong: rgb(255 245 240 / 0.22); --border-brand: var(--coral-500); --brand: var(--coral-500); --brand-action: var(--coral-500); --on-brand: var(--sand-1000); --brand-ink: var(--coral-300); --brand-wash: rgb(255 82 51 / 0.12); --brand-wash-2: rgb(255 82 51 / 0.20); --accent: var(--gold-400); --accent-ink: var(--gold-300); --accent-wash: rgb(255 201 75 / 0.14); --glass-bg: rgb(32 28 26 / 0.68); --glass-bg-strong: rgb(32 28 26 / 0.84); --glass-border: rgb(255 245 240 / 0.10); --glass-highlight: inset 0 1px 0 rgb(255 255 255 / 0.10); --glass-shade: inset 0 -1px 0 rgb(0 0 0 / 0.30); --sig-emergency: #FF4D6D; --sig-emergency-ink: #FF8098; --sig-emergency-bg: rgb(255 77 109 / 0.14); --sig-traffic: #FFA23D; --sig-traffic-ink: #FFBE73; --sig-traffic-bg: rgb(255 162 61 / 0.14); --sig-water: #45AEFF; --sig-water-ink: #7FC7FF; --sig-water-bg: rgb(69 174 255 / 0.14); --sig-verified: #2ECC94; --sig-verified-ink: #6BE0B5; --sig-verified-bg: rgb(46 204 148 / 0.14); --sig-market: #B57BF0; --sig-market-ink: #CBA3F6; --sig-market-bg: rgb(181 123 240 / 0.14); --sig-civic: #93A0BC; --sig-civic-ink: #B3BDD2; --sig-civic-bg: rgb(147 160 188 / 0.14); --shadow-rgb: 0 0 0; --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.40); --shadow-md: 0 2px 6px rgb(0 0 0 / 0.44), 0 8px 20px rgb(0 0 0 / 0.34); --shadow-lg: 0 6px 16px rgb(0 0 0 / 0.48), 0 16px 36px rgb(0 0 0 / 0.40); --shadow-xl: 0 10px 24px rgb(0 0 0 / 0.52), 0 28px 60px rgb(0 0 0 / 0.48); --shadow-nav: 0 4px 12px rgb(0 0 0 / 0.50), 0 20px 48px rgb(0 0 0 / 0.55); --gradient-fade: linear-gradient(90deg, rgb(13 11 10 / 0) 0%, var(--bg-canvas) 78%); --gradient-facet: linear-gradient( 100deg, rgb(255 255 255 / 0) 20%, rgb(255 255 255 / 0.14) 48%, rgb(255 201 75 / 0.18) 56%, rgb(255 255 255 / 0) 80%); --map-dim: rgb(0 0 0 / 0.25); /* Legacy aliases for dark */ --bg-primary: var(--surface); --bg-secondary: var(--bg-canvas); --bg-tertiary: var(--surface-sunken); --bg-card: var(--surface); --bg-elevated: var(--surface-raised); --bg-overlay: rgb(0 0 0 / 0.62); --bg-hover: rgba(148, 163, 184, 0.08); --bg-active: rgba(148, 163, 184, 0.12); --border: var(--border-default); --border-light: var(--border-subtle); --text-muted: var(--text-disabled); --shadow-card: var(--shadow-sm); --shadow-card-hover: var(--shadow-md); --color-primary: var(--coral-500); --color-primary-light: var(--coral-300); --color-primary-dark: var(--coral-400); --color-primary-50: rgb(255 82 51 / 0.12); --color-primary-100: rgb(255 82 51 / 0.20); --color-primary-200: rgb(255 82 51 / 0.30); --color-accent: var(--gold-400); --color-success: var(--sig-verified); --color-success-bg: var(--sig-verified-bg); --color-warning: var(--sig-traffic); --color-warning-bg: var(--sig-traffic-bg); --color-danger: var(--sig-emergency); --color-danger-bg: var(--sig-emergency-bg); --color-info: var(--sig-water); --color-info-bg: var(--sig-water-bg); --color-emergency: var(--sig-emergency); --gradient-primary: var(--gradient-brand); --gradient-warm: var(--gradient-silk); } /* Respect the OS when no explicit theme is set on . */ @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { color-scheme: dark; --bg-canvas: var(--sand-1000); --bg-subtle: var(--sand-950); --surface: var(--sand-900); --surface-raised: var(--sand-850); --surface-sunken: var(--sand-950); --surface-hover: var(--sand-850); --surface-active: var(--sand-800); --scrim: rgb(0 0 0 / 0.62); --text-primary: #F6F3F1; --text-secondary: #B5ADA6; --text-tertiary: #8A827A; --text-disabled: #5C544E; --text-inverse: var(--sand-950); --text-brand: var(--coral-400); --text-link: var(--coral-300); --border-subtle: rgb(255 245 240 / 0.07); --border-default: rgb(255 245 240 / 0.12); --border-strong: rgb(255 245 240 / 0.22); --brand-action: var(--coral-500); --on-brand: var(--sand-1000); --brand-ink: var(--coral-300); --brand-wash: rgb(255 82 51 / 0.12); --brand-wash-2: rgb(255 82 51 / 0.20); --accent-ink: var(--gold-300); --accent-wash: rgb(255 201 75 / 0.14); --glass-bg: rgb(32 28 26 / 0.68); --glass-bg-strong: rgb(32 28 26 / 0.84); --glass-border: rgb(255 245 240 / 0.10); --glass-highlight: inset 0 1px 0 rgb(255 255 255 / 0.10); --glass-shade: inset 0 -1px 0 rgb(0 0 0 / 0.30); --sig-emergency: #FF4D6D; --sig-emergency-ink: #FF8098; --sig-emergency-bg: rgb(255 77 109 / 0.14); --sig-traffic: #FFA23D; --sig-traffic-ink: #FFBE73; --sig-traffic-bg: rgb(255 162 61 / 0.14); --sig-water: #45AEFF; --sig-water-ink: #7FC7FF; --sig-water-bg: rgb(69 174 255 / 0.14); --sig-verified: #2ECC94; --sig-verified-ink: #6BE0B5; --sig-verified-bg: rgb(46 204 148 / 0.14); --sig-market: #B57BF0; --sig-market-ink: #CBA3F6; --sig-market-bg: rgb(181 123 240 / 0.14); --sig-civic: #93A0BC; --sig-civic-ink: #B3BDD2; --sig-civic-bg: rgb(147 160 188 / 0.14); --shadow-rgb: 0 0 0; --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.40); --shadow-md: 0 2px 6px rgb(0 0 0 / 0.44), 0 8px 20px rgb(0 0 0 / 0.34); --shadow-lg: 0 6px 16px rgb(0 0 0 / 0.48), 0 16px 36px rgb(0 0 0 / 0.40); --shadow-xl: 0 10px 24px rgb(0 0 0 / 0.52), 0 28px 60px rgb(0 0 0 / 0.48); --shadow-nav: 0 4px 12px rgb(0 0 0 / 0.50), 0 20px 48px rgb(0 0 0 / 0.55); --gradient-fade: linear-gradient(90deg, rgb(13 11 10 / 0) 0%, var(--bg-canvas) 78%); --map-dim: rgb(0 0 0 / 0.25); --bg-primary: var(--surface); --bg-secondary: var(--bg-canvas); --bg-tertiary: var(--surface-sunken); --bg-card: var(--surface); --bg-elevated: var(--surface-raised); --bg-overlay: rgb(0 0 0 / 0.62); --border: var(--border-default); --border-light: var(--border-subtle); --text-muted: var(--text-disabled); --shadow-card: var(--shadow-sm); --shadow-card-hover: var(--shadow-md); --color-primary: var(--coral-500); --color-primary-light: var(--coral-300); --color-primary-dark: var(--coral-400); --color-primary-50: rgb(255 82 51 / 0.12); --color-primary-100: rgb(255 82 51 / 0.20); --color-primary-200: rgb(255 82 51 / 0.30); --color-success: var(--sig-verified); --color-success-bg: var(--sig-verified-bg); --color-warning: var(--sig-traffic); --color-warning-bg: var(--sig-traffic-bg); --color-danger: var(--sig-emergency); --color-danger-bg: var(--sig-emergency-bg); --color-info: var(--sig-water); --color-info-bg: var(--sig-water-bg); --color-emergency: var(--sig-emergency); --gradient-primary: var(--gradient-brand); --gradient-warm: var(--gradient-silk); } }