@import "tailwindcss"; @import "./accents.css"; @variant dark (&:where(.dark, .dark *)); /* * Semantic Color Theme * Mirrors the mobile app's warm-neutral palette (mobile/src/theme/tokens.ts). * Light + dark are defined here; the .dark class is toggled on by the * pre-paint boot script in layouts/shared/_head.html.erb. */ :root { /* Backgrounds */ --bg-canvas: #F5F5F5; --bg-surface: #FFFFFF; --bg-surface-muted: #E8E8E8; /* Foreground */ --fg: #1A1714; --fg-secondary: #5C5650; --fg-muted: #8A857D; --fg-faint: #BFB8AC; --fg-inverse: #FAF7F2; /* Borders */ --border-subtle: #D9D1C4; --border-faint: #E7E1D7; /* Status */ --danger: #B4443A; --danger-soft: #F1D9D5; --success: #2E8B3D; --warning: #DCB40A; --info: #1F6FBC; /* Elevation */ --shadow-1: 0 2px 8px oklch(0 0 0 / 0.04); /* Legacy aliases (kept so existing classes still resolve) */ --background: var(--bg-canvas); --foreground: var(--fg); --overlay: oklch(from var(--fg) l c h / 50%); --card: var(--bg-surface); --card-foreground: var(--fg); --popover: var(--bg-surface); --popover-foreground: var(--fg); --primary: var(--fg); --primary-foreground: var(--fg-inverse); --secondary: var(--bg-surface-muted); --secondary-foreground: var(--fg); --accent-bg: var(--bg-surface-muted); --accent-foreground: var(--fg); --muted: var(--bg-surface-muted); --muted-foreground: var(--fg-muted); --border: var(--border-subtle); --input: var(--border-subtle); --input-focus: oklch(from var(--fg) l c h / 35%); --input-ring: oklch(from var(--fg) l c h / 10%); --destructive: var(--danger); --nav-icon: var(--fg); } .dark { --bg-canvas: #1C1C1E; --bg-surface: #2C2C2E; --bg-surface-muted: #3C3C3E; --fg: #F5F5F7; --fg-secondary: #A8A8AD; --fg-muted: #6E6E73; --fg-faint: #52525A; --fg-inverse: #141416; --border-subtle: #3A3A3F; --border-faint: #44444A; --danger: #D4625A; --danger-soft: #3A221F; --shadow-1: none; } @theme inline { --font-sans: "Onest", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* Semantic colors (mobile parity) */ --color-canvas: var(--bg-canvas); --color-surface: var(--bg-surface); --color-surface-muted: var(--bg-surface-muted); --color-fg: var(--fg); --color-fg-secondary: var(--fg-secondary); --color-fg-muted: var(--fg-muted); --color-fg-faint: var(--fg-faint); --color-fg-inverse: var(--fg-inverse); --color-subtle: var(--border-subtle); --color-faint: var(--border-faint); --color-accent: var(--accent); --color-accent-strong: var(--accent-strong); --color-accent-soft: var(--accent-soft); /* Legacy aliases */ --color-overlay: var(--overlay); --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-accent-bg: var(--accent-bg); --color-accent-foreground: var(--accent-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-border: var(--border); --color-input: var(--input); --color-input-focus: var(--input-focus); --color-ring: var(--input-ring); --color-destructive: var(--destructive); --color-destructive-soft: var(--danger-soft); --color-destructive-border: oklch(from var(--destructive) l c h / 20%); --color-success: var(--success); --color-warning: var(--warning); --color-info: var(--info); --color-nav-icon: var(--nav-icon); --color-background-100: var(--bg-canvas); --color-background-200: var(--bg-surface-muted); /* Radii (mobile: sm 8, md 12, lg 16, xl 20, 2xl 24, pill ∞) */ --radius-xs: 6px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-2xl: 24px; --radius-full: 9999px; /* Shadows */ --shadow-1: var(--shadow-1); } @layer base { html { @apply antialiased; color-scheme: light; background-color: var(--bg-canvas); } html.dark { color-scheme: dark; } body { @apply font-sans bg-canvas text-fg; font-feature-settings: "cv11"; } input[type="checkbox"], input[type="radio"], input[type="range"], progress { accent-color: var(--accent); } } @layer components { /* ----------------------------- Typography ----------------------------- */ .t-display { @apply text-[30px] leading-9 font-bold tracking-tight; } .t-title { @apply text-[22px] leading-7 font-semibold; } .t-headline { @apply text-[18px] leading-6 font-bold; } .t-headline-medium { @apply text-[18px] leading-6 font-medium; } .t-body { @apply text-[16px] leading-[22px] font-normal; } .t-body-medium { @apply text-[16px] leading-[22px] font-medium; } .t-label { @apply text-[14px] leading-5 font-medium; } .t-caption { @apply text-[13px] leading-[18px] font-medium; } .t-overline { @apply text-[12px] leading-4 font-semibold uppercase tracking-[0.08em]; } /* ------------------------------- Forms ------------------------------- */ .form { @apply flex flex-col gap-6; } .form__group { @apply flex flex-1 flex-col gap-1.5; } .form__label { @apply block w-fit text-[13px] font-medium text-fg-secondary; } .form__label--disabled { @apply text-fg-muted; } .form__label--errored { @apply text-destructive; } .form__field { @apply block min-h-10 w-full rounded-md border border-subtle bg-surface px-3 py-2.5 text-[15px] text-fg outline-none transition-colors; } select.form__field { @apply appearance-none bg-no-repeat pr-10; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-position: right 0.75rem center; background-size: 1rem 1rem; } .num-grid { @apply grid gap-2; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); } .num-grid__tile { @apply flex h-11 cursor-pointer items-center justify-center rounded-md bg-surface-muted text-sm font-medium tabular-nums text-fg transition-colors; } .num-grid__tile:not(.num-grid__tile--selected):not(.num-grid__tile--in-range):hover { background: oklch(from var(--bg-surface-muted) calc(l - 0.03) c h); } .num-grid__tile--in-range { @apply bg-accent-soft text-accent-strong; } .num-grid__tile--selected { @apply bg-accent font-bold text-white; } .form__password-field { @apply relative; } .form__field--with-password-toggle { @apply pr-11; } .form__password-toggle { @apply absolute top-1/2 right-2 flex size-9 -translate-y-1/2 items-center justify-center rounded-full text-fg-muted outline-none transition-colors; @apply hover:text-fg focus:ring-3 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50; } .form__password-field:has(.form__field--sm) .form__password-toggle { @apply size-7; } .form__password-toggle-svg { @apply size-4; } .form__field::placeholder { @apply text-fg-muted; } .form__field:focus { @apply border-input-focus ring-3 ring-ring; } .form__field:disabled { @apply cursor-not-allowed bg-surface-muted text-fg-muted; } .form__field--readonly { @apply bg-surface-muted; } .form__field--readonly:focus { @apply border-subtle ring-0; } .form__field--lg { @apply min-h-11 px-3.5 py-3 text-base; } .form__field--sm { @apply min-h-8 px-2.5 py-1.5 text-sm; } .form__field--errored { @apply border-destructive bg-destructive-soft text-destructive; } .form__field--errored:focus { @apply border-destructive ring-destructive-border; } .form__field--search { @apply min-h-10 rounded-md border-0 bg-surface px-3 text-[15px] text-fg placeholder:text-fg-muted; } .form__field--search:focus { @apply ring-2 ring-input-focus; } .ui__select { @apply relative; } .ui__select-trigger { @apply flex min-h-10 w-full items-center justify-between gap-2 rounded-md border border-subtle bg-surface px-3 py-2.5 text-left text-[15px] text-fg outline-none transition-colors; @apply hover:border-input-focus focus:border-input-focus focus:ring-3 focus:ring-ring; @apply disabled:cursor-not-allowed disabled:bg-surface-muted disabled:text-fg-muted disabled:hover:border-subtle; } .ui__select-value { @apply truncate; } .ui__select-value--placeholder { @apply text-fg-muted; } .ui__select-chevron { @apply size-4 shrink-0 text-fg-muted; } .ui__select-menu { @apply absolute z-20 mt-1 flex max-h-72 w-full flex-col overflow-hidden rounded-md border border-subtle bg-popover shadow-lg; } .ui__select-search { @apply relative shrink-0 border-b border-subtle; } .ui__select-search-icon { @apply pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-fg-muted; } .ui__select-search-input { @apply block min-h-10 w-full border-0 bg-transparent py-2.5 pr-3 pl-9 text-[15px] text-fg outline-none placeholder:text-fg-muted; } .ui__select-options { @apply overflow-y-auto py-1; } .ui__select-option { @apply flex w-full items-center justify-between gap-2 px-3 py-2 text-left text-[15px] text-fg outline-none; } .ui__select-option--active, .ui__select-option:hover { @apply bg-surface-muted; } .ui__select-check { @apply shrink-0 text-fg; } .ui__select-empty { @apply px-3 py-3 text-sm text-fg-muted; } .form__checkbox-wrapper { @apply inline-flex items-start gap-2; } .form__checkbox { @apply size-5 shrink-0 cursor-pointer appearance-none rounded-sm border border-subtle bg-surface text-fg align-middle outline-none; @apply focus:border-fg focus:ring-3 focus:ring-ring; @apply checked:border-fg checked:bg-fg; @apply disabled:cursor-not-allowed disabled:border-subtle disabled:bg-fg/50; background-position: center; background-repeat: no-repeat; background-size: 100% 100%; } .form__checkbox:checked { background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3e%3c/svg%3e"); } .form__checkbox-wrapper:has(.form__checkbox:not(:disabled)) .form__label { @apply cursor-pointer select-none; } .form__checkbox-wrapper:has(.form__checkbox:disabled) .form__label { @apply select-none text-fg-muted; } .form__hint { @apply text-sm font-normal text-fg-muted; } .form__error { @apply text-sm text-destructive; } /* ------------------------------ Buttons ------------------------------ */ .ui__button { @apply relative inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap text-[14px] font-medium outline-none transition-colors focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 rounded-md; border: 1px solid transparent; line-height: 1.25rem; } .ui__button--xs { @apply h-8 px-3 text-xs; } .ui__button--sm { @apply h-9 px-3.5 text-sm; } .ui__button--md { @apply h-12 px-5 text-sm; } .ui__button--lg { @apply h-12 px-8 text-base; } .ui__button--icon-xs { @apply size-8 p-0; } .ui__button--icon-sm { @apply size-9 p-0; } .ui__button--icon-md { @apply size-10 p-0; } .ui__button--icon-lg { @apply size-12 p-0; } .ui__button--rounded { @apply rounded-full; } .ui__button--block { @apply flex w-full; } .ui__button--circle { @apply rounded-full; aspect-ratio: 1; } .ui__button-content { display: inline-flex; align-items: center; justify-content: center; } .ui__button-submitting-content { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; } .ui__button-spinner { height: 1em; width: 1em; flex: 0 0 auto; border: 2px solid currentColor; border-right-color: transparent; @apply rounded-full; animation: ui__button-spin 700ms linear infinite; } .ui__button--submitting .ui__button-content { visibility: hidden; } .ui__button--submitting .ui__button-submitting-content { display: inline-flex; } @keyframes ui__button-spin { to { transform: rotate(360deg); } } .ui__button--primary { background: var(--fg); color: var(--fg-inverse); } .ui__button--primary:hover { background: oklch(from var(--fg) calc(l + 0.08) c h); } .ui__button--primary:focus-visible { @apply ring-ring; } .ui__button--outline { background: var(--bg-surface); border-color: var(--border-subtle); color: var(--fg); } .ui__button--outline:hover { background: var(--bg-surface-muted); } .ui__button--outline:focus-visible { @apply ring-ring; } .ui__button--secondary { background: var(--bg-surface-muted); color: var(--fg); } .ui__button--secondary:hover { background: oklch(from var(--bg-surface-muted) calc(l - 0.03) c h); } .ui__button--secondary:focus-visible { @apply ring-ring; } .ui__button--accent { background: var(--accent); color: #fff; } .ui__button--accent:hover { background: var(--accent-strong); } .ui__button--accent:focus-visible { box-shadow: 0 0 0 3px var(--accent-soft); } .ui__button--danger { background: var(--destructive); color: white; } .ui__button--danger:hover { background: oklch(from var(--destructive) calc(l - 0.05) c h); } .ui__button--danger:focus-visible { @apply ring-destructive-soft; } .ui__button--danger-soft { background: var(--danger-soft); color: var(--destructive); } .ui__button--danger-soft:hover { background: oklch(from var(--danger-soft) calc(l - 0.03) c h); } .ui__button--danger-soft:focus-visible { @apply ring-destructive-soft; } .ui__button--ghost { background: transparent; color: var(--fg); } .ui__button--ghost:hover { background: var(--bg-surface-muted); } .ui__button--ghost:focus-visible { @apply ring-ring; } .ui__button--link { border-color: transparent; background: transparent; padding: 0; height: auto; color: inherit; font: inherit; text-decoration-line: underline; text-underline-offset: 0.125em; } .ui__button--link:hover { color: var(--fg); } .ui__button--link:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } .ui__link { @apply underline underline-offset-2; } .authentication__link { @apply text-fg-muted decoration-fg-muted/40 transition-colors hover:text-fg hover:decoration-fg focus-visible:text-fg focus-visible:decoration-fg; } /* ------------------------------ Headings ----------------------------- */ .ui__heading { @apply mb-4 text-fg; } .ui__heading--1 { @apply text-[30px] leading-9 font-bold tracking-tight; } .ui__heading--2 { @apply text-[22px] leading-7 font-semibold; } .ui__heading--3 { @apply text-[20px] leading-7 font-semibold; } .ui__heading--4 { @apply text-[18px] leading-6 font-bold; } .ui__heading--5 { @apply text-[16px] leading-[22px] font-medium; } .ui__heading--6 { @apply text-[14px] leading-5 font-medium; } .ui__page-header { @apply mb-6; } .ui__page-header-row { @apply flex items-start justify-between gap-4; } .ui__page-header-title { @apply min-w-0 text-[30px] leading-9 font-bold tracking-tight text-fg; } .ui__page-header-description { @apply mt-1 text-[13px] leading-[18px] font-medium text-fg-muted; } .ui__page-header-actions { @apply shrink-0; } /* ------------------------------- Cards ------------------------------- */ .ui__card { @apply rounded-lg bg-surface; box-shadow: var(--shadow-1); } .dark .ui__card { @apply border border-subtle; } .ui__card--pad-sm { @apply p-3; } .ui__card--pad-md { @apply p-5; } .ui__card--pad-lg { @apply p-7; } .ui__card--grouped { @apply overflow-hidden; } .ui__card--grouped > * + * { border-top: 1px solid var(--border-faint); } /* ----------------------------- List rows ----------------------------- */ .ui__list-row { @apply flex min-h-[52px] items-center gap-3 px-4 py-3 text-fg no-underline outline-none transition-colors focus-visible:bg-surface-muted; } .ui__list-row__content { @apply min-w-0 flex-1; } .ui__list-row__title { @apply text-[16px] leading-[22px] font-medium text-fg; } .ui__list-row__subtitle { @apply text-[13px] leading-[18px] font-medium text-fg-muted mt-0.5; } .ui__list-row__chevron { @apply shrink-0 text-fg-faint text-lg; } /* -------------------------------- Pills ------------------------------- */ .ui__pill { @apply inline-flex shrink-0 items-center gap-1.5 rounded-full border border-faint bg-surface px-3 text-[13px] font-medium text-fg transition-colors; min-height: 32px; } .ui__pill--sm { min-height: 28px; @apply px-2.5; } .ui__pill--interactive { @apply cursor-pointer hover:bg-surface-muted; } .ui__pill--selected { @apply ring-2 ring-offset-1 ring-fg; } .ui__pill__dot { @apply inline-block size-2.5 shrink-0 rounded-full border border-faint; } .reading-category-pill { @apply inline-flex max-w-40 shrink-0 items-center gap-1.5 rounded-full border border-subtle bg-transparent px-2 py-0.5 text-xs font-medium text-fg; } .reading-category-pill--button { @apply cursor-pointer transition-colors hover:border-fg-muted; } .reading-category-pill--menu { @apply w-full max-w-none justify-between px-3 text-[13px]; min-height: 32px; } .reading-category-pill--menu.ui__pill--selected { @apply ring-offset-surface; } .reading-category-pill__dot { @apply inline-block size-2 shrink-0 rounded-full; } /* ----------------------- Segmented control --------------------------- */ .ui__segmented { @apply inline-flex rounded-full bg-surface-muted p-0.5 text-[13px] font-medium; } .ui__segmented__option { @apply cursor-pointer rounded-full px-3.5 py-1.5 text-fg-secondary transition-colors; } .ui__segmented__option:hover { @apply text-fg; } .ui__segmented__option--active { background: var(--fg); color: var(--fg-inverse); } .ui__segmented__option--active:hover, .ui__segmented__option--active:focus-visible { color: var(--fg-inverse); } /* ------------------------------- Alerts ------------------------------ */ .ui__alert { @apply flex items-start gap-3 border bg-surface p-4 text-sm rounded-md; } .ui__alert-icon { @apply shrink-0 pt-0.5; } .ui__alert-icon-svg { @apply size-4; } .ui__alert-content { @apply min-w-0 flex-1; } .ui__alert-title { @apply font-semibold; line-height: 1.35; } .ui__alert-body { @apply text-inherit; } .ui__alert-title + .ui__alert-body { @apply mt-1; } .ui__alert--default { @apply border-subtle bg-surface-muted text-fg; } .ui__alert--info { border-color: oklch(from var(--info) l c h / 25%); background: oklch(from var(--info) l c h / 10%); color: oklch(from var(--info) calc(l - 0.22) c h); } .ui__alert--warning { border-color: oklch(from var(--warning) l c h / 35%); background: oklch(from var(--warning) l c h / 14%); color: oklch(from var(--warning) calc(l - 0.42) c h); } .ui__alert--error { border-color: oklch(from var(--destructive) l c h / 25%); background: oklch(from var(--destructive) l c h / 10%); color: oklch(from var(--destructive) calc(l - 0.2) c h); } .ui__alert--success { border-color: oklch(from var(--success) l c h / 25%); background: oklch(from var(--success) l c h / 10%); color: oklch(from var(--success) calc(l - 0.2) c h); } /* In dark mode, lighten the text/border so colored alerts read clearly against the dark canvas instead of darkening into it. */ .dark .ui__alert--info { border-color: oklch(from var(--info) l c h / 35%); background: oklch(from var(--info) l c h / 14%); color: oklch(from var(--info) calc(l + 0.18) c h); } .dark .ui__alert--warning { border-color: oklch(from var(--warning) l c h / 40%); background: oklch(from var(--warning) l c h / 16%); color: oklch(from var(--warning) calc(l + 0.2) c h); } .dark .ui__alert--error { border-color: oklch(from var(--destructive) l c h / 35%); background: oklch(from var(--destructive) l c h / 14%); color: oklch(from var(--destructive) calc(l + 0.18) c h); } .dark .ui__alert--success { border-color: oklch(from var(--success) l c h / 35%); background: oklch(from var(--success) l c h / 14%); color: oklch(from var(--success) calc(l + 0.18) c h); } /* ------------------------------ Surfaces ----------------------------- */ .app-shell { @apply mx-auto w-full max-w-3xl px-6; } .app-header { @apply sticky top-0 z-30 mb-1 bg-canvas/90 py-2 backdrop-blur; } .admin-pagy .pagy { @apply flex items-center gap-1; } .admin-pagy .pagy a { @apply inline-flex h-8 min-w-8 items-center justify-center rounded px-2 text-xs tabular-nums text-gray-600 no-underline; } .admin-pagy .pagy a[href]:hover { @apply bg-gray-200; } .admin-pagy .pagy a[aria-current="page"] { @apply bg-gray-900 font-medium text-white; } .admin-pagy .pagy a[role="link"]:not([aria-current]) { @apply cursor-default text-gray-300; } .admin-pagy .pagy a[role="separator"] { @apply min-w-6 text-gray-400; } }