@import "./fonts.css";
@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));
/*
* ── iPad Readability & Touch Configuration ────────────────────────────────────
*
* This app is primarily used on an iPad at arm's length. The Tailwind
* configuration below enforces:
*
* 1. Base font sizes — body text is 16px minimum; key UI text (headings,
* labels, inputs) targets 20px+. See the @theme and @layer base blocks.
*
* 2. Touch-friendly spacing — a custom spacing scale with generous
* padding/margins suitable for large touch interfaces.
*
* 3. touch-target-min utility — a custom Tailwind utility class that
* enforces the Apple HIG minimum touch-target size of 44×44pt.
* Usage:
*
* 4. Touch interaction defaults — `touch-action: manipulation` on the
* body prevents accidental double-tap zoom on iPad Safari.
*
* 5. Tap feedback — all interactive elements (button, a, [role="button"])
* have base-layer active-state styling (opacity + scale) for visible
* press feedback on touch. Individual elements can layer Tailwind
* `active:` utilities on top for more specific feedback.
*
* See also: docs/mvp-plan.md, Story 1.1.4 and Story 1.3.1.
* See also: docs/touch-target-convention.md for touch target sizing guide.
* ──────────────────────────────────────────────────────────────────────────────
*/
/* ── Custom theme tokens ───────────────────────────────────────────────────── */
@theme inline {
/* Figma: Inter for UI, JetBrains Mono for numbers (see fonts.css). */
--font-sans: var(--font-family-base);
--font-mono: var(--font-family-mono);
}
@theme {
/* Font sizes optimised for iPad at arm's length.
* "base" (body) = 16px, "lg" = 20px for key UI text, scaling up from there.
* Tailwind v4 uses --text-* / --text-*--line-height tokens for text-*
* utilities. */
--text-sm: 0.875rem; /* 14px — secondary/caption text */
--text-sm--line-height: 1.25rem; /* 20px */
--text-base: 1rem; /* 16px — body / minimum readable size */
--text-base--line-height: 1.5rem; /* 24px */
--text-lg: 1.25rem; /* 20px — key UI text, inputs, list items*/
--text-lg--line-height: 1.75rem; /* 28px */
--text-xl: 1.5rem; /* 24px — section headings */
--text-xl--line-height: 2rem; /* 32px */
--text-2xl: 1.75rem; /* 28px — page headings */
--text-2xl--line-height: 2.25rem; /* 36px */
--text-3xl: 2.25rem; /* 36px — hero / balance display */
--text-3xl--line-height: 2.75rem; /* 44px */
/* Touch-friendly spacing scale.
* These supplement the default Tailwind scale with more generous values
* at the mid-range, making p-4/p-6/p-8 feel right on a 10" tablet. */
--spacing-touch-xs: 0.5rem; /* 8px */
--spacing-touch-sm: 0.75rem; /* 12px */
--spacing-touch-md: 1rem; /* 16px */
--spacing-touch-lg: 1.5rem; /* 24px */
--spacing-touch-xl: 2rem; /* 32px */
--spacing-touch-2xl: 3rem; /* 48px */
}
/* ── Base (reset) layer ────────────────────────────────────────────────────── */
@layer base {
html {
/* Ensure 1rem = 16px regardless of browser defaults */
font-size: 16px;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
background-color: #f9fafb;
}
html:where(.dark) {
background-color: #030712;
}
body {
/* Inter for all UI text (Figma). */
font-family: var(--font-family-base);
/* 16px base, comfortable line-height for reading at arm's length */
font-size: 1rem; /* 16px minimum */
line-height: 1.5; /* 24px */
/* Prevent double-tap zoom on iPad Safari (Apple HIG recommendation) */
touch-action: manipulation;
/* Smooth font rendering on Retina displays */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Key UI text defaults — headings at 20px+ for arm's-length readability */
h1 {
font-size: 1.75rem; /* 28px — page headings */
line-height: 2.25rem; /* 36px */
font-weight: 700;
}
h2 {
font-size: 1.5rem; /* 24px — section headings */
line-height: 2rem; /* 32px */
font-weight: 600;
}
h3 {
font-size: 1.25rem; /* 20px — subsection headings */
line-height: 1.75rem; /* 28px */
font-weight: 600;
}
/* Form controls: large enough for touch and readable at arm's length */
input,
select,
textarea,
button {
font-size: 1.25rem; /* 20px — key UI text */
line-height: 1.75rem; /* 28px */
}
/* Labels should match input size for visual consistency */
label {
font-size: 1.125rem; /* 18px */
line-height: 1.5rem; /* 24px */
font-weight: 500;
}
/* ── Tap feedback for all interactive elements ─────────────────────────────
* Provides a visible press state on touch for buttons, links, and any
* element with role="button". The opacity + scale shift gives tactile
* feedback on iPad without relying on hover states (which don't apply to
* touch).
*
* Individual elements can override these with Tailwind active: utilities
* for more specific feedback (e.g., active:bg-blue-700).
* ──────────────────────────────────────────────────────────────────────── */
button,
a,
[role="button"] {
transition: opacity 0.1s ease, transform 0.1s ease;
-webkit-tap-highlight-color: transparent; /* Remove Safari's default tap highlight */
}
button:active,
a:active,
[role="button"]:active {
opacity: 0.7;
transform: scale(0.97);
}
}
/* ── Custom utility: touch-target-min ──────────────────────────────────────── */
/*
* Enforces the Apple Human Interface Guidelines minimum touch target of
* 44×44pt. Apply to any tappable element: buttons, links, icon actions.
*
* Usage:
*
* Admin
*
* The class sets min-width and min-height to 44px, centres content via
* inline-flex, and adds comfortable default padding.
*/
@utility touch-target-min {
min-width: 44px;
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 12px;
cursor: pointer;
}
/* Native