/* Finna design tokens · rev 59 · 30 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-raised:#FFFFFF;        /* Background, raised — A card or panel's face. White on white; in dark mode it lifts lighter than the page. */
  --bg-selected:#E5EDEA;      /* Background, selected — The current row in a menu, the selected item. Primary 12% on white. */
  --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. */
  --heading:#000000;          /* Heading — Headings and section icons. Black on white, white in dark mode. */
  --text-link:#246853;        /* Text, link — Primary-coloured text: links and a secondary key's label. Not icons — icons take the heading colour (REV 51). The brand green on white; Primary 48% in dark mode. */
  --text-selected:#184537;    /* Text, selected — Text on --bg-selected: the current menu row, a chip's words. */
  --text-error:#661C28;       /* Text, error — An error's words. Night Bordeaux on white. */
  /* ---- 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: certificates. And attention — the edge of a card that needs you and the shelf of the attention key (27 Sep 2026). About 2% of any surface. */
  --gold-light:#E3C98C;       /* Gold, light — The certificate medal, top of the gradient. The attention label and the attention key’s face (27 Sep 2026). */
  --gold-dark:#E1EAE4;        /* Mint Cream — A pale, cool ground — quieter than white, warmer than the sunken grey. */
  --warning:#E54B28;          /* Fiery — Errors: a field that is wrong, Freya’s needs-you ring. And Freya’s has-something dot (29 Sep 2026), menus included. Attention moved to Bullion (27 Sep 2026) — Fiery read as an error there. */
  --warning-dark:#661C28;     /* Night Bordeaux — Warning text on white, and the pressed face of a destructive key. */
  --midnight-violet:#2B0515;  /* Midnight Violet — The tip in dark mode — the box that names a folded icon, with white words (Rose, 27 Sep 2026). Its first job; it left Considering for it. */
  --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, and the one desk colour: the desk openers (REV 57) and Home’s desk cards (REV 59), mixed into the raised background. */
  --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, and the pill labels promoted from the site’s chip — the status label and the filter tag. Nothing else. */
  --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. */
  /* ---- component sizes ---- */
  --card-icon:24px;           /* A card’s own icon, top right: a tile, a summary box. The line icon at the size it is drawn at. */
  --list-mark:32px;           /* A list’s mark and a desk card’s plate: Learn’s path marks, the week’s leaves. */
  --sheet-w:560px;            /* The detail sheet: a record’s detail and its forms, over the work. */
  /* ---- motion ---- */
  --t-state:140ms;            /* Hover, press, focus. A state change. */
  --ease:cubic-bezier(.2,.8,.2,1);/* The one easing curve — the site and the product already used it; now it has a home. */
  --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-touch-target:48px;    /* Minimum mobile hit area, not visible face height. */
  --input-height:48px;        /* Input desktop height, independent of compact buttons. */
  --button-white-text:#000000;/* White button label; aliases the black role. */
  --key-height:40px;          /* Default button face. Mobile touch area is separately at least 48px. */
  --key-radius:12px;          /* The key's corner. */
  --key-offset:2px;           /* The solid offset under a key at rest — thrown straight down. */
  --key-offset-hover:1px;     /* The offset on hover: half the rest offset — the key sinks halfway (27 Sep 2026, it used to lift). 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:32px;        /* Size S — Dense rows: a toolbar, a table row, the second action inside a card. */
  --key-height-m:40px;        /* Size M — The default. Every ordinary action, on every surface. */
  --key-height-l:48px;        /* Size L — The one action a page is built around. */
  --key-height-xl:56px;       /* 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:2px;         /* Size S's offset at rest. Hover halves it and the key sinks the same; pressed is 0. */
  --key-offset-m:2px;         /* Size M's offset at rest. Hover halves it and the key sinks the same; pressed is 0. */
  --key-offset-l:3px;         /* Size L's offset at rest. Hover halves it and the key sinks the same; pressed is 0. */
  --key-offset-xl:4px;        /* Size XL's offset at rest. Hover halves it and the key sinks the same; 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 ---- */
/* Face heights stay compact below 768px; the separate hit area is at least 48px.
   One set of names, two scales — the browser picks by width. */
@media (max-width:768px){:root{--key-height-s:32px;--key-height-m:40px;--key-height-l:48px;--key-height-xl:56px;--key-label-s:15px;--key-label-m:16px;--key-label-l:17px;--key-label-xl:19px;--key-height:40px;--input-height:56px}}
@media (prefers-reduced-motion:reduce){:root{--t-state:0ms;--t-move:0ms}}
/* ---- dark mode — OPT-IN: a product sets data-mode on <html>. "auto" follows the
   device, "dark" and "light" override it. A page without data-mode never changes. */
:root[data-mode]{color-scheme:light}
@media (prefers-color-scheme:dark){:root[data-mode="auto"]{color-scheme:dark;--bg:#161616;--bg-raised:#202020;--bg-sunken:#292929;--border:#333333;--border-strong:#424242;--text:#FFFFFF;--text-secondary:#A8A8A8;--text-tertiary:#8C8C8C;--text-disabled:color-mix(in srgb,#A8A8A8 50%,#161616);--heading:#FFFFFF;--text-link:#96B7AC;--text-selected:#FFFFFF;--text-error:#D4A894;--bg-selected:color-mix(in srgb,#246853 32%,#161616);--primary-12:color-mix(in srgb,#246853 24%,#161616);--primary-6:color-mix(in srgb,#246853 12%,#161616);--chart-bg:#202020}}
:root[data-mode="dark"]{color-scheme:dark;--bg:#161616;--bg-raised:#202020;--bg-sunken:#292929;--border:#333333;--border-strong:#424242;--text:#FFFFFF;--text-secondary:#A8A8A8;--text-tertiary:#8C8C8C;--text-disabled:color-mix(in srgb,#A8A8A8 50%,#161616);--heading:#FFFFFF;--text-link:#96B7AC;--text-selected:#FFFFFF;--text-error:#D4A894;--bg-selected:color-mix(in srgb,#246853 32%,#161616);--primary-12:color-mix(in srgb,#246853 24%,#161616);--primary-6:color-mix(in srgb,#246853 12%,#161616);--chart-bg:#202020}