/* ============================================================= Roomigo Design System — Tokens Color + Type foundations for the redesigned product. ============================================================= */ /* ---------- Fonts -------------------------------------------- */ /* Poppins is the brand font (3 weights ship with the Flutter app). We extend with Inter for fine UI text and a light serif (Fraunces) for accent / display moments — flagged as a system substitution until brand confirms. */ @font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/Poppins-Regular.ttf") format("truetype"); } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/Poppins-Medium.ttf") format("truetype"); } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/Poppins-Bold.ttf") format("truetype"); } @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,400;9..144,500&display=swap"); :root { /* ---------- Brand color (from Flutter app_colors.dart) ----- */ --rmg-primary: #5B5FEF; /* refined from #6366F1 — anchor */ --rmg-primary-600: #4B4FE0; --rmg-primary-700: #3F44C7; --rmg-primary-300: #9CA0F7; --rmg-primary-100: #E7E8FE; --rmg-primary-50: #F2F3FF; --rmg-blue: #3B82F6; /* secondary accent */ --rmg-blue-100: #DBEAFE; --rmg-grad-start: #5EB6FF; /* logo gradient — blue */ --rmg-grad-mid: #7E8AFF; /* logo gradient — indigo */ --rmg-grad-end: #A78BFA; /* logo gradient — violet */ /* ---------- Neutrals (warm-cool) ---------------------------- */ --rmg-ink: #0F1222; /* near-black, slight blue cast */ --rmg-ink-2: #1F2233; --rmg-fg-1: #1B1E2E; /* primary text */ --rmg-fg-2: #4A4F66; /* secondary text */ --rmg-fg-3: #7A7F95; /* tertiary text */ --rmg-fg-4: #A8ACC0; /* disabled / hint */ --rmg-bg: #FBFBFD; /* app background — slight cool tint */ --rmg-bg-elev: #FFFFFF; /* card surface */ --rmg-bg-2: #F4F5F9; /* subtle fill — chip, input */ --rmg-bg-3: #ECEEF4; /* hover fill */ --rmg-border: #E6E8F0; /* hairline */ --rmg-border-strong: #D4D7E3; /* form border focus */ --rmg-border-soft: #EFF1F6; /* ---------- Semantic --------------------------------------- */ --rmg-success: #10B981; --rmg-success-bg: #DEF7EC; --rmg-warning: #F59E0B; --rmg-warning-bg: #FEF3C7; --rmg-danger: #EF4444; --rmg-danger-bg: #FEE2E2; --rmg-info: #3B82F6; --rmg-info-bg: #DBEAFE; --rmg-rating: #F5B400; --rmg-verified: #10B981; --rmg-favorite: #FF4D6D; /* ---------- Type families ---------------------------------- */ --rmg-font-display: "Poppins", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --rmg-font-text: "Inter", "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif; --rmg-font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace; --rmg-font-accent: "Fraunces", Georgia, serif; /* for "Roomigo" wordmark, hero quotes */ /* ---------- Type scale (mobile-first, app surface 390px) --- */ --rmg-fs-display: 34px; /* hero greeting */ --rmg-fs-h1: 28px; /* screen title */ --rmg-fs-h2: 22px; /* section title */ --rmg-fs-h3: 18px; /* card title */ --rmg-fs-h4: 16px; /* sub-section */ --rmg-fs-body: 15px; /* body */ --rmg-fs-body-sm: 14px; /* secondary body */ --rmg-fs-caption: 12.5px; /* meta / caption */ --rmg-fs-micro: 11px; /* badges, tags */ --rmg-lh-tight: 1.15; --rmg-lh-snug: 1.3; --rmg-lh-base: 1.5; --rmg-lh-loose: 1.65; --rmg-tracking-tight: -0.02em; --rmg-tracking-snug: -0.01em; --rmg-tracking-normal: 0; --rmg-tracking-wide: 0.04em; /* uppercase eyebrows */ /* ---------- Spacing (4-pt scale, Flutter parity) ----------- */ --rmg-space-1: 4px; --rmg-space-2: 8px; --rmg-space-3: 12px; --rmg-space-4: 16px; --rmg-space-5: 20px; --rmg-space-6: 24px; --rmg-space-7: 32px; --rmg-space-8: 40px; --rmg-space-9: 48px; --rmg-space-10: 64px; /* Sugar */ --rmg-screen-pad: 20px; /* AppSpacing.screenPadding */ --rmg-card-pad: 16px; /* AppSpacing.cardPadding */ --rmg-section-gap: 28px; /* ---------- Radii ------------------------------------------ */ --rmg-radius-xs: 8px; --rmg-radius-sm: 12px; --rmg-radius: 16px; /* default — cards, inputs */ --rmg-radius-lg: 20px; --rmg-radius-xl: 24px; --rmg-radius-2xl: 28px; /* hero, image */ --rmg-radius-pill: 999px; /* ---------- Elevation -------------------------------------- */ /* Soft, layered, never harsh. */ --rmg-shadow-1: 0 1px 2px rgba(15, 18, 34, 0.04), 0 2px 6px rgba(15, 18, 34, 0.05); --rmg-shadow-2: 0 2px 4px rgba(15, 18, 34, 0.04), 0 8px 20px rgba(15, 18, 34, 0.06); --rmg-shadow-3: 0 4px 10px rgba(15, 18, 34, 0.05), 0 16px 40px rgba(15, 18, 34, 0.10); --rmg-shadow-cta: 0 6px 16px rgba(91, 95, 239, 0.30); --rmg-shadow-inset: inset 0 0 0 1px var(--rmg-border); /* ---------- Component sizes -------------------------------- */ --rmg-control-h: 52px; /* input / large button */ --rmg-control-h-sm: 44px; --rmg-control-h-xs: 36px; /* ---------- Gradients -------------------------------------- */ --rmg-grad-brand: linear-gradient(135deg, var(--rmg-grad-start) 0%, var(--rmg-grad-mid) 55%, var(--rmg-grad-end) 100%); --rmg-grad-brand-soft: linear-gradient(135deg, #F0F6FF 0%, #F2F3FF 50%, #F7F0FF 100%); --rmg-grad-ink: linear-gradient(180deg, rgba(15,18,34,0) 40%, rgba(15,18,34,0.55) 100%); /* ---------- Motion ----------------------------------------- */ --rmg-ease-out: cubic-bezier(0.22, 1, 0.36, 1); --rmg-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --rmg-dur-fast: 120ms; --rmg-dur: 200ms; --rmg-dur-slow: 360ms; } /* ============================================================= Semantic recipes — apply tokens to common HTML ============================================================= */ .rmg { font-family: var(--rmg-font-text); color: var(--rmg-fg-1); background: var(--rmg-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "ss01", "cv11"; text-rendering: optimizeLegibility; } .rmg-display { font-family: var(--rmg-font-display); font-size: var(--rmg-fs-display); font-weight: 700; line-height: var(--rmg-lh-tight); letter-spacing: var(--rmg-tracking-tight); color: var(--rmg-fg-1); } .rmg-h1 { font-family: var(--rmg-font-display); font-size: var(--rmg-fs-h1); font-weight: 700; line-height: var(--rmg-lh-tight); letter-spacing: var(--rmg-tracking-tight); color: var(--rmg-fg-1); } .rmg-h2 { font-family: var(--rmg-font-display); font-size: var(--rmg-fs-h2); font-weight: 700; line-height: var(--rmg-lh-snug); letter-spacing: var(--rmg-tracking-snug); color: var(--rmg-fg-1); } .rmg-h3 { font-family: var(--rmg-font-display); font-size: var(--rmg-fs-h3); font-weight: 600; line-height: var(--rmg-lh-snug); color: var(--rmg-fg-1); } .rmg-h4 { font-family: var(--rmg-font-display); font-size: var(--rmg-fs-h4); font-weight: 600; line-height: var(--rmg-lh-snug); color: var(--rmg-fg-1); } .rmg-body { font-size: var(--rmg-fs-body); font-weight: 400; line-height: var(--rmg-lh-base); color: var(--rmg-fg-2); } .rmg-body-sm { font-size: var(--rmg-fs-body-sm); font-weight: 400; line-height: var(--rmg-lh-base); color: var(--rmg-fg-2); } .rmg-caption { font-size: var(--rmg-fs-caption); font-weight: 500; line-height: var(--rmg-lh-base); color: var(--rmg-fg-3); } .rmg-eyebrow { font-size: var(--rmg-fs-micro); font-weight: 600; line-height: 1.2; letter-spacing: var(--rmg-tracking-wide); text-transform: uppercase; color: var(--rmg-fg-3); } .rmg-price { font-family: var(--rmg-font-display); font-weight: 700; font-size: 22px; letter-spacing: var(--rmg-tracking-tight); color: var(--rmg-fg-1); } .rmg-wordmark { font-family: var(--rmg-font-accent); font-optical-sizing: auto; font-weight: 500; font-size: 26px; letter-spacing: -0.025em; color: var(--rmg-fg-1); }