/* ============================================================================= PRISM DESIGN SYSTEM — colors, type, radii, shadows, glass recipes ---------------------------------------------------------------------------- Tokens are namespaced: --fg-*, --bg-*, --accent-*, --glass-*, --radius-*, --shadow-*, --type-*, --space-*. Semantic shortcuts (h1, body, etc.) are defined as CSS classes at the bottom. ========================================================================== */ /* ---------- BRAND TYPE: Montserrat (self-hosted) ---------- */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 100; src: url('fonts/Montserrat-Thin.ttf') format('truetype'); font-display: swap; } @font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 100; src: url('fonts/Montserrat-ThinItalic.ttf') format('truetype'); font-display: swap; } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 200; src: url('fonts/Montserrat-ExtraLight.ttf') format('truetype'); font-display: swap; } @font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 200; src: url('fonts/Montserrat-ExtraLightItalic.ttf') format('truetype'); font-display: swap; } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 300; src: url('fonts/Montserrat-Light.ttf') format('truetype'); font-display: swap; } @font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 300; src: url('fonts/Montserrat-LightItalic.ttf') format('truetype'); font-display: swap; } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; src: url('fonts/Montserrat-Regular.ttf') format('truetype'); font-display: swap; } @font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 400; src: url('fonts/Montserrat-Italic.ttf') format('truetype'); font-display: swap; } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; src: url('fonts/Montserrat-Medium.ttf') format('truetype'); font-display: swap; } @font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 500; src: url('fonts/Montserrat-MediumItalic.ttf') format('truetype'); font-display: swap; } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; src: url('fonts/Montserrat-SemiBold.ttf') format('truetype'); font-display: swap; } @font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 600; src: url('fonts/Montserrat-SemiBoldItalic.ttf') format('truetype'); font-display: swap; } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; src: url('fonts/Montserrat-Bold.ttf') format('truetype'); font-display: swap; } @font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 700; src: url('fonts/Montserrat-BoldItalic.ttf') format('truetype'); font-display: swap; } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 800; src: url('fonts/Montserrat-ExtraBold.ttf') format('truetype'); font-display: swap; } @font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 800; src: url('fonts/Montserrat-ExtraBoldItalic.ttf') format('truetype'); font-display: swap; } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 900; src: url('fonts/Montserrat-Black.ttf') format('truetype'); font-display: swap; } @font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 900; src: url('fonts/Montserrat-BlackItalic.ttf') format('truetype'); font-display: swap; } /* JetBrains Mono is still loaded from Google Fonts for the code/mono ramp */ @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap'); :root { /* ---------- FOUNDATION COLORS ---------- */ /* Canvas — warm cream backgrounds the glass refracts against */ --canvas-cream: #F4ECE2; --canvas-cream-deep: #E8E0D6; --canvas-taupe: #D9CFC2; --canvas-night: #0B0B0E; --canvas-night-soft: #14141A; /* Foreground — text on light & dark canvases */ --fg-1: #1A1A1F; /* primary text */ --fg-2: #4A4A55; /* secondary text */ --fg-3: #8A8A95; /* tertiary / hints */ --fg-disabled: rgba(26,26,31,0.32); --fg-1-dark: rgba(255,255,255,0.96); --fg-2-dark: rgba(255,255,255,0.72); --fg-3-dark: rgba(255,255,255,0.48); /* ---------- ACCENT GELS ---------- */ /* Saturated translucent fills used inside pill buttons, focus rings, and the chromatic glass edge. */ --accent-violet: #7C5CFF; --accent-violet-soft: #A893FF; --accent-mint: #5DE3C5; --accent-mint-soft: #9BF0DC; --accent-peach: #FF9F7A; --accent-peach-soft: #FFC5AC; --accent-sky: #5AB8FF; --accent-sky-soft: #A2D8FF; --accent-sunset: #FF6A3D; /* primary CTA gradient seed */ --accent-sunset-deep: #E04A1E; --accent-royal: #3A6BFF; /* secondary CTA gradient seed */ --accent-royal-deep: #1F45D6; /* ---------- SEMANTIC ---------- */ --semantic-success: #2EBD7E; --semantic-warning: #F5B400; --semantic-danger: #E54B4B; --semantic-info: #5AB8FF; /* ---------- GLASS RECIPES ---------- */ /* Compose: background + backdrop-filter + border + shadow. Always use the `--glass-*` tokens, never hand-rolled rgba. */ --glass-fill-light: linear-gradient(135deg, rgba(255,255,255,0.55), rgba(255,255,255,0.18)); --glass-fill-light-strong: linear-gradient(135deg, rgba(255,255,255,0.78), rgba(255,255,255,0.42)); --glass-fill-light-thin: linear-gradient(135deg, rgba(255,255,255,0.35), rgba(255,255,255,0.10)); --glass-fill-dark: linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02)); --glass-blur-sm: blur(12px) saturate(1.3); --glass-blur-md: blur(24px) saturate(1.4); --glass-blur-lg: blur(40px) saturate(1.5); --glass-border-light: 1px solid rgba(255,255,255,0.70); --glass-border-dark: 1px solid rgba(255,255,255,0.18); /* Inset highlight + outer drop — the 3D bevel signature */ --glass-shadow-light: inset 0 1px 0 rgba(255,255,255,0.95), inset 0 -1px 0 rgba(255,255,255,0.40), inset 1px 0 0 rgba(255,255,255,0.30), inset -1px 0 0 rgba(255,255,255,0.30), 0 12px 32px rgba(60,40,30,0.10), 0 2px 6px rgba(60,40,30,0.06); --glass-shadow-light-lifted: inset 0 1px 0 rgba(255,255,255,1), inset 0 -1px 0 rgba(255,255,255,0.45), 0 20px 48px rgba(60,40,30,0.16), 0 4px 10px rgba(60,40,30,0.08); --glass-shadow-light-press: inset 0 1px 0 rgba(255,255,255,0.60), inset 0 -1px 0 rgba(255,255,255,0.20), 0 4px 12px rgba(60,40,30,0.10); --glass-shadow-dark: inset 0 1px 0 rgba(255,255,255,0.20), inset 0 -1px 0 rgba(255,255,255,0.06), 0 14px 34px rgba(0,0,0,0.45), 0 2px 6px rgba(0,0,0,0.30); /* Iridescent edge — 1-2px chromatic-aberration ring */ --glass-edge-iris: conic-gradient(from 220deg, #FF9F7A 0deg, #FFE7A0 60deg, #5DE3C5 120deg, #5AB8FF 180deg, #A893FF 240deg, #FF9F7A 320deg); /* ---------- RADII ---------- */ --radius-xs: 8px; --radius-sm: 12px; --radius-md: 16px; --radius-lg: 22px; /* iOS-icon squircle */ --radius-xl: 28px; /* card default */ --radius-2xl: 36px; /* hero card */ --radius-pill: 9999px; /* ---------- ELEVATION (non-glass shadows for emergencies) ---------- */ --shadow-1: 0 1px 2px rgba(60,40,30,0.06), 0 1px 1px rgba(60,40,30,0.04); --shadow-2: 0 4px 12px rgba(60,40,30,0.10); --shadow-3: 0 12px 32px rgba(60,40,30,0.14); --shadow-4: 0 24px 64px rgba(60,40,30,0.18); /* ---------- TYPE ---------- */ --font-display: 'Montserrat', -apple-system, system-ui, sans-serif; --font-body: 'Montserrat', -apple-system, system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace; --fs-display-1: 48px; --fs-display-2: 36px; --fs-h1: 28px; --fs-h2: 22px; --fs-h3: 18px; --fs-body: 16px; --fs-body-sm: 14px; --fs-micro: 12px; --lh-tight: 1.1; --lh-snug: 1.25; --lh-normal: 1.45; --ls-display: -0.02em; --ls-body: 0; --ls-caps: 0.04em; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800; /* ---------- SPACING (8pt grid) ---------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; /* ---------- MOTION ---------- */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 120ms; --dur-base: 220ms; --dur-medium: 380ms; --dur-slow: 600ms; } /* ---------- DARK MODE OVERRIDES ---------- */ [data-theme="dark"] { --fg-1: var(--fg-1-dark); --fg-2: var(--fg-2-dark); --fg-3: var(--fg-3-dark); --glass-shadow-light: var(--glass-shadow-dark); --glass-border-light: var(--glass-border-dark); --glass-fill-light: var(--glass-fill-dark); --glass-fill-light-strong: var(--glass-fill-dark); } /* ============================================================================= SEMANTIC TYPE CLASSES ========================================================================== */ .prism-display-1 { font: var(--fw-bold) var(--fs-display-1)/var(--lh-tight) var(--font-display); letter-spacing: var(--ls-display); color: var(--fg-1); } .prism-display-2 { font: var(--fw-bold) var(--fs-display-2)/var(--lh-tight) var(--font-display); letter-spacing: var(--ls-display); color: var(--fg-1); } .prism-h1 { font: var(--fw-bold) var(--fs-h1)/var(--lh-snug) var(--font-display); letter-spacing: var(--ls-display); color: var(--fg-1); } .prism-h2 { font: var(--fw-semibold) var(--fs-h2)/var(--lh-snug) var(--font-display); color: var(--fg-1); } .prism-h3 { font: var(--fw-semibold) var(--fs-h3)/var(--lh-snug) var(--font-display); color: var(--fg-1); } .prism-body { font: var(--fw-regular) var(--fs-body)/var(--lh-normal) var(--font-body); color: var(--fg-1); } .prism-body-sm { font: var(--fw-regular) var(--fs-body-sm)/var(--lh-normal) var(--font-body); color: var(--fg-2); } .prism-micro { font: var(--fw-medium) var(--fs-micro)/var(--lh-normal) var(--font-body); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--fg-3); } .prism-mono { font: var(--fw-medium) var(--fs-body-sm)/var(--lh-normal) var(--font-mono); color: var(--fg-2); } /* ============================================================================= GLASS PRIMITIVE CLASSES ---------------------------------------------------------------------------- Apply these as a base; layer your own background-tint / size via inline or extra classes. ========================================================================== */ .glass { position: relative; background: var(--glass-fill-light); backdrop-filter: var(--glass-blur-md); -webkit-backdrop-filter: var(--glass-blur-md); border: var(--glass-border-light); box-shadow: var(--glass-shadow-light); border-radius: var(--radius-xl); transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard); } .glass:hover { box-shadow: var(--glass-shadow-light-lifted); transform: translateY(-2px); } .glass:active { box-shadow: var(--glass-shadow-light-press); transform: scale(0.97); transition-duration: 80ms; } .glass-pill { border-radius: var(--radius-pill); } .glass-tile { border-radius: var(--radius-lg); } .glass-card { border-radius: var(--radius-xl); } .glass-hero { border-radius: var(--radius-2xl); } .glass-thin { background: var(--glass-fill-light-thin); } .glass-strong { background: var(--glass-fill-light-strong); } /* Iridescent focus ring */ .glass-focus:focus-visible { outline: none; position: relative; } .glass-focus:focus-visible::after { content: ""; position: absolute; inset: -3px; border-radius: inherit; padding: 2px; background: var(--glass-edge-iris); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } /* ============================================================================= ACCENT GEL PILL FILLS — for primary CTAs ========================================================================== */ .gel-sunset { background: linear-gradient(180deg, #FFB99A 0%, var(--accent-sunset) 50%, var(--accent-sunset-deep) 100%); color: white; text-shadow: 0 1px 1px rgba(0,0,0,0.18); } .gel-royal { background: linear-gradient(180deg, #7FA0FF 0%, var(--accent-royal) 50%, var(--accent-royal-deep) 100%); color: white; text-shadow: 0 1px 1px rgba(0,0,0,0.18); } .gel-violet { background: linear-gradient(180deg, #B3A0FF 0%, var(--accent-violet) 50%, #5B3FE0 100%); color: white; } .gel-mint { background: linear-gradient(180deg, #B0F2E2 0%, var(--accent-mint) 50%, #2BB89A 100%); color: #0B3D33; } /* ============================================================================= CANVAS HELPERS ========================================================================== */ .canvas-cream { background: radial-gradient(ellipse 60% 50% at 20% 20%, rgba(255,159,122,0.22), transparent 60%), radial-gradient(ellipse 50% 40% at 80% 30%, rgba(124,92,255,0.18), transparent 60%), radial-gradient(ellipse 70% 60% at 50% 90%, rgba(93,227,197,0.16), transparent 65%), linear-gradient(180deg, var(--canvas-cream) 0%, var(--canvas-cream-deep) 100%); } .canvas-night { background: radial-gradient(ellipse 60% 50% at 25% 30%, rgba(124,92,255,0.30), transparent 60%), radial-gradient(ellipse 50% 40% at 80% 70%, rgba(93,227,197,0.22), transparent 60%), radial-gradient(ellipse 70% 60% at 50% 100%, rgba(255,106,61,0.20), transparent 65%), linear-gradient(180deg, var(--canvas-night) 0%, var(--canvas-night-soft) 100%); }