/*
 * tokens.css: Trezzit design tokens, reset and utilities for the landing labs.
 * Values from Trezzit_Frontend src/theme/colors.js (brand + semantic) and
 * src/theme/shape.js (radii). Font: DM Sans, self-hosted (OFL) from the app.
 */

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 1000; /* variable: wght axis */
  font-display: swap;
  src: url('./fonts/dm-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 1000; /* variable: wght axis */
  font-display: swap;
  src: url('./fonts/dm-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* While DM Sans loads (font-display: swap), text is set in a local Arial-metric face scaled to DM Sans's width
   and line box, so the swap does not move the page (tuned on the pages against Arial/Liberation Sans: DM Sans sets about 4%
   wider at 400 and 1.6% at 700; ascent 0.992 em, descent 0.31 em). Bold has its own local face: a synthetic
   bold is narrower and would rewrap headings. */
@font-face {
  font-family: 'DM Sans Fallback';
  font-weight: 100 549;
  src: local('Arial'), local('ArialMT'), local('Helvetica'), local('Liberation Sans'), local('Arimo');
  size-adjust: 104.2%;
  ascent-override: 95.2%;
  descent-override: 29.8%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'DM Sans Fallback';
  font-weight: 550 1000;
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Bold'), local('Liberation Sans Bold'), local('Arimo Bold');
  size-adjust: 101.6%;
  ascent-override: 97.6%;
  descent-override: 30.5%;
  line-gap-override: 0%;
}

:root {
  /* brand */
  --brand-navy: #0f1f3d;      /* authority: totals, final actions, headlines */
  --action-blue: #162d59;     /* primary interactive */
  --link: #2461bd;            /* text links, the data accent */
  --accent-soft: #f0f5ff;     /* selected / hover fill */

  /* text */
  --text: #0f172a;
  --text-secondary: #64748b;
  --text-tertiary: #94a3b8;   /* placeholders, disabled: not for body text */
  --on-accent: #ffffff;

  /* money + meaning */
  --positive: #059669;        /* money in (fills, icons, large figures) */
  --positive-text: #047857;   /* money in as small text (AA 5.48:1 on white) */
  --negative: #dc2626;        /* money out */
  --recurring: #0d9488;       /* the ONE recurring colour */
  --recurring-soft: #f0fdfa;
  --warning: #ffb020;
  --warning-soft: #fef3c7;

  /* surfaces + hairlines */
  --canvas: #ffffff;
  --surface: #ffffff;
  --surface-muted: #f1f5f9;
  --surface-subtle: #f8fafc;
  --fill-soft: #f4f7fb;
  --divider: #f1f5f9;         /* faintest hairline */
  --line: #e7ecf3;            /* borders and dividers */
  --line-strong: #d5dde8;     /* dashed empty states, hovered outline */
  --hairline: 1px solid var(--line);

  /* radii (shape.js roles) */
  --radius-xs: 4px;
  --radius-sm: 8px;           /* inside a card or control */
  --radius-control: 12px;     /* buttons, inputs, list cards */
  --radius-card: 16px;        /* cards, dialogs, menus */
  --radius-window: 20px;
  --radius-xl: 24px;          /* hero panels on the landing page */
  --radius-full: 9999px;

  /* elevation: blue-tinted, never grey */
  --shadow-sm: 0 1px 2px rgba(22, 45, 89, 0.06), 0 1px 3px rgba(22, 45, 89, 0.08);
  --shadow-md: 0 4px 12px rgba(22, 45, 89, 0.08), 0 1px 3px rgba(22, 45, 89, 0.06);
  --shadow-lg: 0 18px 40px rgba(22, 45, 89, 0.12), 0 2px 6px rgba(22, 45, 89, 0.06);

  /* type */
  --font-sans: 'DM Sans', 'DM Sans Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --text-body: 17px;          /* landing body: 17px+, nothing under 14px */
  --text-small: 14px;
  --leading-body: 1.55;

  /* motion: micro 150-250 ms, reveals <= 600 ms, ease-out */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-micro: 200ms;
  --dur-reveal: 560ms;

  --focus-ring: 0 0 0 2px var(--canvas), 0 0 0 4px var(--link);
  color-scheme: light;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--canvas);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
h1, h2, h3, h4 { color: var(--brand-navy); line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; }
p { text-wrap: pretty; }
ul[role='list'], ol[role='list'] { list-style: none; margin: 0; padding: 0; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: var(--link); text-underline-offset: 0.18em; }

/* ---------- focus ---------- */
:focus { outline: none; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

/* ---------- reduced motion: show end states, no autoplay ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ---------- utilities ---------- */
.money, .tabular { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; letter-spacing: -0.01em; white-space: nowrap; }
.money-in { color: var(--positive-text); }
.money-out { color: var(--negative); }
.money-total { color: var(--brand-navy); font-weight: 700; }
.recurring { color: var(--recurring); }
.muted { color: var(--text-secondary); }
.small { font-size: var(--text-small); }
.card { background: var(--surface); border: var(--hairline); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); }
.hairline-top { border-top: var(--hairline); }
.hairline-bottom { border-bottom: var(--hairline); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px; border-radius: var(--radius-control);
  font-weight: 600; text-decoration: none;
  transition: background-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.btn-primary { background: var(--brand-navy); color: var(--on-accent); }
.btn-primary:hover { background: var(--action-blue); }
.btn-ghost { background: var(--accent-soft); color: var(--action-blue); }
.btn:active { transform: scale(0.98); }
.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px;
  border-radius: var(--radius-full); border: var(--hairline); background: var(--surface);
  font-size: var(--text-small); font-weight: 500;
}
.chip[aria-pressed='true'] { background: var(--accent-soft); border-color: var(--line-strong); color: var(--action-blue); }