/* * Toto Design System — Colors & Typography */ /* ── Soft (SOFT ~50) ── */ @font-face { font-family: 'Fraunces Soft'; src: url('fonts/Fraunces_72pt_Soft-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Fraunces Soft'; src: url('fonts/Fraunces_72pt_Soft-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Fraunces Soft'; src: url('fonts/Fraunces_72pt_Soft-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; } /* ── SuperSoft (SOFT ~100) — primary display/heading family ── */ @font-face { font-family: 'Fraunces SuperSoft'; src: url('fonts/Fraunces_72pt_SuperSoft-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Fraunces SuperSoft'; src: url('fonts/Fraunces_72pt_SuperSoft-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Fraunces SuperSoft'; src: url('fonts/Fraunces_72pt_SuperSoft-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; } /* ───────────────────────────────────────── PRIMITIVE COLOR TOKENS (HSL channel values — use inside hsl()) ───────────────────────────────────────── */ :root { /* Forest — primary trust anchor */ --forest: 155 18% 24%; --forest-2: 155 16% 36%; /* Sage — secondary calm green */ --sage: 150 18% 60%; --sage-light: 150 18% 75%; --sage-glow: 150 22% 65%; /* Terracotta — warm accent */ --terracotta: 20 50% 55%; --terracotta-light: 25 45% 70%; --terracotta-wash: 30 30% 92%; /* Ink — text scale */ --ink: 30 8% 17%; --ink-2: 30 6% 36%; --ink-3: 30 5% 50%; /* Surface scale */ --surface: 40 20% 98%; --surface-2: 40 15% 93%; --surface-bg: 40 25% 96%; /* Hairline */ --hairline: 35 8% 85%; /* Dusk/Lavender — evening purple */ --dusk: 265 18% 50%; --lavender: 265 18% 50%; --lavender-light: 265 18% 70%; } /* ───────────────────────────────────────── SEMANTIC TOKENS — Light theme (Day) ───────────────────────────────────────── */ :root { --background: hsl(40 25% 96%); --foreground: hsl(30 8% 17%); --card: hsl(40 20% 98%); --card-foreground: hsl(30 8% 17%); --primary: hsl(155 18% 24%); --primary-foreground: hsl(40 25% 96%); --secondary: hsl(20 50% 55%); --secondary-foreground: hsl(40 25% 96%); --muted: hsl(40 15% 93%); --muted-foreground: hsl(30 5% 50%); --accent: hsl(30 30% 92%); --accent-foreground: hsl(20 50% 55%); --destructive: hsl(0 65% 50%); --destructive-foreground: hsl(40 25% 96%); --border: hsl(35 8% 85%); --ring: hsl(155 18% 24%); --radius: 1rem; } /* ───────────────────────────────────────── SEMANTIC TOKENS — Dark theme (Wind Down / Dusk) ───────────────────────────────────────── */ .theme-dusk, .wind-down { --background: hsl(230 22% 14%); --foreground: hsl(40 12% 92%); --card: hsl(230 18% 18%); --card-foreground: hsl(40 12% 92%); --primary: hsl(155 18% 55%); --primary-foreground: hsl(230 22% 14%); --secondary: hsl(25 45% 65%); --secondary-foreground: hsl(230 22% 14%); --muted: hsl(230 16% 22%); --muted-foreground: hsl(40 8% 60%); --accent: hsl(25 30% 30%); --accent-foreground: hsl(25 45% 75%); --border: hsl(230 14% 28%); --ring: hsl(155 18% 55%); } /* ───────────────────────────────────────── ELEVATION / SHADOW SYSTEM ───────────────────────────────────────── */ :root { --elev-1: 0 1px 2px -1px hsl(30 8% 17% / 0.06), 0 12px 28px -18px hsl(30 8% 17% / 0.22); --elev-2: 0 2px 6px -2px hsl(30 8% 17% / 0.08), 0 24px 56px -28px hsl(30 8% 17% / 0.30); --shadow-glow: 0 0 60px 20px hsl(20 50% 70% / 0.15); --shadow-card: var(--elev-1); } /* ───────────────────────────────────────── ANIMATION TOKENS ───────────────────────────────────────── */ :root { --ease: cubic-bezier(0.32, 0.72, 0, 1); --dur-s: 240ms; --dur-m: 400ms; --dur-l: 640ms; } /* ───────────────────────────────────────── TYPOGRAPHY SYSTEM ───────────────────────────────────────── */ :root { --font-serif: 'Fraunces SuperSoft', 'Fraunces Soft', Georgia, serif; --font-heading: 'Fraunces SuperSoft', 'Fraunces Soft', Georgia, serif; --font-body: 'Fraunces Soft', Georgia, serif; --opt-soft: "SOFT" 100, "WONK" 0, "opsz" 32; --opt-book: "SOFT" 50, "WONK" 0, "opsz" 18; } /* ───────────────────────────────────────── BASE RESET ───────────────────────────────────────── */ body { font-family: var(--font-body); color: var(--foreground); background: var(--background); -webkit-font-smoothing: antialiased; } /* ───────────────────────────────────────── COMPONENT TOKENS — Radii ───────────────────────────────────────── */ :root { --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 8px); --radius-full: 9999px; } /* ───────────────────────────────────────── KEYFRAMES (shared across UI kit) ───────────────────────────────────────── */ @keyframes toto-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } } @keyframes toto-ripple { 0% { transform: scale(0.9); opacity: 0.55; } 80% { opacity: 0; } 100% { transform: scale(2.2); opacity: 0; } } @keyframes toto-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @keyframes toto-pulse-ring { 0% { transform: scale(1); opacity: 0.4; } 100% { transform: scale(1.8); opacity: 0; } } /* ───────────────────────────────────────── UTILITY CLASSES ───────────────────────────────────────── */ .tap { transition: transform var(--dur-s) var(--ease), opacity var(--dur-s) var(--ease); } .tap:active { transform: scale(0.98); opacity: 0.9; } .opt-soft { font-variation-settings: var(--opt-soft); } .opt-book { font-variation-settings: var(--opt-book); } .pb-safe { padding-bottom: env(safe-area-inset-bottom, 0px); }