/* ============================================================================ Liquid Glass — Design Tokens ---------------------------------------------------------------------------- Color, type, spacing, radius, shadow primitives. Semantic vars (h1, body, fg1, glass-tint, etc.) reference base scales. ============================================================================ */ /* Fonts — Inter substitutes SF Pro Display/Text; JetBrains Mono substitutes SF Mono. Flagged substitutions — provide real SF font files in fonts/ to upgrade. */ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"); :root { /* ── COLOR: Apple system palette (light) ─────────────────────────── */ --sys-blue: #007AFF; --sys-red: #FF3B30; --sys-orange: #FF9500; --sys-yellow: #FFCC00; --sys-green: #34C759; --sys-mint: #00C7BE; --sys-teal: #30B0C7; --sys-cyan: #32ADE6; --sys-indigo: #5856D6; --sys-purple: #AF52DE; --sys-pink: #FF2D55; --sys-brown: #A2845E; /* ── COLOR: Adaptive grays (light mode) ──────────────────────────── */ --gray-1: #8E8E93; --gray-2: #AEAEB2; --gray-3: #C7C7CC; --gray-4: #D1D1D6; --gray-5: #E5E5EA; --gray-6: #F2F2F7; /* ── COLOR: Semantic foreground / background ─────────────────────── */ --fg-1: rgba(0, 0, 0, 1.00); /* primary text */ --fg-2: rgba(60, 60, 67, 0.85); /* secondary text */ --fg-3: rgba(60, 60, 67, 0.60); /* tertiary text */ --fg-4: rgba(60, 60, 67, 0.30); /* quaternary (placeholders) */ --fg-on-glass: #000000; /* black text reads better on light glass */ --fg-on-dark-glass: #FFFFFF; --bg-1: #FFFFFF; --bg-2: #F2F2F7; /* grouped background */ --bg-3: #FFFFFF; /* grouped cell */ --bg-elevated: #FFFFFF; /* ── GLASS MATERIAL TOKENS ───────────────────────────────────────── */ --glass-tint-default: rgba(255, 255, 255, 0.18); --glass-tint-over-light: rgba(255, 255, 255, 0.10); --glass-tint-over-dark: rgba(255, 255, 255, 0.30); --glass-tint-dark: rgba(20, 20, 22, 0.40); --glass-blur-light: 3px; --glass-blur-medium: 12px; --glass-blur-heavy: 24px; --glass-saturation: 140%; --glass-contrast: 1.15; --glass-brightness: 1.05; /* Shine: top-left highlight + bottom-right reflection */ --glass-shine: inset 2px 2px 1px 0 rgba(255, 255, 255, 0.5), inset -1px -1px 1px 1px rgba(255, 255, 255, 0.5); /* Lift shadow */ --glass-lift: 0 6px 6px rgba(0, 0, 0, 0.20), 0 0 20px rgba(0, 0, 0, 0.10); /* Press inset */ --glass-press: inset -2px -2px 2px rgba(0, 0, 0, 0.10); /* ── TYPE: family stacks ─────────────────────────────────────────── */ --font-display: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif; --font-text: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; --font-serif: "New York", ui-serif, Georgia, serif; /* ── TYPE: weights ───────────────────────────────────────────────── */ --w-regular: 400; --w-medium: 500; /* SF "Medium" ~510 */ --w-semibold: 600; /* SF "Semibold" ~590 */ --w-bold: 700; /* ── TYPE: Apple HIG-aligned scale ───────────────────────────────── */ /* size / line-height / tracking */ --t-large-title: 34px; --lh-large-title: 41px; --tr-large-title: 0.37px; --t-title-1: 28px; --lh-title-1: 34px; --tr-title-1: 0.36px; --t-title-2: 22px; --lh-title-2: 28px; --tr-title-2: 0.35px; --t-title-3: 20px; --lh-title-3: 25px; --tr-title-3: 0.38px; --t-headline: 17px; --lh-headline: 22px; --tr-headline: -0.43px; --t-body: 17px; --lh-body: 22px; --tr-body: -0.43px; --t-callout: 16px; --lh-callout: 21px; --tr-callout: -0.31px; --t-subheadline: 15px; --lh-subheadline: 20px; --tr-subheadline:-0.24px; --t-footnote: 13px; --lh-footnote: 18px; --tr-footnote: -0.08px; --t-caption-1: 12px; --lh-caption-1: 16px; --tr-caption-1: 0px; --t-caption-2: 11px; --lh-caption-2: 13px; --tr-caption-2: 0.06px; /* ── SPACING ─────────────────────────────────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* Edge inset for fixed glass capsules from screen edges */ --safe-inset: 16px; /* ── RADIUS ──────────────────────────────────────────────────────── */ --r-xs: 6px; /* tiny inputs */ --r-sm: 8px; /* small inputs */ --r-md: 12px; /* chips, badges */ --r-lg: 18px; /* cards */ --r-xl: 22px; /* app icons (% squircle approximated) */ --r-2xl: 28px; /* sheets */ --r-3xl: 32px; /* large capsules */ --r-pill: 9999px; /* pills, dots */ /* ── EASING ──────────────────────────────────────────────────────── */ --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 2.2); --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 140ms; --dur-base: 240ms; --dur-slow: 400ms; --dur-spring: 600ms; /* spring needs longer to fully settle */ } /* ── Dark adaptive overrides ──────────────────────────────────────── */ @media (prefers-color-scheme: dark) { :root { --gray-1: #8E8E93; --gray-2: #636366; --gray-3: #48484A; --gray-4: #3A3A3C; --gray-5: #2C2C2E; --gray-6: #1C1C1E; --fg-1: rgba(255, 255, 255, 1.00); --fg-2: rgba(235, 235, 245, 0.85); --fg-3: rgba(235, 235, 245, 0.60); --fg-4: rgba(235, 235, 245, 0.30); --fg-on-glass: #FFFFFF; --bg-1: #000000; --bg-2: #1C1C1E; --bg-3: #2C2C2E; --bg-elevated: #1C1C1E; } } /* ============================================================================ Semantic type classes — use these directly in markup ============================================================================ */ .t-large-title { font-family: var(--font-display); font-size: var(--t-large-title); line-height: var(--lh-large-title); letter-spacing: var(--tr-large-title); font-weight: var(--w-bold); } .t-title-1 { font-family: var(--font-display); font-size: var(--t-title-1); line-height: var(--lh-title-1); letter-spacing: var(--tr-title-1); font-weight: var(--w-bold); } .t-title-2 { font-family: var(--font-display); font-size: var(--t-title-2); line-height: var(--lh-title-2); letter-spacing: var(--tr-title-2); font-weight: var(--w-bold); } .t-title-3 { font-family: var(--font-display); font-size: var(--t-title-3); line-height: var(--lh-title-3); letter-spacing: var(--tr-title-3); font-weight: var(--w-semibold); } .t-headline { font-family: var(--font-text); font-size: var(--t-headline); line-height: var(--lh-headline); letter-spacing: var(--tr-headline); font-weight: var(--w-semibold); } .t-body { font-family: var(--font-text); font-size: var(--t-body); line-height: var(--lh-body); letter-spacing: var(--tr-body); font-weight: var(--w-regular); } .t-callout { font-family: var(--font-text); font-size: var(--t-callout); line-height: var(--lh-callout); letter-spacing: var(--tr-callout); font-weight: var(--w-regular); } .t-subheadline { font-family: var(--font-text); font-size: var(--t-subheadline); line-height: var(--lh-subheadline); letter-spacing: var(--tr-subheadline); font-weight: var(--w-regular); } .t-footnote { font-family: var(--font-text); font-size: var(--t-footnote); line-height: var(--lh-footnote); letter-spacing: var(--tr-footnote); font-weight: var(--w-regular); } .t-caption-1 { font-family: var(--font-text); font-size: var(--t-caption-1); line-height: var(--lh-caption-1); letter-spacing: var(--tr-caption-1); font-weight: var(--w-regular); } .t-caption-2 { font-family: var(--font-text); font-size: var(--t-caption-2); line-height: var(--lh-caption-2); letter-spacing: var(--tr-caption-2); font-weight: var(--w-medium); } .t-mono { font-family: var(--font-mono); font-size: 14px; line-height: 20px; font-weight: var(--w-regular); }