/* Finna design tokens · rev 31 · 06 SEP 2026
   GENERATED — do not edit. Built from source.py by generate.py.
   Every value carries its job. Ratios are measured, not estimated. */
:root{
  /* ---- Backgrounds & borders ---- */
  --bg:#FFFFFF;               /* Background — White. Every page starts here. */
  --bg-sunken:#F0F0F0;        /* Background, sunken — 6% text tint · input fields, loading blocks. */
  --border:#E0E0E0;           /* Border — 12% text tint · dividers between rows. */
  --border-strong:#CCCCCC;    /* Border, strong — 20% text tint · the edge of a card or object. */
  --bg-dark:#0D231B;          /* Background, dark — The one dark surface. Headers, footers, moments of ceremony. */
  --bg-closing:#485955;       /* Background, closing — The ground under the closing on every page — the one place the site stops arguing and asks. */
  /* ---- Text ---- */
  --black:#000000;            /* Black — Headings and section icons on white, the mark's dark version, and the favicon ground. 21:1. */
  --white:#FFFFFF;            /* White — Text, icons and objects on a dark ground — the inverse of --black. */
  --text:#2C2C2C;             /* Text — All body text. 14:1 on white. */
  --text-secondary:#555555;   /* Text, secondary — Meta: timestamps, units, captions. */
  --text-tertiary:#737373;    /* Text, tertiary — The smallest labels — the floor for anything carrying information. */
  --text-disabled:#9A9A9A;    /* Text, disabled — Disabled states only. Never carries information. */
  /* ---- Primary — the brand green ---- */
  --primary:#246853;          /* Primary — The brand green. Primary means action: buttons, links, the active state. */
  --primary-hover:#33735F;    /* Primary, hover — A button under the pointer. */
  --primary-pressed:#184537;  /* Primary, pressed — Pressed buttons. Freya's button. */
  --primary-72:#619283;       /* Primary 72% — Fixed income in charts; icon mid-tones. */
  --primary-48:#96B7AC;       /* Primary 48% — Bands, icon tints. */
  --primary-24:#CADBD6;       /* Primary 24% — Policy bands, selection — and primary-coloured text on the dark background. */
  --primary-12:#E5EDEA;       /* Primary 12% — Chips, tinted backgrounds, the covered state. */
  --primary-6:#F2F6F5;        /* Primary 6% — The faintest tint. */
  --primary-glow:#F1FFE0;     /* Primary, glow — On trial. A pale lime, not a tint of the green. */
  /* ---- Accents — gold and warning ---- */
  --gold:#BC9635;             /* Bullion — Earned only: certificates. About 2% of any surface. */
  --gold-light:#E3C98C;       /* Gold, light — The certificate medal, top of the gradient. */
  --gold-dark:#E1EAE4;        /* Mint Cream — A pale, cool ground — quieter than white, warmer than the sunken grey. */
  --warning:#E54B28;          /* Fiery — One flag per screen. Something needs the client's attention. */
  --warning-dark:#661C28;     /* Night Bordeaux — Warning text on white, and the pressed face of a destructive key. */
  --midnight-violet:#2B0515;  /* Midnight Violet — No job. Parked in Considering — see §12. */
  --purple-dark:#5B3E9E;      /* Purple Crystal — The same job on white, where the bright purple dies. */
  --purple-bg:#1E1830;        /* Dark Purple — The surface behind a purple thing on the dark ground. */
  /* ---- Chart colours — chart marks only ---- */
  --d-equities:#246853;       /* Equities — The primary green. Identity is permanent, on every screen, forever. */
  --d-fixed:#619283;          /* Fixed income — Primary 72%. */
  --d-private:#4D4B6E;        /* Private markets — Indigo. */
  --d-real:#7E85AA;           /* Real assets — Slate. */
  --d-cash:#D5DAD8;           /* Cash — Stone. Direct labels mandatory — under 3:1. */
  /* ---- Wealth-map colours — the wealth map only ---- */
  --l-property:#745E3D;       /* Property — Earth. The wealth map only. */
  --l-owed:#485955;           /* What is owed — Text-secondary, drawn as a band under everything. */
  --l-owed-2:#687672;         /* What is owed, second band — Text-tertiary. */
  --chart-bg:#FAF8F5;         /* Chart background — The chart card sits on this; the page stays white. */
  /* ---- faces ---- */
  /* ONE FACE, INCLUDING THE DIGITS (Rose, 13 Sep 2026: "delete all Inter fonts").
     A ten-glyph Inter subset drew the numerals from 12 Sep so columns of money would
     line up; Lexend draws them again. Lexend has no tabular figures, so figures set
     in a column will not align on the decimal. That is the trade, and it is taken. */
  --font:'Lexend Variable',Arial,sans-serif;
  --font-serif:var(--font);   /* kept as a name so nothing has to be renamed; all three */
  --font-sans:var(--font);    /* now point at the one face. Weight and size do the work */
  --font-mono:var(--font);    /* the serif, the grotesk and the mono are withdrawn */
  /* ---- the type ladder ---- */
  --text-label:13px;                    /* The smallest text there is: table headers, chips, figure captions, data, the small print. Weight 500 for a label, 400 for a number. Nothing on any surface goes below it. */
  --text-reading:17px;                  /* All reading text, and the interface with it — menu items, rows, the inside of a card. Fixed: body copy does not shrink on a phone. */
  --text-subhead:clamp(19px,1.6vw,21px);/* The paragraph that opens a section, and the third-level heading. Weight 500. */
  --text-title:clamp(24px,2.6vw,32px);  /* A pull quote, a card's heading, a figure's title — bigger than the text around it, but not the thing the section is called. Weight 600. */
  --text-heading:clamp(28px,3.6vw,42px);/* A section's heading. Weight 600. */
  --text-display:clamp(34px,4.6vw,58px);/* The one headline a page is built around. Once on a page, and never twice. Weight 400 — at this size 600 reads as heavy. */
  --lh-display:1.08;                    /* Display and Heading. Tight — the words are the shape. */
  --lh-subhead:1.3;                     /* Subhead, and anything set over two or three lines. */
  --lh-reading:1.6;                     /* Reading text and labels. The comfortable measure. */
  --weight-reading:400;                 /* Reading text, and the display headline — at 58px, 600 reads as heavy. */
  --weight-label:500;                   /* Labels, the interface, subheads — anything small that must hold its own. */
  --weight-heading:600;                 /* Headings and titles. The estate's bold; there is no heavier one. */
  --track-display:-.03em;               /* The display rung. The face has no optical size axis; this is the compensation. */
  --track-heading:-.02em;               /* Heading and title. Half as much, because they are half the size. */
  /* ---- space ---- */
  --space-1:4px;              /* Inside a chip. */
  --space-2:8px;              /* Between a label and its value. */
  --space-3:12px;             /* Between cards in a grid. */
  --space-4:16px;             /* Inside a small card. */
  --space-5:24px;             /* Inside a card. */
  --space-6:32px;             /* Between a heading and its body. */
  --space-7:56px;             /* Between blocks. */
  --space-8:88px;             /* Between sections. */
  /* ---- shape ---- */
  --r-none:0px;               /* Tables, dividers, figures. */
  --r-chip:8px;               /* Version tags and chips. */
  --r-card:14px;              /* Cards, fields, panes. */
  --r-key:12px;               /* Keys. */
  --r-tile:14px;              /* Icon tiles. */
  --r-pill:999px;             /* The switch only. */
  --line-hairline:1px;        /* Row dividers, table lines. Uses the border colour. */
  --line-object:1px;          /* Cards and figures. Uses the strong border. */
  --line-heavy:3px;           /* Openings, closings, totals. Uses the text colour. */
  --line-figure:1.5px;        /* Figure strokes, round caps. */
  --line-icon-s:1.5px;        /* Icons below 24px — interface glyphs, inline arrows. */
  --line-icon:1.75px;         /* Icons 24 to 40px. The ratified stroke, unchanged. */
  --line-icon-l:2px;          /* Icons above 40px — the plates, the section marks. */
  /* ---- motion ---- */
  --t-state:140ms;            /* Hover, press, focus. A state change. */
  --t-move:240ms;             /* Something entering or leaving. */
  /* ---- the hero wash ---- */
  --wash-hero:radial-gradient(95% 75% at 6% 4%,color-mix(in srgb,#fff 9%,color-mix(in srgb,var(--primary) 26%,var(--bg-dark))) 0%,transparent 60%),radial-gradient(105% 95% at 97% 104%,color-mix(in srgb,var(--primary) 60%,var(--bg-dark)) 0%,transparent 72%),radial-gradient(70% 62% at 82% 6%,color-mix(in srgb,var(--primary) 8%,var(--bg-dark)) 0%,transparent 70%),color-mix(in srgb,var(--primary) 21%,var(--bg-dark)); /* The header wash. The top of a page, and nothing else. */
  /* ---- the button: the hard key ---- */
  --key-height:48px;          /* The touch floor. Every button is at least this tall. */
  --key-radius:12px;          /* The key's corner. */
  --key-offset:4px;           /* The solid offset under a key at rest — thrown straight down. */
  --key-offset-hover:6px;     /* The offset on hover. The face lightens one step. */
  --key-offset-press:0px;     /* Pressed: the key sits down onto its offset and moves --key-offset. */
  --key-sheen:linear-gradient(180deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 56%,rgba(0,0,0,.12) 100%);/* The face's light and shade. Fixed — it never changes between states, so hover animates. */
  --key-edge:inset 0 1px 0 rgba(255,255,255,.14);/* The lit top edge. */
  --key-height-s:36px;        /* Size S — Dense rows: a toolbar, a table row, the second action inside a card. */
  --key-height-m:48px;        /* Size M — The default. Every ordinary action, on every surface. */
  --key-height-l:56px;        /* Size L — The one action a page is built around. */
  --key-height-xl:64px;       /* Size XL — A landing hero. Once on a page, and never twice. */
  --key-radius-s:10px;        /* Size S's corner. */
  --key-radius-m:12px;        /* Size M's corner. */
  --key-radius-l:14px;        /* Size L's corner. */
  --key-radius-xl:16px;       /* Size XL's corner. */
  --key-offset-s:3px;         /* Size S's offset at rest. Hover adds 2px; pressed is 0. */
  --key-offset-m:4px;         /* Size M's offset at rest. Hover adds 2px; pressed is 0. */
  --key-offset-l:5px;         /* Size L's offset at rest. Hover adds 2px; pressed is 0. */
  --key-offset-xl:6px;        /* Size XL's offset at rest. Hover adds 2px; pressed is 0. */
  --key-label-s:14px;         /* Size S's label. */
  --key-label-m:15px;         /* Size M's label. */
  --key-label-l:16px;         /* Size L's label. */
  --key-label-xl:18px;        /* Size XL's label. */
  --key-icon-s:16px;          /* Size S's icon. Never below the 16px floor. */
  --key-icon-m:18px;          /* Size M's icon. Never below the 16px floor. */
  --key-icon-l:20px;          /* Size L's icon. Never below the 16px floor. */
  --key-icon-xl:22px;         /* Size XL's icon. Never below the 16px floor. */
}
/* ---- the mobile scale ---- */
/* Every size steps one rung up the ladder below 768px, which puts the floor at 48px.
   One set of names, two scales — the browser picks by width. */
@media (max-width:768px){:root{--key-height-s:48px;--key-height-m:56px;--key-height-l:64px;--key-height-xl:72px;--key-label-s:15px;--key-label-m:16px;--key-label-l:17px;--key-label-xl:19px;--key-height:56px}}
@media (prefers-reduced-motion:reduce){:root{--t-state:0ms;--t-move:0ms}}