/* Webfont @import removed: each page links Google Fonts directly in so the request starts in parallel with this file rather than after it. */ /* PlaceInn design tokens — concatenated from the bound design system. Generated; do not hand-edit. */ /* ---- tokens/fonts.css ---- */ /* Webfonts — Google Fonts CDN. * * Matches the production apps' google_fonts usage. No local binaries are * bundled; if you need offline/on-prem fonts, ask and we will add them plus * the @font-face rules here. * * Inter — display, headline, and every large figure * Inter Tight — titles, body, labels, every UI string * Outfit — rare brand accent * Dancing Script — rare decorative flourish */ /* ---- tokens/colors.css ---- */ /* Brand + UI palettes — LIGHT (default). * * Source: OzanKOSE/PlaceInn — design/implementation/shared/COLORS.md * * Two palettes coexist: * 1. BRAND — warm, organic; every real-world surface in both apps. * 2. UI — neutral greyscale; Business App utility chrome only. Never in the User App. * When in doubt, use BRAND. */ :root { /* --- brand ------------------------------------------------------------ */ --primary: #0a514d; /* deep teal — the brand, and the light-mode text colour */ --secondary: #ff6f61; /* warm coral — accents, like-state, offer surfaces */ --tertiary: #14a299; /* lighter teal — gradient end, success accents */ --forth: #fea166; /* warm peach — coral-gradient end */ --alternate: #e0e3e7; /* neutral border / surface */ --primary-text: #0a514d; /* high-emphasis text — teal, not black */ --secondary-text: #57636c; /* low-emphasis text */ --primary-bg: #fafafa; /* app background (Flutter theme) */ --secondary-bg: #ffffff; /* card / surface */ --accent-1: #e0f5f3; /* soft mint highlight */ --accent-2: #39393a; /* neutral dark */ --accent-3: #ff6f61; /* coral (= secondary) */ --accent-4: #504a44; /* warm dark neutral */ --icon-bg: #0a514d; --text-shadow: rgba(87,99,108,0.6); /* --- legacy semantic (Flutter ColorScheme parity) --------------------- * These are the values the app's ThemeData carries today. They are NOT * contrast-checked across both themes — for new work use the --ok / --warn / * --err scale in semantic.css, which is. */ --success: #339624; --error: #ff5963; --warning: #f9cf58; --info: #ffffff; --destructive: #d4183d; /* --- UI palette (Business App utility chrome) ------------------------- */ --ui-background: #ffffff; --ui-foreground: #212121; --ui-primary: #030213; --ui-primary-fg: #ffffff; --ui-secondary: #f3f3f5; --ui-muted: #ececf0; --ui-muted-fg: #717182; --ui-border: rgba(0,0,0,0.10); --ui-input-bg: #f3f3f5; /* --- charts ----------------------------------------------------------- */ --chart-1: #f59e0b; --chart-2: #14b8a6; --chart-3: #3b82f6; --chart-4: #fde047; --chart-5: #fb923c; /* --- ranked series ---------------------------------------------------- * For several bars that must be told apart at a glance — follower segments, * redeemer segments, team leaderboards. Rank 1 is the darkest. */ --series-1: #0a514d; --series-2: #14a299; --series-3: #7fb8b3; --series-4: #ffb3a8; } /* ---- tokens/colors-dark.css ---- */ /* Brand + UI palettes — DARK overrides. * Applied by putting data-theme="dark" on any ancestor (usually ). */ [data-theme="dark"] { --primary: #3fb8b0; /* the teal lifts so it survives on #101413 */ --primary-text: #e8f5f4; --secondary-text: #a8b5b2; --primary-bg: #1a1d1d; --secondary-bg: #131817; --alternate: #2a3030; --secondary: #ff8a7e; /* coral lifts too */ --tertiary: #6eddd6; --accent-1: #14242a; --accent-4: #f1faf9; --ui-background: #212121; --ui-foreground: #fafafa; --ui-primary: #fafafa; --ui-primary-fg: #333333; --ui-secondary: #444444; --ui-muted: #2a2a2a; --ui-muted-fg: #a0aec0; --ui-border: #444444; --destructive: #983232; --series-1: #3fb8b0; --series-2: #6eddd6; --series-3: #2e8f89; --series-4: #256e69; } /* ---- tokens/semantic.css ---- */ /* Status semantics — CONTRAST-CHECKED LIGHT/DARK PAIRS. * * WHY THIS FILE EXISTS * The Business App had no dark semantic set to reach for, so its code hardcoded * Colors.green / red / amber / blue / orange. Those swatches are identical in * both themes and unreadable on dark surfaces. Every occurrence should be * replaced with a token below. * * THE ONE RULE THAT MATTERS * --ok / --warn / --err are FOREGROUND tokens: safe as icon or text colour on * their own surface. Used as a FILL, the label must invert — take * --warn-on-fill / --err-on-fill. White on #f87171 measures 2.77:1 and fails. * * Every pair clears 4.5:1 against the surface it is specified for. */ :root { /* success — verified, approved, redeemed, positive delta */ --ok: #16a34a; --ok-surface: #dcf3e4; /* opaque, never an alpha wash */ --ok-on-surface: #15803d; /* text ON --ok-surface */ --ok-border: #bfe9cc; --ok-tile: #dcf3e4; /* icon tile behind a check glyph */ /* warning — paused, ending soon, rejected, offline, degraded */ --warn: #b45309; --warn-surface: #fdf4e7; --warn-border: #f3e3cb; --warn-tile: #fce9ce; --warn-fill: #b45309; --warn-on-fill: #ffffff; /* error — expired, blocked, destructive, failed */ --err: #dc2626; --err-surface: #fee7e7; --err-border: #f6cfcf; --err-tile: #fee2e2; --err-fill: #dc2626; --err-on-fill: #ffffff; --err-urgent: #b3161b; /* countdowns under 30s: deeper, because it sits on --err-surface */ /* deltas */ --delta-up: #16a34a; --delta-down: #dc2626; /* confidence ladder (AI suggestions, event-lift analysis) */ --confidence-high: #16a34a; /* >= 70 */ --confidence-med: #b45309; /* 40-69 */ --confidence-low: #7c8a88; /* < 40 */ } [data-theme="dark"] { --ok: #34d399; --ok-surface: rgba(52,211,153,0.18); --ok-on-surface: #34d399; --ok-border: rgba(52,211,153,0.30); --ok-tile: rgba(52,211,153,0.20); --warn: #fbbf24; --warn-surface: #231d12; --warn-border: #33291a; --warn-tile: rgba(251,191,36,0.16); --warn-fill: #fbbf24; --warn-on-fill: #231d12; /* dark label on a light fill */ --err: #f87171; --err-surface: rgba(248,113,113,0.16); --err-border: rgba(248,113,113,0.30); --err-tile: rgba(248,113,113,0.16); --err-fill: #f87171; --err-on-fill: #2a0f0f; /* dark label on a light fill */ --err-urgent: #f87171; /* already light enough on a dark surface */ --delta-up: #34d399; --delta-down: #f87171; --confidence-high: #34d399; --confidence-med: #fbbf24; --confidence-low: #8a9996; } /* ---- tokens/surfaces.css ---- */ /* Surfaces, borders, text steps — LIGHT/DARK PAIRS. * * These are the values the redesigned screens repeat on every card. Before * this file they were literals copied by hand into each screen. * * The signature light-mode move: a page COOLER than the card * (--page #edf1f0 behind --card #ffffff) plus a teal hairline and a * teal-tinted two-layer shadow. Cards then read as genuinely lifted in light * mode — which a flat #fafafa background never achieved. */ :root { /* page + card */ --page: #edf1f0; /* cool grey; use instead of --primary-bg on redesigned screens */ --card: #ffffff; --card-border: rgba(10,81,77,0.16); /* chrome: app bars, sticky action bars, filter bars */ --chrome: #ffffff; --chrome-border: #d5dcda; /* chips, pills, quiet buttons */ --chip: #edf1f0; --chip-border: #dce3e1; /* icon tiles — the rounded square behind a glyph */ --tile: #e0f5f3; /* teal family */ --tile-coral: #fff1ee; /* coral family */ --tile-neutral: #eff2f1; /* inert: expired, draft, disabled */ /* inputs */ --field: #f7f9f8; --field-border: #dce3e1; --field-focus: #0a514d; /* 1.5px border replaces the resting one */ /* buttons */ --outline: rgba(10,81,77,0.28); /* secondary button border */ --disabled: #e4e9e8; --disabled-fg: #9aa4ae; /* exempt from 4.5:1 — WCAG 1.4.3 excludes inactive controls */ /* rules and tracks */ --divider: #e2e8e6; /* between rows inside a card */ --divider-soft: #e7edeb; /* between dense list rows */ --track: #dfe6e4; /* progress bars, bar-chart backgrounds */ /* sheets, menus, overlays */ --sheet: #ffffff; --sheet-scrim: rgba(10,30,28,0.5); --sheet-grabber: rgba(87,99,108,0.35); --menu: #ffffff; --menu-border: #e0e3e7; --menu-scrim: rgba(10,30,28,0.35); /* read-outs — the quiet block that explains a number in one sentence */ --readout: #f1f5f4; /* text steps beyond --primary-text / --secondary-text */ --text-muted: #7c8a88; /* section explanations, metric labels */ --text-faint: #57636c; /* timestamps, footnotes, units. * NOT a lighter grey: #9aa4ae measures 2.53:1 on * white and 2.22:1 on --page, and these strings are * data-bearing. Do not lighten this token. */ /* camera surfaces (QR scanner) */ --reticle: #ffffff; /* bracket colour — NEVER --primary: deep teal * over a dark camera feed is near-invisible */ --overlay-chrome: rgba(4,18,17,0.55); /* buttons floating over the feed */ --overlay-scrim: rgba(4,18,17,0.62); /* the dim mask around the reticle */ --overlay-strong: rgba(4,18,17,0.86); /* behind a blocking error card */ } [data-theme="dark"] { --page: #101413; --card: #1a1f1e; --card-border: #2a3230; --chrome: #161a19; --chrome-border: #2a3230; --chip: #101413; --chip-border: #2a3230; --tile: rgba(63,184,176,0.16); --tile-coral: rgba(255,138,126,0.16); --tile-neutral: #252d2b; --field: #101413; --field-border: #2a3230; --field-focus: #3fb8b0; --outline: #3a4542; --disabled: #202725; --disabled-fg: #5c6a67; --divider: #252d2b; --divider-soft: #232a28; --track: #252d2b; --sheet: #1a1f1e; --sheet-scrim: rgba(0,0,0,0.6); --sheet-grabber: rgba(232,245,244,0.28); --menu: #22292a; --menu-border: #3a4542; --menu-scrim: rgba(0,0,0,0.45); --readout: #151a19; --text-muted: #8a9996; --text-faint: #6b7a77; --reticle: #6eddd6; --overlay-chrome: rgba(4,18,17,0.55); --overlay-scrim: rgba(4,18,17,0.62); --overlay-strong: rgba(4,18,17,0.86); } /* ---- tokens/gradients.css ---- */ /* Gradients — reserved for emphasis. Never a page background in app chrome. * * Flutter authors these at 56.8 degrees (approximately topLeft to * bottomRight); CTA buttons override to centerLeft to centerRight. The web * equivalents are 135deg and 90deg. */ :root { /* brand */ --gradient-1: linear-gradient(135deg, #0a514d 0%, #14a299 100%); /* @kind color */ --gradient-1-cta: linear-gradient(90deg, #0a514d 0%, #14a299 100%); /* @kind color */ --gradient-2: linear-gradient(135deg, #ff6f61 0%, #fea166 100%); /* @kind color */ --gradient-3: linear-gradient(135deg, #39393a 0%, #504a44 100%); /* @kind color */ --gradient-bg-light: linear-gradient(135deg, #fafafa 0%, #ffffff 100%); --gradient-bg-dark: linear-gradient(135deg, #1a1d1d 0%, #131817 100%); /* named by use — what redesigned screens reference */ --gradient-band: linear-gradient(150deg, #0a514d 0%, #0d6560 100%); /* @kind color */ /* screen header band */ --gradient-cta: linear-gradient(90deg, #0a514d 0%, #14a299 100%); /* @kind color */ /* primary action */ --gradient-fab: linear-gradient(135deg, #0a514d 0%, #14a299 100%); /* @kind color */ /* floating action button */ --gradient-offer: linear-gradient(135deg, #ff6f61 0%, #fea166 100%); /* @kind color */ /* discount ticket / coupon */ --gradient-avatar: linear-gradient(135deg, #0a514d 0%, #14a299 100%); /* @kind color */ /* own-business avatar */ } [data-theme="dark"] { --gradient-band: linear-gradient(150deg, #0a403d 0%, #0d5450 100%); /* @kind color */ /* --gradient-cta, --gradient-fab and --gradient-offer are unchanged across * themes on purpose: they carry white text in both. */ } /* ---- tokens/spacing.css ---- */ /* Spacing, radius, icon sizes, control heights. * * 4px base. 16 is the default screen horizontal padding; sections separate * with 22-26; major chunks with 32. */ :root { /* --- spacing --------------------------------------------------------- */ --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-base: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; /* Off-grid steps the redesigned screens genuinely use inside a card. Kept as * tokens because snapping them to the 4px grid changes the rhythm visibly. */ --space-3: 3px; --space-5: 5px; --space-6: 6px; --space-7: 7px; --space-9: 9px; --space-10: 10px; --space-11: 11px; --space-13: 13px; --space-14: 14px; --space-18: 18px; --space-22: 22px; --space-26: 26px; /* --- radius ---------------------------------------------------------- */ --radius-sm: 6px; /* chips, badges */ --radius-md: 8px; /* minor UI, small buttons */ --radius-base: 10px; /* default: buttons, inputs, read-out blocks */ --radius-lg: 10px; --radius-tile: 9px; /* small icon tiles (26px) */ --radius-pill: 12px; /* info pills, stat cards, icon tiles (38px) */ --radius-card: 14px; /* EVERY card on a redesigned screen */ --radius-xl: 14px; --radius-hero: 16px; /* offer tickets, guidance panels, summary cards */ --radius-2xl: 20px; /* dialogs, blocking error cards */ --radius-sheet: 22px; /* bottom sheets — top corners only */ --radius-full: 9999px; /* stadium CTAs */ /* --- icon sizes ------------------------------------------------------ */ --icon-xs: 12px; --icon-sm: 16px; --icon-md: 20px; --icon-lg: 24px; --icon-xl: 48px; --icon-stroke: 2; /* Lucide default; 2.4-2.6 for small emphasis marks */ /* --- control heights ------------------------------------------------- */ --control-sm: 40px; /* M3 default button */ --control-md: 46px; /* card action buttons */ --control-lg: 48px; /* sticky action bar, extended FAB */ --control-cta: 56px; /* primary screen CTA */ --hit-min: 44px; /* minimum tap target — never smaller */ } /* ---- tokens/elevation.css ---- */ /* Elevation. * * Shadows are TEAL-TINTED, not neutral grey — the detail that ties elevation * to the brand. In dark mode shadows go near-black and the 1px --card-border * does the separating work instead. */ :root { /* legacy (Flutter parity) */ --shadow-card: 0 2px 8px rgba(0,0,0,0.05); --shadow-raised: 0 4px 12px rgba(0,0,0,0.08); --shadow-modal: 0 16px 48px rgba(10,81,77,0.18); --shadow-fab: 0 6px 16px rgba(10,81,77,0.30); /* named by use — what redesigned screens reference */ --elev-card: 0 4px 14px rgba(10,81,77,0.10), 0 1px 2px rgba(10,81,77,0.07); --elev-tile: 0 6px 18px rgba(10,81,77,0.14), 0 1px 2px rgba(10,81,77,0.08); --elev-modal: 0 16px 48px rgba(10,81,77,0.28); --elev-sheet: 0 -12px 40px rgba(10,81,77,0.22); --elev-drawer: 12px 0 40px rgba(10,81,77,0.24); --elev-fab: 0 6px 16px rgba(10,81,77,0.30); --elev-offer: 0 10px 24px rgba(255,111,97,0.26); --elev-hero: 0 14px 30px rgba(10,81,77,0.24); } [data-theme="dark"] { --shadow-card: 0 2px 8px rgba(0,0,0,0.40); --shadow-raised: 0 4px 12px rgba(0,0,0,0.50); --shadow-modal: 0 16px 48px rgba(0,0,0,0.60); --elev-card: 0 2px 10px rgba(0,0,0,0.35); --elev-tile: 0 2px 10px rgba(0,0,0,0.35); --elev-modal: 0 16px 48px rgba(0,0,0,0.60); --elev-sheet: 0 -12px 40px rgba(0,0,0,0.6); --elev-drawer: 12px 0 40px rgba(0,0,0,0.6); --elev-fab: 0 6px 16px rgba(0,0,0,0.5); --elev-offer: 0 10px 24px rgba(0,0,0,0.45); --elev-hero: 0 14px 30px rgba(0,0,0,0.5); } /* ---- tokens/typography.css ---- */ /* Type — families, scale, and the semantic .t-* classes. * * Inter for display and headline, with GENEROUS POSITIVE letter-spacing * (1.92px at 24px, 5.12px at 64px). Unusual and intentional: it is what makes * the brand read upscale rather than start-up. * Inter Tight for everything else — titles, body, labels, every UI string. * * Two additions below the original scale, both used constantly by the * redesigned screens: the EYEBROW (a small uppercase section label with wide * tracking) and the EXPLANATION (the one-line sentence under it). Together * they are the pattern that makes a dense business screen legible. * * Plus a FIGURE scale: Inter with negative tracking, for the numbers that * carry a screen (a hero metric, a band counter, an offer value). Body type is * Inter Tight; big numbers are Inter — mixing them is deliberate. */ :root { /* ============================================================ TYPE — FONT FAMILIES ============================================================ */ --font-primary: 'Inter', system-ui, sans-serif; /* display + headline */ --font-secondary: 'Inter Tight', 'Inter', sans-serif; /* body + UI */ --font-accent: 'Outfit', sans-serif; /* limited brand accent */ --font-decorative: 'Dancing Script', cursive; /* rare decorative */ /* ============================================================ TYPE SCALE — semantic Display + Headline → Inter / 600 / generous letter-spacing Title → Inter Tight / 500 / 0 Body + Label → Inter Tight / 400 / 1.5 line-height ============================================================ */ --display-lg-size: 64px; --display-lg-tracking: 5.12px; --display-md-size: 44px; --display-md-tracking: 3.52px; --display-sm-size: 36px; --display-sm-tracking: 2.88px; --headline-lg-size: 32px; --headline-lg-tracking: 2.56px; --headline-md-size: 28px; --headline-md-tracking: 2.24px; --headline-sm-size: 24px; --headline-sm-tracking: 1.92px; --title-lg-size: 22px; --title-md-size: 18px; --title-sm-size: 16px; --body-lg-size: 16px; --body-md-size: 14px; --body-sm-size: 12px; --label-lg-size: 16px; --label-md-size: 14px; --label-sm-size: 12px; /* --- eyebrow + explanation (section header pattern) ------------------ */ --eyebrow-size: 11px; --eyebrow-tracking: 1.2px; --eyebrow-weight: 700; --explanation-size: 11px; --explanation-lh: 1.45; /* @kind other */ /* --- figures (Inter, negative tracking) ------------------------------ */ --figure-hero-size: 44px; --figure-hero-tracking: -1.5px; --figure-band-size: 30px; --figure-band-tracking: -1px; --figure-lg-size: 24px; --figure-lg-tracking: -0.6px; --figure-md-size: 20px; --figure-md-tracking: -0.5px; --figure-sm-size: 18px; --figure-sm-tracking: -0.4px; } /* ============================================================ SEMANTIC TYPE — apply via class on element Use these instead of raw font properties whenever possible. ============================================================ */ .t-display-lg { font-family: var(--font-primary); font-size: var(--display-lg-size); font-weight: 600; letter-spacing: var(--display-lg-tracking); line-height: 1.05; } .t-display-md { font-family: var(--font-primary); font-size: var(--display-md-size); font-weight: 600; letter-spacing: var(--display-md-tracking); line-height: 1.1; } .t-display-sm { font-family: var(--font-primary); font-size: var(--display-sm-size); font-weight: 600; letter-spacing: var(--display-sm-tracking); line-height: 1.15; } .t-headline-lg { font-family: var(--font-primary); font-size: var(--headline-lg-size); font-weight: 600; letter-spacing: var(--headline-lg-tracking); line-height: 1.2; } .t-headline-md { font-family: var(--font-primary); font-size: var(--headline-md-size); font-weight: 600; letter-spacing: var(--headline-md-tracking); line-height: 1.25; } .t-headline-sm { font-family: var(--font-primary); font-size: var(--headline-sm-size); font-weight: 600; letter-spacing: var(--headline-sm-tracking); line-height: 1.3; } .t-title-lg { font-family: var(--font-secondary); font-size: var(--title-lg-size); font-weight: 500; line-height: 1.3; } .t-title-md { font-family: var(--font-secondary); font-size: var(--title-md-size); font-weight: 500; line-height: 1.35; } .t-title-sm { font-family: var(--font-secondary); font-size: var(--title-sm-size); font-weight: 500; line-height: 1.4; } /* Common idiom: Title + bold-700 weight is used heavily in discount cards, dialog titles, and primary CTA labels. */ .t-title-md.bold, .t-title-lg.bold, .t-title-sm.bold { font-weight: 700; } .t-body-lg { font-family: var(--font-secondary); font-size: var(--body-lg-size); font-weight: 400; line-height: 1.5; } .t-body-md { font-family: var(--font-secondary); font-size: var(--body-md-size); font-weight: 400; line-height: 1.5; } .t-body-sm { font-family: var(--font-secondary); font-size: var(--body-sm-size); font-weight: 400; line-height: 1.5; } .t-label-lg { font-family: var(--font-secondary); font-size: var(--label-lg-size); font-weight: 400; } .t-label-md { font-family: var(--font-secondary); font-size: var(--label-md-size); font-weight: 400; } .t-label-sm { font-family: var(--font-secondary); font-size: var(--label-sm-size); font-weight: 400; } .t-accent { font-family: var(--font-accent); font-weight: 700; } .t-decorative { font-family: var(--font-decorative); font-weight: 500; } /* Convenience semantic mappings */ h1, .h1 { font-family: var(--font-primary); font-size: var(--headline-lg-size); font-weight: 600; letter-spacing: var(--headline-lg-tracking); line-height: 1.2; color: var(--primary-text); margin: 0; } h2, .h2 { font-family: var(--font-primary); font-size: var(--headline-md-size); font-weight: 600; letter-spacing: var(--headline-md-tracking); line-height: 1.25; color: var(--primary-text); margin: 0; } h3, .h3 { font-family: var(--font-primary); font-size: var(--headline-sm-size); font-weight: 600; letter-spacing: var(--headline-sm-tracking); line-height: 1.3; color: var(--primary-text); margin: 0; } h4, .h4 { font-family: var(--font-secondary); font-size: var(--title-lg-size); font-weight: 700; line-height: 1.3; color: var(--primary-text); margin: 0; } h5, .h5 { font-family: var(--font-secondary); font-size: var(--title-md-size); font-weight: 700; line-height: 1.35; color: var(--primary-text); margin: 0; } p { font-family: var(--font-secondary); font-size: var(--body-md-size); font-weight: 400; line-height: 1.5; color: var(--primary-text); margin: 0; } small { font-family: var(--font-secondary); font-size: var(--body-sm-size); font-weight: 400; line-height: 1.5; color: var(--secondary-text); } code { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 13px; background: var(--ui-secondary); padding: 2px 6px; border-radius: var(--radius-sm); color: var(--accent-2); } /* --- section header pattern ------------------------------------------- */ .t-eyebrow { font-family: var(--font-secondary); font-size: var(--eyebrow-size); font-weight: var(--eyebrow-weight); letter-spacing: var(--eyebrow-tracking); text-transform: uppercase; color: var(--primary); } .t-explanation { font-family: var(--font-secondary); font-size: var(--explanation-size); font-weight: 400; line-height: var(--explanation-lh); color: var(--text-muted); } /* --- figures ---------------------------------------------------------- */ .t-figure-hero { font-family: var(--font-primary); font-size: var(--figure-hero-size); font-weight: 700; letter-spacing: var(--figure-hero-tracking); line-height: 1; } .t-figure-band { font-family: var(--font-primary); font-size: var(--figure-band-size); font-weight: 700; letter-spacing: var(--figure-band-tracking); line-height: 1; } .t-figure-lg { font-family: var(--font-primary); font-size: var(--figure-lg-size); font-weight: 700; letter-spacing: var(--figure-lg-tracking); } .t-figure-md { font-family: var(--font-primary); font-size: var(--figure-md-size); font-weight: 700; letter-spacing: var(--figure-md-tracking); } .t-figure-sm { font-family: var(--font-primary); font-size: var(--figure-sm-size); font-weight: 700; letter-spacing: var(--figure-sm-tracking); } /* ---- styles.css ---- */ /* PlaceInn Design System — global CSS entry point. * * This file is the compiler's canonical entry: it contains @import lines ONLY. * Everything reachable from here ships to consumers. * Order matters — light values first, dark overrides after. */