/* ========================================================================== Sipfolio — Foundational tokens (colors + type) Sourced from the Sipfolio iOS codebase (Assets.xcassets + SwiftUI views). Native iOS 26 / SwiftUI app — these tokens approximate the system look. ========================================================================== */ :root { /* -------- Brand color ---------------------------------------------------- Pulled from BrandColorTabBar.colorset (display-p3 R76 G80 B66, light) and SipColor.colorset (display-p3 R106 G111 B91, light). Sage / olive — the only chromatic brand color in the system. */ --brand-700: #3a3e2f; /* darkest sage — text on cream */ --brand-600: #4c5042; /* BrandColorTabBar light (primary) */ --brand-500: #6a6f5b; /* SipColor light (accent) */ --brand-400: #899177; /* BrandColorTabBar dark (DM tint) */ --brand-300: #b3b8a4; /* mug body in app icon (surface) */ --brand-200: #d3d6c5; --brand-100: #e9edc9; /* onboarding mesh */ --brand-050: #f3f1df; /* -------- Cream / paper neutrals ---------------------------------------- The MeshGradient palette in OnboardingView. These are the "warm paper" backgrounds the app falls back to for splash, onboarding, empty states. */ --cream-bg: #fefae0; /* primary paper */ --cream-soft: #faedcd; /* secondary paper */ --cream-edge: #ccd5ae; /* paper-to-sage transition */ /* -------- iOS system neutrals (light) ----------------------------------- The rest of the palette is just the iOS system: white surfaces, systemGray6 cards, .label / .secondaryLabel text. We mirror them here so HTML mocks track the native look. */ --bg: #ffffff; /* systemBackground */ --bg-grouped: #f2f2f7; /* systemGroupedBackground */ --surface: #ffffff; /* secondarySystemBackground */ --surface-grouped: #ffffff; /* secondarySystemGroupedBackground */ --fill-1: #efeff0; /* systemGray6 — chip / cell fill */ --fill-2: #e5e5ea; /* systemGray5 */ --separator: rgba(60,60,67,0.18); --label: #212121; /* AccentColor light = #212121 */ --label-secondary: rgba(60,60,67,0.60); --label-tertiary: rgba(60,60,67,0.30); --label-quaternary: rgba(60,60,67,0.18); --label-on-brand: #ffffff; /* -------- iOS semantic colors used in the app -------------------------- RatingView and the Atmosphere/Service/Value/Amenities steppers use red / orange / green from SwiftUI's color set. */ --systemRed: #ff3b30; --systemOrange: #ff9500; --systemYellow: #ffcc00; /* RatingView star fill */ --systemGreen: #34c759; --systemBlue: #007aff; --systemBlueLink: #007aff; /* -------- Radii --------------------------------------------------------- The codebase uses three concrete radii: 10 (image cards), 14 (advertisement squares), 24 (search row chips, recipe cells). Plus iOS 26 ConcentricRectangle for sheets/buttons. */ --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 24px; --r-pill: 999px; /* -------- Spacing (4-pt scale, matching SwiftUI defaults) -------------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px; /* -------- Shadow (iOS soft) -------------------------------------------- */ --shadow-card: 0 1px 2px rgba(20,20,30,0.04), 0 4px 12px rgba(20,20,30,0.06); --shadow-glass: 0 6px 24px rgba(20,20,30,0.10), 0 1px 0 rgba(255,255,255,0.6) inset; --shadow-pop: 0 12px 40px rgba(20,20,30,0.18); /* -------- Type ---------------------------------------------------------- System default: SF Pro (San Francisco). On the web we substitute the system stack so the OS ships SF on Apple devices and a close fallback elsewhere. The wordmark uses the same family at black weight, all caps. */ --font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", system-ui, sans-serif; --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro", "Inter", system-ui, sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, monospace; /* iOS Dynamic Type ramp (default text size, points = px on web) */ --t-largeTitle: 34px; --w-largeTitle: 700; --lh-largeTitle: 1.12; --t-title1: 28px; --w-title1: 700; --lh-title1: 1.18; --t-title2: 22px; --w-title2: 700; --lh-title2: 1.22; --t-title3: 20px; --w-title3: 600; --lh-title3: 1.25; --t-headline: 17px; --w-headline: 600; --lh-headline: 1.30; --t-body: 17px; --w-body: 400; --lh-body: 1.45; --t-callout: 16px; --w-callout: 400; --lh-callout: 1.40; --t-subhead: 15px; --w-subhead: 400; --lh-subhead: 1.40; --t-footnote: 13px; --w-footnote: 400; --lh-footnote: 1.38; --t-caption1: 12px; --w-caption1: 400; --lh-caption1: 1.30; --t-caption2: 11px; --w-caption2: 400; --lh-caption2: 1.28; } /* -------- Semantic typography ------------------------------------------- */ body, .p, .body { font-family: var(--font-text); font-size: var(--t-body); font-weight: var(--w-body); line-height: var(--lh-body); color: var(--label); background: var(--bg); } .h0, .display { font-family: var(--font-display); font-weight: 900; font-size: 56px; line-height: 1.04; letter-spacing: -0.02em; color: var(--label); } .h1, .largeTitle { font-family: var(--font-display); font-size: var(--t-largeTitle); font-weight: var(--w-largeTitle); line-height: var(--lh-largeTitle); letter-spacing: -0.015em; } .h2, .title1 { font-family: var(--font-display); font-size: var(--t-title1); font-weight: var(--w-title1); line-height: var(--lh-title1); letter-spacing: -0.012em; } .h3, .title2 { font-family: var(--font-display); font-size: var(--t-title2); font-weight: var(--w-title2); line-height: var(--lh-title2); letter-spacing: -0.008em; } .h4, .title3 { font-family: var(--font-display); font-size: var(--t-title3); font-weight: var(--w-title3); line-height: var(--lh-title3); } .headline { font-size: var(--t-headline); font-weight: var(--w-headline); line-height: var(--lh-headline); } .callout { font-size: var(--t-callout); font-weight: var(--w-callout); line-height: var(--lh-callout); } .subhead { font-size: var(--t-subhead); font-weight: var(--w-subhead); line-height: var(--lh-subhead); } .footnote { font-size: var(--t-footnote); font-weight: var(--w-footnote); line-height: var(--lh-footnote); color: var(--label-secondary); } .caption { font-size: var(--t-caption1); font-weight: var(--w-caption1); line-height: var(--lh-caption1); color: var(--label-secondary); } .mono { font-family: var(--font-mono); } /* The Sipfolio wordmark — heavy, all caps, very tight tracking. */ .wordmark { font-family: var(--font-display); font-weight: 900; letter-spacing: -0.01em; text-transform: uppercase; color: var(--label); } /* -------- Components: section header (the "GENERAL PROFILE" label) ----- */ .section-header { font-size: var(--t-footnote); font-weight: 400; text-transform: uppercase; letter-spacing: 0.04em; color: var(--label-secondary); }