/* ───────────────────────────────────────────────────────────────── J.Hilburn iPhone Prototype · Design tokens CSS variables mapping the Stylist app palette, fonts, spacing, and radii for use inside the device frame. Imported first by all other prototype stylesheets. Source of truth: CoreUI/Sources/CoreUI/Colors/ColorPalette.swift, Fonts/FontPalette.swift, Extensions/CGFloat+Extensions.swift. ───────────────────────────────────────────────────────────────── */ .device-screen { /* ─── Color ─── */ --app-bg: #EFEDE9; /* Color.biege */ --app-card-bg: #FFFFFF; /* Color.primaryWhite */ --app-main-gray: #F5F5F5; /* Color.mainGray — CoreUI/ColorPalette.swift:17-19 */ --app-app-gray: #EFEFEF; /* Color.appGray — CoreUI/ColorPalette.swift:21-23 */ --app-text-primary: #111111; /* Color.lightTextPrimary */ --app-text-secondary: #4C4D53; /* Color.lightTextSecondary */ --app-text-tertiary: #898989; /* Color.lightTextTertiary */ --app-divider: #E1E1E1; /* Color.dividerBackground */ --app-stroke-gray: #4E545B; /* Color.secondaryDark */ --app-button-black: #111111; /* Color.primaryBlack */ --app-gold: #917957; /* Color.primaryGold */ --app-shadow: #354150; /* Color.shadow */ /* Status colors: ClientStatusChip.swift + spec section 1. lightStatusSuccess (#00B478) is the chip text, not lightSuccessText (#009060) which is for body-copy success messaging. */ /* Per Rebekah (2026-06-07): the app uses 3 tokens per state by design — a darker text/outline color, a tinted background color, and a brighter mid-range icon/element color that would read too light at text size. All three are pulled verbatim from CoreUI/ColorPalette.swift. */ /* Success — completed pills, success states */ --app-success-text: #009060; /* Color.lightSuccessText (text + outlines) */ --app-success-bg: #D3F0E0; /* Color.lightSuccessBackground (pill fills) */ --app-success-icon: #00B478; /* Color.lightStatusSuccess (icons / dots / mid-range elements) */ /* Warning — remake / alteration pills */ --app-warning-text: #C88500; /* Color.lightWarningText (text + outlines) */ --app-warning-bg: #F9F0CF; /* Color.lightWarningBackground (pill fills) */ --app-warning-icon: #FFAA00; /* Color.lightStatusWarning (icons / dots / mid-range elements) */ /* Error — canceled pills, Feed badge, inactive client status */ --app-error-text: #C21E2A; /* Color.lightErrorText (text + outlines) */ --app-error-bg: #FAD6D8; /* Color.lightErrorBackground (pill fills) */ --app-error-icon: #E8303D; /* Color.lightStatusError (icons / dots, e.g. Feed notification badge) */ --app-search-fill: rgba(120, 120, 128, 0.16); /* ─── Font (system stack renders SF Pro / New York on Apple devices) ─── */ --app-font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', sans-serif; /* ui-serif first — modern CSS Fonts L4 keyword that maps to the macOS system serif (New York) more reliably than the family name in non-Safari browsers. 'New York' kept as explicit fallback. */ --app-font-serif: ui-serif, 'New York', Georgia, 'Times New Roman', serif; /* ─── Type tokens ─── */ --app-h1: normal 400 32px/1.1 var(--app-font-serif); --app-h6: normal 400 28px/1.15 var(--app-font-serif); --app-h2: normal 600 24px/1.2 var(--app-font-sans); --app-h3: normal 600 20px/1.2 var(--app-font-sans); --app-h4: normal 600 16px/1.2 var(--app-font-sans); --app-h5: normal 600 14px/1.2 var(--app-font-sans); --app-body-lg: normal 400 16px/1.4 var(--app-font-sans); --app-body: normal 400 14px/1.4 var(--app-font-sans); --app-body-sm: normal 400 12px/1.4 var(--app-font-sans); --app-body-xs: normal 400 10px/1.3 var(--app-font-sans); --app-button: normal 500 14px/1.2 var(--app-font-sans); --app-button-sm: normal 500 12px/1.2 var(--app-font-sans); --app-nav-title: normal 600 17px/1.2 var(--app-font-sans); /* ─── Spacing (mirrors CGFloat+Extensions.swift gutter helpers) ─── */ --gutter-half: 4px; --gutter: 8px; --gutter-double: 16px; --gutter-3: 24px; --gutter-4: 32px; --gutter-10: 80px; /* FloatingTabBar bottom inset */ /* ─── Corner radii ─── */ --radius-card: 8px; --radius-button: 8px; --radius-search: 10px; --radius-chip: 999px; --radius-sheet: 20px; /* ─── Shadows ─── */ --card-shadow: 0 0 1px rgba(53, 65, 80, 0.07), 0 2px 2px rgba(53, 65, 80, 0.06), 0 4px 4px rgba(53, 65, 80, 0.05); --glass-shadow: 0 0 1px rgba(17, 17, 17, 0.08), 0 2px 2px rgba(17, 17, 17, 0.06), 0 4px 4px rgba(17, 17, 17, 0.05), 0 8px 8px rgba(17, 17, 17, 0.04); /* Base typography for everything inside the device screen, so the prototype is isolated from the portfolio body's Outfit/Cormorant inheritance. SF Pro sans + 14px body is the shipped app's default. */ background: var(--app-bg); font-family: var(--app-font-sans); font-size: 14px; line-height: 1.4; color: var(--app-text-primary); }