/* ============================================================ CLEVER SECURE — Design System Tokens (finalized iteration 1) Source of truth: 07a_Design_System_Base.md (challenged + refined) Dark is the default theme (D59). Light declined in full parity. ------------------------------------------------------------ DESIGN DIRECTOR REFINEMENTS vs the base (documented inline): - "cleverblue" #3B5BDB kept as functional accent but DEMOTED. The signature premium accent is COPPER. A bright royal blue alone reads SaaS/Stripe (an explicit anti-goal). Copper carries the "art de vivre / patrimoine" warmth Apple Home lacks. - Background deepened to a near-black warm anthracite so copper glows. Surfaces kept on the spec ladder. - Armed-away green desaturated further (calmer, less "exit sign"). - Critical red held muted (never flashy) + dedicated glow only. ============================================================ */ :root, [data-theme="dark"] { color-scheme: dark; /* ---- Brand ---- */ --brand-blue: #4360DD; /* functional accent: focus, links, info */ --brand-blue-muted: #2C3F8F; --brand-copper: #C68A4E; /* SIGNATURE premium accent (elevated) */ --brand-copper-soft: #E0B483; --brand-copper-deep: #8C5824; /* ---- Safety semantics ---- */ --safety-disarmed: #5B79EB; /* calm blue */ --safety-night: #6366F1; /* indigo veille */ --safety-away: #4E8A6B; /* desaturated sage — armed absent */ --safety-home: #7C8CF8; /* présence */ --alert-minor: #C7A14A; /* ocre */ --alert-critical: #C2504E; /* rouge sourd */ --alert-critical-deep:#7A2A2A; --degraded: #8A93A3; --success: #4E8A6B; /* ---- Surfaces ---- */ --bg: #080B14; /* deepened from #0A0E1A */ --bg-grad-top: #0E1322; --surface-1: #131826; --surface-2: #1B2231; --surface-3: #242C3D; --surface-inset:#0C1019; --scrim: rgba(0,0,0,0.62); --glass: rgba(18,23,37,0.66); --glass-border: rgba(255,255,255,0.10); --hairline: rgba(255,255,255,0.07); /* ---- Text ---- */ --text-1: #F2F5FB; --text-2: #A7B2C4; --text-3: #6B7689; --text-inverse: #080B14; --text-on-accent: #FFFFFF; /* ---- Borders ---- */ --border-subtle: rgba(255,255,255,0.06); --border-default: rgba(255,255,255,0.11); --border-strong: rgba(255,255,255,0.18); /* ---- Elevation / glow ---- */ --shadow-card: none; --shadow-sheet: 0 -18px 60px rgba(0,0,0,0.55); --glow-brand: 0 0 36px rgba(67,96,221,0.30); --glow-copper: 0 0 40px rgba(198,138,78,0.22); --glow-alert: 0 0 50px rgba(194,80,78,0.38); /* tile/photo overlay scrim for legibility on imagery */ --photo-scrim: linear-gradient(180deg, rgba(8,11,20,0) 30%, rgba(8,11,20,0.85) 100%); } [data-theme="light"] { color-scheme: light; --brand-blue: #3B5BDB; --brand-blue-muted: #5870D9; --brand-copper: #A8692F; --brand-copper-soft: #C68A4E; --brand-copper-deep: #804E22; --safety-disarmed: #3B5BDB; --safety-night: #5048C9; --safety-away: #46815F; --safety-home: #5A6BE6; --alert-minor: #9A7526; --alert-critical: #A83C3A; --alert-critical-deep:#C2504E; --degraded: #6B7280; --success: #46815F; --bg: #EEF1F6; --bg-grad-top: #F6F8FB; --surface-1: #FFFFFF; --surface-2: #FFFFFF; --surface-3: #FFFFFF; --surface-inset:#EAEEF4; --scrim: rgba(10,14,26,0.34); --glass: rgba(255,255,255,0.80); --glass-border: rgba(10,14,26,0.08); --hairline: rgba(10,14,26,0.08); --text-1: #0B0F1A; --text-2: #4A5568; --text-3: #8A93A3; --text-inverse: #FFFFFF; --text-on-accent: #FFFFFF; --border-subtle: rgba(10,14,26,0.07); --border-default: rgba(10,14,26,0.12); --border-strong: rgba(10,14,26,0.22); --shadow-card: 0 1px 2px rgba(10,14,26,0.05), 0 6px 18px rgba(10,14,26,0.06); --shadow-sheet: 0 -12px 48px rgba(10,14,26,0.16); --glow-brand: 0 8px 28px rgba(59,91,219,0.18); --glow-copper: 0 8px 28px rgba(168,105,47,0.16); --glow-alert: 0 10px 40px rgba(168,60,58,0.22); --photo-scrim: linear-gradient(180deg, rgba(255,255,255,0) 30%, rgba(20,24,34,0.55) 100%); } /* ============================================================ TYPOGRAPHY CHALLENGE: base proposed Inter. Inter is competent but generic and on every product — it cannot be "reconnaissable au premier coup d'oeil". Final: HANKEN GROTESK as the single system family (warm humanist grotesque, premium, full FR/EN, free). A refined serif (Newsreader) is reserved ONLY for the residence wordmark as a quiet hospitality/estate signature — optional via Tweaks. In production RN, swap to SF Pro / Roboto natively for platform fit. ITERATION 2: signature serif dropped entirely (client request). The residence signature is now BRICOLAGE GROTESQUE — sans-serif, upright, warm contrast against the Hanken body. No italics anywhere. ============================================================ */ :root { --font-sans: "Hanken Grotesk", -apple-system, "Segoe UI", system-ui, sans-serif; --font-signature: "Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace; /* type scale (px) */ --t-display-lg: 34px; --t-display-md: 28px; --t-heading-lg: 22px; --t-heading-md: 18px; --t-body-lg: 16px; --t-body-md: 14px; --t-body-sm: 12px; --t-label-lg: 16px; --t-label-md: 14px; --t-label-sm: 12px; /* spacing — 4pt 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: 64px; --screen-margin: 20px; /* radius */ --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-full: 999px; /* motion */ --e-standard: cubic-bezier(0.2, 0, 0, 1); --e-entrance: cubic-bezier(0, 0, 0, 1); --e-exit: cubic-bezier(0.4, 0, 1, 1); --d-fast: 150ms; --d-med: 250ms; --d-slow: 450ms; --d-vslow: 800ms; } * { box-sizing: border-box; } body { font-family: var(--font-sans); } .tnum { font-variant-numeric: tabular-nums; }