/* ============================================================================ KeepMeApp — Design Tokens: Color + Typography ---------------------------------------------------------------------------- DIRECTION DECISIONS (resolving the two conflicting source manuals): (a) DOMINANT COLOR — we lead with ROXO PRINCIPAL #8A05BE, not #330066. Rationale: the live wordmark is rendered in #8A05BE, so brand recognition demands it be the primary brand + action color. #330066 (Roxo Escuro) is repositioned as an ATMOSPHERIC depth tone — it powers dark surfaces and the top of gradients, but is never the main "ink". #C557F7 (Lilás) is the bright interactive accent / highlight / glow. 60 / 30 / 10 hierarchy = surfaces & ink (neutral) / #8A05BE / #C557F7. (b) TYPE — we standardize the whole system on ONE live family, a clean neo-grotesque, for UI + display. The distinctive "Keep / me / App↑" treatment lives in the LOCKED logo artwork (assets/logo-*.png), so we don't need a second display face to reproduce it. Fewer fonts = a tighter, more coherent system. FONT SUBSTITUTION (flag to user — see README): Official: PP Neue Montreal (UI/body) + Co Headline (logo only). Both are commercial and not bundled here. We substitute the closest free Google equivalents for preview/prototyping: • Hanken Grotesk → stand-in for PP Neue Montreal (UI + body) • Space Grotesk → display numerics (Time Bank balances, UP counts) Drop the licensed .woff2 files into fonts/ and swap the @font-face names to ship production-accurate type. ============================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap'); /* Co Headline — the official KeepMeApp display / logo face (now licensed & bundled). Used for headlines & brand moments. PP Neue Montreal (UI/body) is still substituted by Hanken Grotesk until its web fonts are supplied. */ @font-face { font-family: 'Co Headline'; font-weight: 300; font-style: normal; font-display: swap; src: url('fonts/CoHeadline-Light.otf') format('opentype'); } @font-face { font-family: 'Co Headline'; font-weight: 400; font-style: normal; font-display: swap; src: url('fonts/CoHeadline-Regular.otf') format('opentype'); } @font-face { font-family: 'Co Headline'; font-weight: 500; font-style: normal; font-display: swap; src: url('fonts/CoHeadline-Regular.otf') format('opentype'); } @font-face { font-family: 'Co Headline'; font-weight: 600; font-style: normal; font-display: swap; src: url('fonts/CoHeadline-Bold.otf') format('opentype'); } @font-face { font-family: 'Co Headline'; font-weight: 700; font-style: normal; font-display: swap; src: url('fonts/CoHeadline-Bold.otf') format('opentype'); } :root { /* ---- BRAND PALETTE -------------------------------------------------- */ --kma-purple: #8A05BE; /* Roxo Principal — primary brand + action */ --kma-lilac: #C557F7; /* Lilás Vibrante — accent / highlight / glow*/ --kma-deep: #330066; /* Roxo Escuro — depth, gradient top, surface*/ --kma-off-white: #F6F7F8; /* Off-white — light surfaces, on-dark ink */ --kma-ink: #191919; /* Preto — base canvas, max contrast text */ /* ---- PURPLE RAMP (derived, harmonic — for states & data viz) -------- */ --purple-50: #F7EBFD; --purple-100: #EFD3FB; --purple-200: #DFA8F6; --purple-300: #CF7DF1; --purple-400: #B935E4; /* hover for primary on dark */ --purple-500: #8A05BE; /* = brand */ --purple-600: #7304A0; --purple-700: #5A0480; --purple-800: #420560; --purple-900: #330066; /* = deep */ --purple-950: #20003F; /* ---- DARK THEME SURFACES (app default) ------------------------------ */ --bg-0: #191919; /* app canvas */ --bg-1: #201A26; /* raised surface — cards (ink warmed w/ purple)*/ --bg-2: #2A2330; /* elevated surface — sheets, inputs, menus */ --bg-3: #362C40; /* highest — popovers, pressed states */ --surface-glass: rgba(42, 35, 48, 0.62); /* glass-morphism fill */ --surface-glass-2: rgba(246, 247, 248, 0.06); /* ---- BORDERS / HAIRLINES (on dark) ---------------------------------- */ --border-subtle: rgba(246, 247, 248, 0.08); --border-default: rgba(246, 247, 248, 0.14); --border-strong: rgba(246, 247, 248, 0.24); --border-brand: rgba(197, 87, 247, 0.55); /* focus ring / active */ /* ---- TEXT ON DARK --------------------------------------------------- */ --fg-1: #F6F7F8; /* primary text */ --fg-2: rgba(246, 247, 248, 0.70); /* secondary / supporting */ --fg-3: rgba(246, 247, 248, 0.46); /* tertiary / captions / metadata */ --fg-4: rgba(246, 247, 248, 0.30); /* disabled / placeholder */ --fg-on-brand: #FFFFFF; /* text on purple fills */ /* ---- TEXT ON LIGHT (for light cards / landing sections) ------------- */ --fg-1-light: #191919; --fg-2-light: rgba(25, 25, 25, 0.66); --fg-3-light: rgba(25, 25, 25, 0.44); /* ---- SEMANTIC ------------------------------------------------------- */ --success: #1FBF75; --success-bg: rgba(31, 191, 117, 0.14); --error: #FF4D6A; --error-bg: rgba(255, 77, 106, 0.14); --warning: #FFB020; --warning-bg: rgba(255, 176, 32, 0.14); --info: #C557F7; --info-bg: rgba(197, 87, 247, 0.14); --up: #C557F7; /* the UP action color = lilac (always) */ /* ---- GRADIENTS ------------------------------------------------------ */ --grad-primary: linear-gradient(135deg, #8A05BE 0%, #C557F7 100%); /* btns */ --grad-deep: linear-gradient(180deg, #330066 0%, #8A05BE 100%); /* splash*/ --grad-glow: radial-gradient(120% 120% at 50% 0%, rgba(197,87,247,0.35) 0%, rgba(138,5,190,0) 60%); --grad-ascend: linear-gradient(0deg, rgba(138,5,190,0) 0%, rgba(197,87,247,0.18) 100%); /* ---- ELEVATION / SHADOW (tuned for dark UI) ------------------------- */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.40); --shadow-md: 0 6px 18px rgba(0,0,0,0.45); --shadow-lg: 0 16px 40px rgba(0,0,0,0.55); --shadow-brand:0 8px 28px rgba(138, 5, 190, 0.45); /* purple lift */ --glow-up: 0 0 0 6px rgba(197, 87, 247, 0.18), 0 6px 22px rgba(197,87,247,0.40); /* ---- RADII ---------------------------------------------------------- */ --r-xs: 8px; --r-sm: 12px; --r-md: 16px; /* default card / input radius */ --r-lg: 20px; /* sheets, large cards */ --r-xl: 28px; --r-pill: 999px; /* ---- SPACING (4pt base) --------------------------------------------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; /* ---- BLUR (glass morphism) ------------------------------------------ */ --blur-glass: blur(20px) saturate(140%); --blur-nav: blur(28px) saturate(160%); /* ---- MOTION --------------------------------------------------------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* iOS-ish settle */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);/* UP pop / bounce */ --dur-fast: 120ms; --dur-base: 220ms; --dur-slow: 420ms; /* ---- TYPE FAMILIES -------------------------------------------------- */ --font-ui: 'Hanken Grotesk', 'PP Neue Montreal', -apple-system, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif; --font-display: 'Co Headline', 'Hanken Grotesk', -apple-system, 'SF Pro Display', sans-serif; --font-numeric: 'Space Grotesk', 'Hanken Grotesk', ui-monospace, sans-serif; /* big counts/balances */ /* ---- TYPE SCALE (mobile-first; semantic) ---------------------------- name size / line-height / weight / tracking use */ --t-display: 700 40px/44px var(--font-display); /* hero numbers / splash */ --t-h1: 700 30px/36px var(--font-display); /* screen title */ --t-h2: 600 24px/30px var(--font-display); /* section header */ --t-h3: 600 20px/26px var(--font-ui); /* card title */ --t-title: 500 17px/22px var(--font-ui); /* list item / nav title */ --t-body: 400 16px/24px var(--font-ui); /* body / descriptions */ --t-body-sm: 400 15px/22px var(--font-ui); /* secondary body */ --t-label: 500 14px/18px var(--font-ui); /* buttons / labels */ --t-caption: 400 13px/16px var(--font-ui); /* metadata / timestamps */ --t-micro: 600 11px/14px var(--font-ui); /* badges / overlines */ } /* ============================================================================ SEMANTIC ELEMENT DEFAULTS (opt-in: scope under .kma or use utilities) ============================================================================ */ .kma, .kma-dark { background: var(--bg-0); color: var(--fg-1); font: var(--t-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .kma h1 { font: var(--t-h1); letter-spacing: -0.02em; margin: 0; } .kma h2 { font: var(--t-h2); letter-spacing: -0.01em; margin: 0; } .kma h3 { font: var(--t-h3); letter-spacing: -0.01em; margin: 0; } .kma p { font: var(--t-body); color: var(--fg-2); margin: 0; } /* ---- TYPE UTILITIES -------------------------------------------------- */ .t-display { font: var(--t-display); letter-spacing: -0.02em; } .t-h1 { font: var(--t-h1); letter-spacing: -0.02em; } .t-h2 { font: var(--t-h2); letter-spacing: -0.01em; } .t-h3 { font: var(--t-h3); letter-spacing: -0.01em; } .t-title { font: var(--t-title); } .t-body { font: var(--t-body); } .t-body-sm { font: var(--t-body-sm); } .t-label { font: var(--t-label); letter-spacing: 0.01em; } .t-caption { font: var(--t-caption); } .t-micro { font: var(--t-micro); letter-spacing: 0.08em; text-transform: uppercase; } .t-numeric { font-family: var(--font-numeric); font-feature-settings: 'tnum' 1; } /* ---- COLOR UTILITIES ------------------------------------------------- */ .fg-1 { color: var(--fg-1); } .fg-2 { color: var(--fg-2); } .fg-3 { color: var(--fg-3); } .c-purple { color: var(--kma-purple); } .c-lilac { color: var(--kma-lilac); } .bg-grad-primary { background: var(--grad-primary); }