/* ========================================================================== HUMID — theme.css The ONLY file that holds colors, fonts, sizes, spacing, radius and motion. Every other stylesheet must use these variables (var(--name)) and never hardcode a color, font or size. To restyle the app, edit this file. Source: the HUMID design in Claude Design (Direction B). Differences from the design, on purpose: - --ink-faint is lighter so small labels reach 4.5:1 contrast. - Added --ok-text / --warn-text / --urgent-text so status text stays readable in the light theme (the design's amber was only ~2:1 there). - Tap targets are 44px (--tap); small chips get a bigger hit area in the component CSS, not a bigger look. Theme switching: follows the phone's Light/Dark setting automatically. To force a theme later, set data-theme="dark" or data-theme="light" on the element. ========================================================================== */ /* ---------- 1. Things that do not change between themes ---------- */ :root { /* Status fills (rails, toggles, bars). Text uses the -text versions below. */ --ok: #6F9F79; --warn: #E2A03F; --urgent: #D4533E; /* Fonts. Archivo = names and body. IBM Plex Mono = every number and label. The font files get self-hosted in a later step; until then the system fallbacks apply. */ --font: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Type scale (size / weight / line-height / tracking). Use these as: font-size: var(--fs-title); and so on. */ --fs-wordmark: 62px; --fs-display: 34px; /* screen titles, uppercase, weight 700 */ --fs-number-xl: 40px; /* big cost-per-wear number, mono 600 */ --fs-title: 22px; /* piece name on detail, weight 600 */ --fs-heading: 17px; --fs-body: 15px; --fs-body-sm: 14px; --fs-caption: 12.5px; --fs-meta: 13px; /* mono */ --fs-label: 10px; /* mono, uppercase, wide tracking */ --fs-tag: 10.5px; /* status tags, mono */ --fs-tab: 9.5px; /* tab bar labels, mono */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --lh-tight: 1.05; --lh-title: 1.2; --lh-body: 1.5; --track-display: -0.03em; --track-title: -0.02em; --track-wordmark: -0.05em; --track-label: 0.14em; --track-tag: 0.12em; /* Spacing (4pt base) */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --gutter: 20px; /* left/right page padding */ --grid-gap: 12px; --row-pad: 16px; /* Sizes */ --tap: 44px; /* minimum tap target */ --field-h: 48px; --button-h: 48px; --button-h-primary: 50px; --chip-h: 34px; /* looks 34px; hit area is padded to --tap in CSS */ --tag-h: 26px; --tab-bar-h: 56px; --tab-h: calc(var(--tab-bar-h) + env(safe-area-inset-bottom)); --safe-top: env(safe-area-inset-top); --safe-bottom: env(safe-area-inset-bottom); --tile-ratio: 4 / 5; /* closet tiles */ --outfit-thumb-ratio: 3 / 4; --stroke-icon: 1.75px; /* Lucide icon stroke */ --hairline: 1px; /* borders and dividers */ --fs-input: 16px; /* text fields: 16px+ stops iPhone Safari zooming in on tap */ --fs-tile-meta: 11.5px; /* mono: price under a tile */ --fs-mark: 42px; /* brand-initials monogram on a tile */ --fs-mark-hero: 56px; /* same, on the piece detail header */ --lh-mark: 0.8; --icon-size: 18px; /* tab bar icons */ --icon-size-build: 26px; --hero-h: 200px; /* piece detail header tile */ --toggle-w: 50px; --toggle-h: 30px; --toggle-knob: 24px; --textarea-h: 96px; --content-max: 420px; /* widest a screen's content gets (phone-shaped) */ /* Radius */ --r-chip: 6px; --r-field: 10px; --r-card: 14px; --r-sheet: 22px; /* top corners only */ --r-pill: 999px; /* Motion. No bounce, no parallax, no spinners (use skeleton tiles). */ --t-tap: 90ms ease-out; --t-state: 160ms cubic-bezier(.2, 0, 0, 1); --t-sheet: 260ms cubic-bezier(.2, 0, 0, 1); --tap-scale: 0.97; /* No-photo placeholder tile: the diagonal weave. Angle and strength vary by category using these three pairs (light stripe, dark stripe). */ --weave-size: 7px; --weave-angle: 135deg; } /* ---------- 2. DARK (the default) ---------- */ :root { color-scheme: dark; --bg: #0C0B0A; --surface: #141311; --surface-2: #1C1A17; --surface-bar: #111010; /* tab bar and pinned bottom bars */ --line: #262320; --line-strong: #37332E; --ink: #F4F0E9; --ink-muted: #9C958B; --ink-faint: #8A8378; /* was #6A645C in the design; lightened for contrast */ --ink-disabled: #4A453E; /* only for disabled or decorative items, not for reading */ --btn-bg: #F4F0E9; --btn-ink: #0C0B0A; /* Status: background, border, and readable text color for each state */ --ok-bg: #16201A; --ok-line: #2C4433; --ok-text: #8FBE96; --warn-bg: #221B14; --warn-line: #4A3A24; --warn-text: #E2A03F; --urgent-bg: #241612; --urgent-line: #57291F; --urgent-text: #E9765E; /* Placeholder tile weave pairs */ --weave-a1: #191714; --weave-a2: #131210; --weave-b1: #1C1A17; --weave-b2: #151310; --weave-c1: #171512; --weave-c2: #121110; --weave-d1: #1A1815; --weave-d2: #141210; --weave-mark: #413C34; /* the big brand-initials monogram */ --shadow-card: none; /* dark theme: elevation = a lighter surface, no shadow */ --shadow-sheet: 0 -8px 40px rgba(0, 0, 0, .6); --scrim: rgba(0, 0, 0, .6); --fade-to-bg: linear-gradient(180deg, rgba(12, 11, 10, 0) 0%, #0C0B0A 26%); } /* ---------- 3. LIGHT (follows the phone setting) ---------- */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { color-scheme: light; --bg: #F2EFE8; --surface: #FBFAF6; --surface-2: #E7E2D8; --surface-bar: #FBFAF6; --line: #DCD6CA; --line-strong: #C4BCAC; --ink: #15130F; --ink-muted: #655F55; --ink-faint: #67615A; /* was #8B8478 in the design; darkened for contrast */ --ink-disabled: #A39B8D; --btn-bg: #15130F; --btn-ink: #FBFAF6; --ok-bg: #E4EDE3; --ok-line: #BBD0BC; --ok-text: #2A6236; --warn-bg: #F6ECD8; --warn-line: #E0C68E; --warn-text: #7F5300; --urgent-bg: #F8E3DD; --urgent-line: #E3B0A2; --urgent-text: #A83421; --weave-a1: #E9E4DA; --weave-a2: #E1DBCF; --weave-b1: #E5DFD4; --weave-b2: #DDD6C9; --weave-c1: #EBE6DC; --weave-c2: #E3DDD1; --weave-d1: #E7E2D7; --weave-d2: #DFD8CC; --weave-mark: #C4BCAC; --shadow-card: 0 1px 2px rgba(21, 19, 15, .06); --shadow-sheet: 0 -8px 40px rgba(21, 19, 15, .18); --scrim: rgba(21, 19, 15, .4); --fade-to-bg: linear-gradient(180deg, rgba(242, 239, 232, 0) 0%, #F2EFE8 26%); } } /* Manual override, for a future theme toggle: */ :root[data-theme="light"] { color-scheme: light; --bg: #F2EFE8; --surface: #FBFAF6; --surface-2: #E7E2D8; --surface-bar: #FBFAF6; --line: #DCD6CA; --line-strong: #C4BCAC; --ink: #15130F; --ink-muted: #655F55; --ink-faint: #67615A; --ink-disabled: #A39B8D; --btn-bg: #15130F; --btn-ink: #FBFAF6; --ok-bg: #E4EDE3; --ok-line: #BBD0BC; --ok-text: #2A6236; --warn-bg: #F6ECD8; --warn-line: #E0C68E; --warn-text: #7F5300; --urgent-bg: #F8E3DD; --urgent-line: #E3B0A2; --urgent-text: #A83421; --weave-a1: #E9E4DA; --weave-a2: #E1DBCF; --weave-b1: #E5DFD4; --weave-b2: #DDD6C9; --weave-c1: #EBE6DC; --weave-c2: #E3DDD1; --weave-d1: #E7E2D7; --weave-d2: #DFD8CC; --weave-mark: #C4BCAC; --shadow-card: 0 1px 2px rgba(21, 19, 15, .06); --shadow-sheet: 0 -8px 40px rgba(21, 19, 15, .18); --scrim: rgba(21, 19, 15, .4); --fade-to-bg: linear-gradient(180deg, rgba(242, 239, 232, 0) 0%, #F2EFE8 26%); } /* ---------- 4. Reduced motion (respect the phone's setting) ---------- */ @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition-duration: 1ms !important; } }