/* ============================================================================ iOS 26 — colors & type Vendored from the Claude Design system "ios-26-design-system" (443b3832-431e-40a9-a7e4-8efe0665f3e4), file `colors_and_type.css`. Vendored, not authored: re-import the design system to update it, don't hand-edit. Page styles live in styles.css. One deliberate change from the source: the upstream file opens with an @import of Inter from Google Fonts, as a metric fallback for SF Pro on non-Apple platforms. It is dropped here. Body copy on this site is SB Aggro, which ships in assets/fonts/, so Inter would almost never render — and a site whose pitch is "your history stays on your Mac" should not open a connection to a font CDN to load a face it does not use. ============================================================================ */ :root { /* ── System font stacks ─────────────────────────────────────────────── */ --font-sf-pro: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "SF Pro", "Helvetica Neue", system-ui, sans-serif; --font-sf-compact: ui-rounded, "SF Compact Display", "SF Compact Text", "SF Pro Rounded", system-ui, sans-serif; --font-sf-mono: ui-monospace, "SF Mono", Menlo, Monaco, "Cascadia Mono", "Roboto Mono", monospace; /* ── System colors — light ──────────────────────────────────────────── */ --color-red: rgb(255, 59, 48); --color-orange: rgb(255, 149, 0); --color-yellow: rgb(255, 204, 0); --color-green: rgb(52, 199, 89); --color-mint: rgb(0, 199, 190); --color-teal: rgb(48, 176, 199); --color-cyan: rgb(50, 173, 230); --color-blue: rgb(0, 122, 255); --color-indigo: rgb(88, 86, 214); --color-purple: rgb(175, 82, 222); --color-pink: rgb(255, 45, 85); --color-brown: rgb(162, 132, 94); /* ── Grays (light) ──────────────────────────────────────────────────── */ --color-gray: rgb(142, 142, 147); --color-gray-2: rgb(174, 174, 178); --color-gray-3: rgb(199, 199, 204); --color-gray-4: rgb(209, 209, 214); --color-gray-5: rgb(229, 229, 234); --color-gray-6: rgb(242, 242, 247); /* ── Labels (light) — text on backgrounds ───────────────────────────── */ --label-primary: rgb(0, 0, 0); --label-secondary: rgba(60, 60, 67, 0.60); --label-tertiary: rgba(60, 60, 67, 0.30); --label-quaternary: rgba(60, 60, 67, 0.18); /* ── Fills (light) — translucent overlays for chips, controls ───────── */ --fill-primary: rgba(120, 120, 128, 0.20); --fill-secondary: rgba(120, 120, 128, 0.16); --fill-tertiary: rgba(118, 118, 128, 0.12); --fill-quaternary: rgba(116, 116, 128, 0.08); /* ── Backgrounds (light) ────────────────────────────────────────────── */ --bg-system: rgb(255, 255, 255); --bg-system-secondary: rgb(242, 242, 247); --bg-system-tertiary: rgb(255, 255, 255); --bg-grouped: rgb(242, 242, 247); --bg-grouped-secondary: rgb(255, 255, 255); --bg-grouped-tertiary: rgb(242, 242, 247); /* ── Separators ─────────────────────────────────────────────────────── */ --sep-opaque: rgb(198, 198, 200); --sep-non-opaque: rgba(60, 60, 67, 0.36); /* ── Tint / accent ──────────────────────────────────────────────────── */ --tint: var(--color-blue); /* ── Radii ──────────────────────────────────────────────────────────── */ --r-button: 1000px; --r-card-sm: 10px; --r-card: 14px; --r-card-lg: 22px; --r-card-xl: 36px; --r-icon-sm: 12px; --r-icon: 22.5%; --r-pill: 1000px; /* ── Shadows / elevation ────────────────────────────────────────────── */ --shadow-card: 0 1px 2px rgba(0,0,0,0.04), 0 6px 18px rgba(0,0,0,0.08); --shadow-sheet: 0 12px 40px rgba(0,0,0,0.22); --shadow-glass: 0 1px 0 rgba(255,255,255,0.45) inset, 0 0 0 0.5px rgba(255,255,255,0.35) inset, 0 8px 24px rgba(0,0,0,0.18); /* ── Spacing scale (Apple's 4-point grid) ───────────────────────────── */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 44px; --s-9: 56px; /* ── Type ramp (iOS 26 — points, pt ≈ px on web) ────────────────────── */ --t-large-title-size: 34px; --t-large-title-lh: 41px; --t-large-title-w: 700; --t-title-1-size: 28px; --t-title-1-lh: 34px; --t-title-1-w: 400; --t-title-2-size: 22px; --t-title-2-lh: 28px; --t-title-2-w: 400; --t-title-3-size: 20px; --t-title-3-lh: 25px; --t-title-3-w: 400; --t-headline-size: 17px; --t-headline-lh: 22px; --t-headline-w: 600; --t-body-size: 17px; --t-body-lh: 22px; --t-body-w: 400; --t-callout-size: 16px; --t-callout-lh: 21px; --t-callout-w: 400; --t-subhead-size: 15px; --t-subhead-lh: 20px; --t-subhead-w: 400; --t-footnote-size: 13px; --t-footnote-lh: 18px; --t-footnote-w: 400; --t-caption-1-size: 12px; --t-caption-1-lh: 16px; --t-caption-1-w: 400; --t-caption-2-size: 11px; --t-caption-2-lh: 13px; --t-caption-2-w: 400; } /* ── Semantic text styles ─────────────────────────────────────────────── */ .ios-large-title { font: var(--t-large-title-w) var(--t-large-title-size)/var(--t-large-title-lh) var(--font-sf-pro); letter-spacing: 0.37px; color: var(--label-primary); } .ios-title-1 { font: var(--t-title-1-w) var(--t-title-1-size)/var(--t-title-1-lh) var(--font-sf-pro); letter-spacing: 0.36px; color: var(--label-primary); } .ios-title-2 { font: var(--t-title-2-w) var(--t-title-2-size)/var(--t-title-2-lh) var(--font-sf-pro); letter-spacing: 0.35px; color: var(--label-primary); } .ios-title-3 { font: var(--t-title-3-w) var(--t-title-3-size)/var(--t-title-3-lh) var(--font-sf-pro); letter-spacing: 0.38px; color: var(--label-primary); } .ios-headline { font: var(--t-headline-w) var(--t-headline-size)/var(--t-headline-lh) var(--font-sf-pro); letter-spacing: -0.43px; color: var(--label-primary); } .ios-body { font: var(--t-body-w) var(--t-body-size)/var(--t-body-lh) var(--font-sf-pro); letter-spacing: -0.43px; color: var(--label-primary); } .ios-callout { font: var(--t-callout-w) var(--t-callout-size)/var(--t-callout-lh) var(--font-sf-pro); letter-spacing: -0.32px; color: var(--label-primary); } .ios-subhead { font: var(--t-subhead-w) var(--t-subhead-size)/var(--t-subhead-lh) var(--font-sf-pro); letter-spacing: -0.23px; color: var(--label-primary); } .ios-footnote { font: var(--t-footnote-w) var(--t-footnote-size)/var(--t-footnote-lh) var(--font-sf-pro); letter-spacing: -0.08px; color: var(--label-primary); } .ios-caption-1 { font: var(--t-caption-1-w) var(--t-caption-1-size)/var(--t-caption-1-lh) var(--font-sf-pro); letter-spacing: 0px; color: var(--label-primary); } .ios-caption-2 { font: var(--t-caption-2-w) var(--t-caption-2-size)/var(--t-caption-2-lh) var(--font-sf-pro); letter-spacing: 0.07px; color: var(--label-primary); } /* ── Liquid Glass material ────────────────────────────────────────────── */ .liquid-glass { background: rgba(255, 255, 255, 0.45); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); border: 0.5px solid rgba(255, 255, 255, 0.35); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 0 0 0.5px rgba(255, 255, 255, 0.25), 0 8px 24px rgba(0, 0, 0, 0.10); } .liquid-glass--thick { background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(40px) saturate(200%); -webkit-backdrop-filter: blur(40px) saturate(200%); } .liquid-glass--thin { background: rgba(255, 255, 255, 0.22); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); } .liquid-glass--dark { background: rgba(28, 28, 30, 0.55); backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%); border: 0.5px solid rgba(255, 255, 255, 0.10); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 8px 24px rgba(0, 0, 0, 0.40); color: white; } .liquid-glass--tint-blue { background: rgba(0, 122, 255, 0.85); color: white; border-color: rgba(255, 255, 255, 0.30); }