/* ---------------------------------------- Theme - Utility classes ---------------------------------------- */ /* Fonts */ @import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap"); :root { /* Fonts */ --font-body: "Inter", system-ui, sans-serif; --font-heading: "Inter", system-ui, sans-serif; --font-normal: 400; --font-semibold: 600; --font-bold: 700; --font-heavy: 800; /* Brand Colors */ --brand-1: #f0b100; /* Yellow */ --brand-1-pressed: #d69e00; --brand-1-content: #1a1a1a; --brand-1-light: color-mix(in oklch, var(--brand-1) 15%, var(--white)); /* Gold tint. Non-text fills only */ --brand-2: oklch(39.1% 0.09 240.876); /* Sky 900 */ --brand-2-light: oklch(90.1% 0.058 230.902); /* Sky 200 */ --brand-3: oklch(51.1% 0.096 186.391); /* Teal 700 */ --brand-3-light: oklch(91% 0.096 180.426); /* Teal 200 */ --brand-4: oklch(51.8% 0.253 323.949); /* Fuschia 700 */ --brand-4-light: oklch(90.3% 0.076 319.62); /* Fuschia 200 */ /* Neutral Colors */ --black: oklch(14.1% 0.005 285.823); /* Zinc 950 */ --darkest: #18181b; /* Zinc 900 */ --darker: oklch(27.4% 0.006 286.033); /* Zinc 800 */ --dark: oklch(37% 0.013 285.805); /* Zinc 700 */ --midtone: #52525c; /* Zinc 600 */ --muted: #71717b; /* Zinc 500, 4.8:1 on white */ --faint: #a1a1aa; /* Zinc 400, disabled label text only */ --light: oklch(87.1% 0.006 286.286); /* Zinc 300 */ --hairline: #e4e4e7; /* Zinc 200 */ --lighter: oklch(96.7% 0.001 286.375); /* Zinc 100 */ --white: white; /* Focus */ --ui-focus-ring: 2px solid var(--darker); --ui-focus-ring-on-dark: 2px solid var(--white); --ui-focus-offset: 2px; /* Motion */ --ui-duration-fast: 150ms; --ui-duration-move: 250ms; --ui-duration-reduced: 0ms; /* Looping loading spinners keep their existing 800ms linear rotation; this cadence is separate from the transition duration scale. */ --ui-duration-spin: 800ms; --ui-ease: ease-in-out; --ui-ease-move: cubic-bezier(0.22, 1, 0.36, 1); /* Stacking. Local offsets build on --z-raised; deliberate base 0 / -10 stay literal. */ --z-raised: 1; --z-sticky: 20; --z-bar: 40; --z-bar-raised: 50; --z-popover: 60; --z-fab: 80; --z-scrim: 89; --z-drawer: 90; --z-menu: 100; --z-toast: 1000; /* Semantic Colors */ --success: #1b7a43; --success-light: #10b981; /* Green 100 */ --success-lighter: #eaf4ee; --info: oklch(54.6% 0.245 262.881); /* Blue 600 */ --info-light: oklch(93.2% 0.032 255.585); /* Blue 100 */ --warning: #c57e22; /* Orange 600 */ --warning-light: oklch(95.4% 0.038 75.164); /* Orange 100 */ --error: oklch(50.5% 0.213 27.518); /* Red 700 */ --error-light: oklch(93.6% 0.032 17.717); /* Red 100 */ --ai-transcription: oklch(58.5% 0.233 277.117); /* Indigo 600 */ --link: oklch(54.6% 0.245 262.881); /* Blue 600 */ --highlight: oklch(94.5% 0.129 101.54); /* Yellow 200 */ /* Border & Outline Widths */ --border: 1px; --border-sm: 0.5px; --border-lg: 2px; /* Border Radius */ --rounded: 0.4rem; --rounded-sm: 0.2rem; --rounded-lg: 1rem; --rounded-full: 9999px; /* Shadow */ --shadow: 0 4px 4px 1px rgb(0 0 0 / 0.15), 0 2px 4px -2px rgb(0 0 0 / 0.25); --shadow-sm: 0 2px 3px -0.5px rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); /* Heights */ --height-md: 4rem; --ui-pwa-bottom-bar-height: 4.5rem; --ui-journal-action-bar-height: 6.25rem; /* Tap Targets */ --ui-tap-gap: 0.5rem; --ui-tap-min: 3rem; --ui-tap-write: 3.5rem; /* Sheets */ --ui-sheet-grip: var(--muted); --ui-sheet-gap: 0.75rem; --ui-sheet-shadow: 0 -6px 20px rgb(0 0 0 / 0.14); /* Toggles */ --ui-toggle-off: var(--muted); /* Journal raised capture offset. Shared by captures; footer scroll math depends on it. */ --ui-journal-action-raised-offset: 1.375rem; /* Split Note/Photo capture control: one 60 track, 4px white ring, 1.5px ink divider, the demos' 76px side columns and the responsive 186px maximum for the middle track (demos: 76px 1fr 76px; width:100%, max-width:186px). Both values keep the existing rem convention. */ --ui-journal-action-split-height: 3.75rem; --ui-journal-action-split-max-width: 11.625rem; --ui-journal-action-side-width: 4.75rem; --ui-journal-action-ring: 0.25rem; --ui-journal-action-divider-width: 1.5px; /* Map Markers. The lift value preserves the existing selected-marker shadow. */ --ui-marker-shadow: 0 2px 4px #0006; --ui-marker-shadow-lift: 0 6px 8px #0006; /* Photo Viewer. The field reuse its own Prewind black; chrome replaces the ad hoc #393941 third gray with the specified solid ground and hairline. */ --ui-photo-viewer-chrome: var(--darkest); --ui-photo-viewer-hairline: var(--dark); /* Zinc 700 */ --ui-photo-viewer-field: #09090b; /* Zinc 950 */ /* Field Cards */ --ui-field-card-bg: var(--white); --ui-field-card-border-width: var(--border); --ui-field-card-border-color: var(--light); --ui-field-card-divider-width: var(--border); --ui-field-card-radius: var(--rounded-sm); --ui-field-card-padding: var(--space-xs); --ui-field-card-padding-wide: var(--space-sm); --ui-field-card-gap: var(--space-xs); --ui-field-card-text-size: var(--text-base); /* Width Constraints */ --max-w-text: 80ch; --max-w-form: 40rem; /* Container */ --container-max: 1400px; --container-padding: 0 var(--space-md); /* Form Fields */ --ui-field-padding: 0.8rem; --ui-field-height: var(--ui-tap-min); /* for desktop: */ --ui-field-font-size: 1.1rem; --ui-field-border: var(--border) solid var(--muted); --ui-field-border-radius: var(--rounded); --ui-field-focus-outline: 2px solid; --ui-field-focus-color: var(--darker); --ui-field-bg: var(--white); --ui-field-bg-disabled: var(--lighter); --ui-field-bg-readonly: var(--lighter); /* Guide 5.2 read-only ground */ --ui-field-placeholder-color: var(--midtone); --ui-field-value-color: var(--darker); /* Guide 5.2 filled value is ink */ --ui-field-label-color: var(--midtone); --ui-field-value-color-disabled: var(--midtone); --ui-field-icon-width: 1.3rem; /* Fluid Text Scale – Generated with: `npx prewindcss text` Min viewport: 320px Max viewport: 1600px Min base size: 16px Max base size: 20px Min ratio: 1.2 - Minor Third Max ratio: 1.25 - Major Third */ --text-xs: clamp(0.6944rem, 0.6597rem + 0.1736vw, 0.8333rem); --text-sm: clamp(0.8333rem, 0.7917rem + 0.2083vw, 1rem); --text-base: clamp(1rem, 0.9375rem + 0.3125vw, 1.25rem); --text-lg: clamp(1.2rem, 1.109rem + 0.4531vw, 1.563rem); --text-xl: clamp(1.44rem, 1.312rem + 0.6414vw, 1.953rem); --text-2xl: clamp(1.728rem, 1.55rem + 0.8918vw, 2.441rem); --text-3xl: clamp(2.074rem, 1.829rem + 1.223vw, 3.052rem); --text-4xl: clamp(2.488rem, 2.157rem + 1.658vw, 3.815rem); --space-3xs: clamp(0.2222rem, 0.2171rem + 0.02579vw, 0.2429rem); --space-2xs: clamp(0.3333rem, 0.3155rem + 0.08938vw, 0.4048rem); --space-xs: clamp(0.5rem, 0.4563rem + 0.2186vw, 0.6749rem); --space-sm: clamp(0.75rem, 0.6562rem + 0.4688vw, 1.125rem); --space-md: clamp(1.125rem, 0.9374rem + 0.938vw, 1.875rem); --space-lg: clamp(1.688rem, 1.328rem + 1.798vw, 3.126rem); --space-xl: clamp(2.531rem, 1.861rem + 3.35vw, 5.211rem); --space-2xl: clamp(3.797rem, 2.574rem + 6.113vw, 8.688rem); --space-3xl: clamp(5.695rem, 3.499rem + 10.98vw, 14.48rem); --space-4xl: clamp(8.543rem, 4.643rem + 19.5vw, 24.14rem); }