/* ======================================================================== BELORI PET JOURNAL — Foundation tokens -------------------------------------------------------------------- "Soft Tech" / Soft Consumer Minimalism: informative but clean, warm off-white grounds, deep-indigo type, lavender + orange accents, generous rounded corners, soft shadows. Mobile-first (393×853). ======================================================================== */ @font-face { font-family: "Outfit"; src: url("fonts/Outfit-VariableFont_wght.woff2") format("woff2-variations"), url("fonts/Outfit-VariableFont_wght.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("fonts/Inter-Latin-wght-400-800.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: optional; } :root { /* -------------------------------------------------------------------- COLORS — Raw palette -------------------------------------------------------------------- */ /* Inputs / form-field wash */ --input-bg: rgba(117, 139, 253, 0.07); /* "Brand whisper" — picked May 2026 */ --input-bg-hover: rgba(117, 139, 253, 0.12); /* Surfaces — warm off-white system */ --belori-bg: rgb(250, 248, 247); /* #FAF8F7 — app canvas, warm cream */ --belori-surface: rgb(254, 254, 254); /* #FEFEFE — cards */ --belori-surface-2: rgb(255, 255, 255); /* pure white — modals, dropdowns */ --belori-surface-tint: rgb(243, 239, 237); /* #F3EFED — subtle card / "latest event" */ --belori-surface-soft: rgb(249, 250, 251); /* #F9FAFB — image inset ring */ /* Brand — Indigo + Lavender */ --belori-indigo-900: rgb(39, 24, 126); /* #27187E — primary text, titles */ --belori-indigo-700: rgb(54, 65, 83); /* #364153 — secondary heading */ --belori-lavender-500: rgb(117, 139, 253); /* #758BFD — primary brand, selected, links */ --belori-lavender-300: rgb(174, 184, 254); /* #AEB8FE — soft accent, expected state */ --belori-lavender-100: rgb(216, 222, 255); /* #D8DEFF — pill backgrounds */ --belori-lavender-tint: rgba(117, 139, 253, 0.10); /* selected-tab bubble, icon halo */ /* Brand secondary — Marigold orange */ --belori-orange-500: rgb(255, 134, 0); /* #FF8600 — FAB, expected highlight, location pin */ --belori-orange-tint: rgba(255, 134, 0, 0.20); /* feed-icon halo */ --belori-peach-100: rgb(245, 230, 214); /* warm peach (rarely) */ /* Neutrals — slate-grey ramp */ --belori-ink: rgb(16, 24, 40); /* #101828 — strongest text on light */ --belori-ink-2: rgb(30, 41, 57); /* #1E2939 — checkup titles */ --belori-text: rgb(74, 85, 101); /* #4A5565 */ --belori-text-mid: rgb(106, 114, 130); /* #6A7282 — body / labels */ --belori-text-soft: rgb(96, 96, 96); /* #606060 — meta, descriptions */ --belori-text-mute: rgb(153, 161, 175); /* #99A1AF — placeholders, inactive nav */ --belori-border: rgb(241, 242, 246); /* #F1F2F6 — hairline */ --belori-border-2: rgb(229, 231, 235); /* #E5E7EB — dividers */ --belori-border-3: rgb(209, 213, 220); /* #D1D5DC — disabled bg, dot separators */ /* Semantic */ --belori-success: rgb(0, 201, 80); /* #00C950 */ --belori-danger: rgb(255, 98, 98); /* #FF6262 */ --belori-warning: rgb(255, 134, 0); /* same as orange-500 */ --belori-violet: rgb(173, 70, 255); /* #AD46FF — rare accent for special events */ --belori-purple-700: rgb(138, 56, 245); /* #8A38F5 — annotation strokes */ /* -------------------------------------------------------------------- COLORS — Semantic aliases -------------------------------------------------------------------- */ --bg: var(--belori-bg); --bg-card: var(--belori-surface); --bg-tint: var(--belori-surface-tint); --bg-modal: var(--belori-surface-2); --fg: var(--belori-indigo-900); /* default heading colour */ --fg-body: var(--belori-text-mid); /* paragraph */ --fg-muted: var(--belori-text-mute); /* placeholders, inactive */ --fg-on-brand: rgb(255, 255, 255); --brand: var(--belori-lavender-500); --brand-soft: var(--belori-lavender-tint); --accent: var(--belori-orange-500); --border: var(--belori-border); --divider: var(--belori-border-2); /* -------------------------------------------------------------------- TYPOGRAPHY -------------------------------------------------------------------- */ --font-display: "Outfit", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "Menlo", "Courier New", monospace; /* tracking-tight, "premium" headings (Tailwind-equivalent) */ --tracking-tight: -0.025em; /* h1 — -0.45 px @ 18 */ --tracking-snug: -0.015em; --tracking-wide: 0.117em; /* small uppercase labels */ /* Type scale — observed in design */ --fs-display: 32px; --lh-display: 36px; /* hero headings (wizard) */ --fs-h1: 24px; --lh-h1: 28px; /* page titles */ --fs-h2: 20px; --lh-h2: 28px; /* section heads */ --fs-h3: 18px; --lh-h3: 22.5px; /* card titles */ --fs-body-lg: 16px; --lh-body-lg: 24px; --fs-body: 14px; --lh-body: 20px; --fs-sm: 12px; --lh-sm: 16px; --fs-xs: 10px; --lh-xs: 15px; --fs-2xs: 9px; --lh-2xs: 13.5px; /* added-on labels */ /* -------------------------------------------------------------------- RADIUS — generous, never sharp -------------------------------------------------------------------- */ --radius-xs: 8px; --radius-sm: 12px; /* small chips, pet-event pill */ --radius-md: 16px; /* primary buttons, small cards */ --radius-lg: 20px; /* image insets */ --radius-xl: 24px; /* main cards (default) */ --radius-2xl: 32px; /* big sheets / wizard cards */ --radius-full: 9999px; /* FAB, avatar, pill, status dot */ /* -------------------------------------------------------------------- SHADOWS — soft, multi-layer -------------------------------------------------------------------- */ /* Default card lift (Tailwind shadow-sm vibe) */ --shadow-card: 0 1px 2px -1px rgba(0, 0, 0, 0.10), 0 1px 3px 0 rgba(0, 0, 0, 0.10); /* Slightly more pop, used on quick-action buttons */ --shadow-pop: 0 1px 2px 0 rgba(0, 0, 0, 0.25); /* FAB lift — coloured with brand for the "glow" */ --shadow-fab: 0 4px 6px -4px rgba(117, 139, 253, 0.30), 0 10px 15px -3px rgba(117, 139, 253, 0.30); --shadow-fab-orange: 0 4px 6px -4px rgba(255, 134, 0, 0.30), 0 10px 15px -3px rgba(255, 134, 0, 0.30); /* Image inset ring */ --ring-inset: 0 0 0 4px var(--belori-surface-soft); /* -------------------------------------------------------------------- SPACING — 4-pt grid -------------------------------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; /* default card padding, gap */ --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; /* -------------------------------------------------------------------- MOTION -------------------------------------------------------------------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */ --dur-fast: 120ms; /* @kind other */ --dur-base: 200ms; /* @kind other */ --dur-slow: 320ms; /* @kind other */ } /* ======================================================================== SEMANTIC ELEMENT STYLES — drop the CSS into a page and headings work. ======================================================================== */ html, body { background: var(--bg); color: var(--fg-body); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, .h1 { font-family: var(--font-display); font-size: var(--fs-display); line-height: var(--lh-display); font-weight: 800; letter-spacing: var(--tracking-tight); color: var(--belori-ink); margin: 0; } h2, .h2 { font-family: var(--font-display); font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: 700; letter-spacing: var(--tracking-tight); color: var(--fg); margin: 0; } h3, .h3 { font-family: var(--font-body); font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 700; letter-spacing: -0.022em; color: var(--fg); margin: 0; } h4, .h4 { font-family: var(--font-body); font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 700; letter-spacing: -0.024em; color: var(--belori-ink-2); margin: 0; } p, .p { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-body); margin: 0; } small, .small { font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--belori-text-soft); } code, .mono { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--belori-text); } /* Eyebrow / uppercase section label (Settings → APPEARANCE) */ .eyebrow { font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); } /* ======================================================================== UTILITY: surfaces, chips, etc — see ui_kits/ for full components. ======================================================================== */ .belori-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); } .belori-card-tint { background: var(--bg-tint); border-radius: var(--radius-xl); } .belori-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-sm); background: rgba(117, 139, 253, 0.05); color: var(--belori-indigo-900); font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--tracking-wide); }