/* Pocketly design tokens v2: the "nocturnal ledger" identity of the original Pocketly site
   (pocketly.co.uk), adopted by ADR-011. Every text/surface pair is verified by
   apps/web/test/contrast.check.mjs (WCAG 2.2 1.4.3 / 1.4.11). Fonts are self-hosted (OFL). */
@font-face { font-family: Fraunces; src: url('/static/fonts/fraunces-var.woff2') format('woff2'); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: Inter; src: url('/static/fonts/inter-var.woff2') format('woff2'); font-weight: 400 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Spline Sans Mono"; src: url('/static/fonts/spline-sans-mono-var.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; }
/* Cycle 93: fallback faces sized to the web fonts, so the swap when they arrive moves nothing (Lighthouse measured a
   0.21 layout shift on the privacy notice on a slow first visit). size-adjust from rendered widths (Inter body 16px,
   Fraunces 700 at 40px and 600 at 24px, within 0.4%); ascent and descent from each font's own tables over that. */
@font-face { font-family: "Inter Fallback"; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Arimo"); size-adjust: 107.2%; ascent-override: 90.37%; descent-override: 22.5%; line-gap-override: 0%; }
@font-face { font-family: "Fraunces Fallback"; src: local("Times New Roman"), local("TimesNewRomanPSMT"), local("Liberation Serif"), local("Tinos"); size-adjust: 105.9%; ascent-override: 92.35%; descent-override: 24.08%; line-gap-override: 0%; }

:root {
  /* Surfaces: deep statement blue-black, never #000 */
  /* Cycle 58 (owner: improve the dark theme): the same navy, with surfaces that lift (each step lighter, Apple's
     elevated-material idea), neutral secondary text, one calm blue for the plan and its reasoning, softer status colours. */
  --color-bg: #07121c;
  --color-bg-deep: #040b12;
  --color-surface-1: #0f1f2c;
  --color-surface-2: #172b3a;
  --color-border: #22394a;          /* decorative dividers only */
  --color-border-strong: #5f8194;   /* inputs, controls: ≥ 3:1 on all surfaces */
  /* Text */
  --color-text: #f2f5f8;
  --color-text-muted: #a1adb8;      /* ≥ 4.5:1 on every surface */
  /* Roles: tangerine = act, sky = the plan / numbers, teal = the reasoning layer, emerald = banked */
  --color-accent: #fb923c;          /* primary action */
  --color-accent-text: #fb923c;     /* the accent as text (darker in light, cycle 57) */
  --color-on-accent: #1d0e02;
  --color-plan: #5cbcf0;
  --color-engine: #7cc4e4;
  --color-focus: #ffd166;
  --color-attention: #f5b85a;
  --color-problem: #ff8a8a;
  --color-done: #4fd17f;

  --font-text: Inter, "Inter Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: Fraunces, "Fraunces Fallback", Cambria, Georgia, serif;
  --font-mono: "Spline Sans Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  /* Cycle 120 (V2.2): headings and the wordmark; in light, the brand's navy rather than neutral black. */
  --color-heading: var(--color-text);
  /* Cycle 129 (W1.1): money is one ink everywhere (the heading's); colour is kept for state: green once received,
     amber when late, plan blue for time and waiting, the accent for what to do. */
  --color-money: var(--color-heading);
  --text-xs: 0.75rem; --text-sm: 0.875rem; --text-md: 1rem; --text-lg: 1.125rem; --text-xl: 1.375rem; --text-2xl: 1.75rem; --text-3xl: 2.375rem; --text-hero: 4rem;
  /* Cycle 130 (W1.4): the type scale v2. Every size on the site is one of these roles (test/tokens.test.ts): text (above),
     a step title, three figure sizes for money, three fluid display sizes and the poster. */
  --text-step: 1.0625rem; --text-fig-s: 1.5rem; --text-fig-m: 2rem; --text-fig-l: clamp(2.4rem, 3.6vw, 3.2rem);
  --text-display-s: clamp(1.75rem, 3.2vw, 2.25rem); --text-display-m: clamp(2.2rem, 4.4vw, 3.2rem); --text-display-l: clamp(2.6rem, 5.4vw, 4.1rem);
  --text-poster: clamp(5rem, 11vw, 9rem); --text-poster-phone: clamp(4.5rem, 24vw, 6.5rem);
  /* Spacing in rem, so layout grows with the reader's text size (cycle 30). */
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2.25rem; --space-7: 3.5rem; --space-8: 6rem;
  /* Radius scale (cycle 110, V0.1): every corner in the app is one of these, or 50% for a circle. */
  --radius-xs: 3px; --radius-chip: 6px; --radius-sm: 9px; --radius-md: 12px; --radius-lg: 18px; --radius-xl: 22px; --radius-pill: 999px;
  /* Type roles (cycle 30): size, weight, leading and tracking chosen together. Large type tightens,
     small type opens up; one tracking value for every size is wrong somewhere. */
  --lead-display: 1.02; --lead-title: 1.1; --lead-headline: 1.25; --lead-body: 1.6; --lead-caption: 1.45;
  --track-display: -.03em; --track-title: -.015em; --track-headline: -.01em; --track-body: 0; --track-caption: .01em;
  /* Depth (cycle 30): hierarchy by surface and shadow, not by tinted borders. Edges are a hairline of
     light (the top catches it); one raised surface per screen carries the answer. */
  --hairline: color-mix(in srgb, var(--color-text) 12%, transparent);
  --hairline-strong: color-mix(in srgb, var(--color-text) 20%, transparent);
  --edge-light: inset 0 1px 0 color-mix(in srgb, #fff 7%, transparent);
  --fill: color-mix(in srgb, var(--color-text) 7%, transparent);
  --fill-strong: color-mix(in srgb, var(--color-text) 12%, transparent);
  --shadow-1: var(--edge-light), 0 1px 2px rgb(0 0 0 / .25);
  --shadow-2: var(--edge-light), 0 1px 2px rgb(0 0 0 / .3), 0 24px 56px -28px rgb(0 0 0 / .75);
  --shadow-pop: var(--edge-light), 0 2px 6px rgb(0 0 0 / .3), 0 28px 64px -20px rgb(0 0 0 / .8);
  --material: color-mix(in srgb, var(--color-bg) 72%, transparent);
  /* Cycle 110 (V0.16): the fill of a text field, radio or checkbox. In light a grey fill under a strong border read as
     disabled; fields are white there, as on the panels they sit on. */
  --field: var(--color-bg-deep);
  --target-min: 44px;
  --measure: 760px;
  --wide: 1180px;
  --motion-fast: 160ms; --motion-base: 280ms;
  --ease-settle: cubic-bezier(0.16, 1, 0.3, 1);
  /* Plan timeline: who acts (validated categorical slots 1–3, all pairs, both modes; cycle 8) */
  --viz-you: #3987e5; --viz-bank: #d95926; --viz-switch: #199e70;
  /* Fixed colours (cycle 110, V0.6): the same in both themes, and the only hex values outside the palettes above.
     Banks' own colours for their marks and glows; the settings tiles; the white of a knob or a mark's letters. */
  --bank-santander: #ec0000; --bank-hsbc: #db0011; --bank-hsbc-premier: #1b1b1b; --bank-natwest-premier: #1d1228; --bank-first-direct: #000; --bank-lloyds: #006a4d;
  --bank-natwest: #5a287d; --bank-rbs: #0a2f64; --bank-nationwide: #1b2c5b; --bank-nationwide-red: #e4002b; --bank-barclays: #00aeef; --bank-barclays-ink: #00243d;
  /* Cycle 128 (W1.5): the other banks people switch from, so every bank in a grid has its own mark. Approximations of
     each bank's own colour [Assumption], used only for its mark. */
  --bank-halifax: #005eb8; --bank-bank-of-scotland: #003b6f; --bank-co-op: #00b1e7; --bank-metro: #d40e14; --bank-monzo: #ff4f40; --bank-monzo-ink: #14233c;
  --bank-starling: #6935d3; --bank-tsb: #0a4a9e; --bank-ulster-bank: #003f8a; --bank-virgin-money: #cc0033; --bank-co-op-ink: #04263a;
  --glow-first-direct: #8a8f98; --glow-lloyds: #00a36c; --glow-natwest: #8e44c4; --glow-rbs: #2f6fd1;
  --tile-blue: #2f7bf0; --tile-blue-light: #5aa9ff; --tile-teal: #0f9a9f; --tile-green: #2aa952; --tile-red: #e5484d; --tile-purple: #8a63e8;
  --tile-slate: #7d8590; --tile-grey: #8e8e93; --tile-indigo: #5b5bd6; --tile-amber: #b7791f;
  --paper: #fcfaf4; --paper-ink: #142235; --paper-muted: #55595f; --paper-line: #e3ddd0; --paper-link: #1f4e86; --paper-done: #15602c; --paper-attention: #8f5c00; --paper-problem: #c4271c;
  --knob: #fff; --mask-solid: #000; --mark-ink: #fff; --mark-ring: rgb(255 255 255 / .08); --mark-ring-strong: rgb(255 255 255 / .28); --mark-edge: rgb(255 255 255 / .55);
  color-scheme: dark;
}
/* Light palette: an explicit choice only (the brand is dark by default; ADR-011). Cycle 57 (owner: "the colours look quite
   off") replaced blue-grey with neutral greys; cycle 162 (W1.2, absorbs F32) gives the light theme its own character, a
   paper ledger: warm paper surfaces, navy ink, navy links and ruled hairlines, with the brand's tangerine kept (dark ink
   on it, as in dark) and status colours at one lightness. The Apple greys and link blue are gone. Every pair is checked
   by contrast.check.mjs. */
:root[data-theme="light"] { color-scheme: light; --mark-edge: rgb(20 34 53 / .45);
  --color-bg: #f5f1e8; --color-bg-deep: #ebe5d8; --color-surface-1: #fffcf5; --color-surface-2: #f0eadd; --color-border: #d9d0bf; --color-border-strong: #776c5b;
  --color-text: #142235; --color-text-muted: #525862; --color-accent: #dd5209; --color-on-accent: #1d0e02; --color-accent-text: #a83f09; --color-plan: #1f4e86; --color-engine: #0e6660;
  --color-focus: #1f4e86; --color-attention: #855500; --color-problem: #b3251a; --color-done: #1b6b35;
  --viz-you: #2a6cc0; --viz-bank: #e0612c; --viz-switch: #17a06f;
  --hairline: color-mix(in srgb, var(--color-text) 13%, transparent);
  --hairline-strong: color-mix(in srgb, var(--color-text) 24%, transparent);
  --fill: color-mix(in srgb, #8a7d66 13%, transparent); --fill-strong: color-mix(in srgb, #8a7d66 22%, transparent);
  --edge-light: inset 0 1px 0 rgb(255 253 246 / .9);
  --shadow-1: 0 1px 2px rgb(60 42 12 / .06), 0 1px 1px rgb(60 42 12 / .04);
  --shadow-2: 0 1px 2px rgb(60 42 12 / .06), 0 12px 32px -12px rgb(60 42 12 / .14);
  --shadow-pop: 0 2px 6px rgb(60 42 12 / .07), 0 20px 44px -16px rgb(60 42 12 / .2);
  --material: color-mix(in srgb, var(--color-bg) 82%, transparent);
  --field: var(--color-surface-1);
  --color-heading: #0b2a45;
}
@media (prefers-contrast: more) {
  :root { --color-text-muted: #d0dde6; --color-border: #5f8194; --hairline: #5f8194; --hairline-strong: #8fb0c2; --material: var(--color-bg); }
  :root[data-theme="light"] { --color-text-muted: #343a44; --color-border: #776c5b; --hairline: #776c5b; --hairline-strong: #343a44; --material: var(--color-bg); }
}
@media (prefers-reduced-motion: reduce) { :root { --motion-fast: 0ms; --motion-base: 0ms; } }