/* Talous design tokens.
   Concatenated verbatim from the design system source (project/tokens/*.css),
   in the order styles.css imported them. Values are lifted, not re-derived —
   edit the design system and re-concatenate rather than tuning numbers here.
   Font and asset URLs resolve from this file: ../fonts/ and ../assets/. */

/* ═══════════════════════════════════════════════════ tokens/fonts.css ═══ */
/* Talous ships four families and no more (brand guideline §04).
   All four are Google Fonts originals — no substitutions were made.
   The woff2 files are self-hosted in /fonts, subset exactly as the live site
   ships them: latin + latin-ext for the Latin families, and a &text= subset of
   Noto Sans SC covering only the Mandarin pain lines. Add Mandarin copy beyond
   those glyphs and it falls back to the system CJK face — refetch the subset. */

@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url(../fonts/instrument-sans-400-600.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:'Instrument Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url(../fonts/instrument-sans-400-600-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}
@font-face{font-family:'Instrument Sans';font-style:italic;font-weight:400 600;font-display:swap;src:url(../fonts/instrument-sans-400-600-italic.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:'Instrument Sans';font-style:italic;font-weight:400 600;font-display:swap;src:url(../fonts/instrument-sans-400-600-italic-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}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/instrument-serif-400.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:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/instrument-serif-400-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}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/instrument-serif-400-italic.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:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/instrument-serif-400-italic-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}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url(../fonts/jetbrains-mono-400-600.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:'JetBrains Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url(../fonts/jetbrains-mono-400-600-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}
@font-face{font-family:'JetBrains Mono';font-style:italic;font-weight:400 600;font-display:swap;src:url(../fonts/jetbrains-mono-400-600-italic.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:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/jetbrains-mono-500.woff2) format('woff2');unicode-range:U+2192}
@font-face{font-family:'Noto Sans SC';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/noto-sans-sc-400.woff2) format('woff2');unicode-range:U+3002, U+4e00, U+4e48, U+4ec0, U+4ed3, U+505c, U+5168, U+5355, U+538b, U+544a, U+5728, U+5c31, U+5e7f, U+6211, U+8981, U+8d27, U+90e8, U+90fd, U+95ee, U+ff0c}

:root{
  --font-sans:"Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --font-heading:var(--font-sans);
  --font-serif:"Instrument Serif", Georgia, serif;
  --font-italic:var(--font-serif);
  --font-greeting:var(--font-serif);
  --font-mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-cjk:"Noto Sans SC", var(--font-sans);
}

/* ═══════════════════════════════════════════════════ tokens/colors.css ═══ */
/* Talous colour — rebalanced.

   THE SHIFT. The brand guideline puts pine 900 inside every word, so green was
   the ink, the canvas and the chrome. At product scale that reads as a green
   product rather than a premium one. The platform now runs on true neutrals —
   white paper, warm off-white page, near-black ink — and the two brand hues are
   held back to do one job each:

     BLACK + WHITE  the room. Structure, type, chrome, the dark canvas.
     EMBER          action. The primary CTA, approve. One per screen.
     GREEN          truth. The profit figure, on-target status, and at most one
                    deep-green emphasis surface per page.

   Neutrals are warm rather than cool — a hair of oat in the greys, so ember and
   sage sit in the same family instead of on top of a blue-grey page.

   The guideline's pine-as-ink palette is preserved at the bottom of this file
   under [data-palette="pine"] so the two can be compared side by side. */
:root{
  /* ---- Neutrals. The platform is built from these. ---- */
  --paper:#FFFFFF;         /* cards, chrome, the sheet the content sits on */
  --page:#FAF9F7;          /* the canvas behind the cards */
  --ink:#121211;           /* every word. Near-black, a hair warm */
  --muted:#6B6862;         /* secondary text, labels, captions */
  --line:#E7E4DF;          /* borders and dividers */

  /* Black ramp. The dark canvas is black, not pine. */
  --black-900:#0A0A0A;     /* the dark canvas */
  --black-800:#121211;     /* the ink */
  --black-700:#1E1E1B;     /* a raised surface on black — hover, inset panels */
  --black-600:#2C2B27;
  --on-black:#F5F3EF;      /* type on black — never pure white */
  --on-black-muted:#A3A099;/* supporting type inside a dark band */
  --band-muted:var(--on-black-muted);

  /* ---- Ember. Action, alone. ---- */
  --action:#E2703A;        /* ember 500. Primary CTA and approve. One per screen */
  --ember-300:#F0A077;
  --ember-700:#A8431F;     /* the only ember that may carry text on light */
  --ember-900:#7A2E12;

  /* ---- Green. Truth, held back. ---- */
  --sage:#4F7A5B;          /* on target, healthy. Never a button */
  --green-300:#7FA98A;     /* sage on black */
  --green-700:#1C3A2E;     /* deep emphasis surface — at most one per page */
  --green-900:#0F2019;     /* the guideline's pine 900, kept as an accent */
  /* Legacy aliases. Chrome no longer reaches for these. */
  --pine-700:var(--green-700);
  --pine-500:#2E5A45;

  /* ---- Status. Numbers only. ---- */
  --watch:#C08A2E;
  --losing:#B3372C;

  /* Derived. Always mixed from the ink into paper. */
  --ink-08:color-mix(in oklab, var(--ink) 8%, var(--paper));
  --ink-58:color-mix(in oklab, var(--ink) 58%, var(--paper));
  --hairline:color-mix(in oklab, var(--ink) 8%, var(--paper));
  --sage-tint:color-mix(in oklab, var(--sage) 10%, var(--paper));
  --watch-tint:color-mix(in oklab, var(--watch) 13%, var(--paper));
  --losing-tint:color-mix(in oklab, var(--losing) 11%, var(--paper));
  --action-tint:color-mix(in oklab, var(--action) 12%, var(--paper));
  --band-line:color-mix(in oklab, #FFFFFF 14%, transparent);

  /* ---- Semantic: text ---- */
  --text-primary:var(--ink);
  --text-secondary:var(--muted);
  --text-disabled:color-mix(in oklab, var(--ink) 34%, var(--paper));
  --text-on-dark:var(--on-black);
  --text-muted-on-dark:var(--on-black-muted);
  --text-brand:var(--ink);
  --text-accent:var(--ember-700);
  --text-on-accent:#FFFFFF;
  --text-link:var(--ember-700);
  --text-link-hover:var(--ember-900);

  /* ---- Semantic: surface ---- */
  --surface-page:var(--page);
  --surface-card:var(--paper);
  --surface-sunken:color-mix(in oklab, var(--ink) 4%, var(--paper));
  --surface-band:var(--black-900);      /* the one dark section per page */
  --surface-raised-on-dark:var(--black-700);
  --surface-accent:var(--action);
  --surface-accent-tint:var(--action-tint);
  --surface-emphasis:var(--green-700);  /* the one deep-green surface */
  --surface-inverse:var(--black-900);

  /* ---- Semantic: border ---- */
  --border-default:var(--line);
  --border-strong:color-mix(in oklab, var(--ink) 24%, var(--paper));
  --border-hairline:var(--hairline);
  --border-on-dark:var(--band-line);
  --border-focus:var(--action);

  /* ---- Semantic: interaction ---- */
  --action-primary-bg:var(--action);
  --action-primary-bg-hover:var(--ember-300);   /* the one hover that lightens */
  --action-primary-bg-active:var(--ember-700);
  --action-primary-fg:#FFFFFF;
  --action-secondary-bg:var(--paper);
  --action-secondary-border:var(--line);
  --action-secondary-fg:var(--ink);
  --action-secondary-bg-hover:var(--page);
  --action-ghost-fg:var(--muted);
  --action-ghost-bg-hover:var(--page);
  --action-disabled-bg:var(--page);
  --action-disabled-fg:var(--text-disabled);

  /* ---- Semantic: status. Numbers only, never chrome ---- */
  --status-on-target:var(--sage);
  --status-needs-look:var(--watch);
  --status-losing:var(--losing);
  --status-no-data:var(--muted);
  --status-on-target-tint:var(--sage-tint);
  --status-needs-look-tint:var(--watch-tint);
  --status-losing-tint:var(--losing-tint);
}

/* Dark mode — black becomes the canvas. Same tokens, no second system. */
[data-theme="dark"]{
  --paper:#171614;                     /* the card in the dark */
  --page:#0A0A0A;                      /* the canvas */
  --ink:#F5F3EF;
  --muted:#A3A099;
  --line:color-mix(in oklab, #FFFFFF 12%, transparent);

  --text-accent:var(--ember-300);      /* ember 300 reads on black; 700 does not */
  --text-link:var(--ember-300);
  --text-link-hover:#FAE0D2;
  --text-on-dark:#F5F3EF;

  --surface-sunken:#050505;
  --surface-band:#171614;
  --surface-raised-on-dark:#22211E;
  --border-strong:color-mix(in oklab, #FFFFFF 26%, transparent);

  --action-secondary-bg:transparent;
  --action-secondary-fg:#F5F3EF;
  --action-secondary-bg-hover:#22211E;
  --action-ghost-bg-hover:#22211E;
  --action-disabled-bg:#22211E;

  --sage:var(--green-300);
  --watch:#D9A94E;
  --losing:#D96154;
  --sage-tint:color-mix(in oklab, #4F7A5B 30%, #0A0A0A);
  --watch-tint:color-mix(in oklab, #C08A2E 26%, #0A0A0A);
  --losing-tint:color-mix(in oklab, #B3372C 26%, #0A0A0A);
  --action-tint:color-mix(in oklab, #E2703A 22%, #0A0A0A);
}

/* The brand guideline's original palette — pine 900 as the ink and the canvas.
   Kept so the two can be compared: put data-palette="pine" on <html>. */
[data-palette="pine"]{
  --page:#F4F4F3;
  --ink:#0F2019;
  --muted:#5C6D64;
  --line:#DFE4E0;
  --on-black:#F4F4F3;
  --on-black-muted:#A8C4AF;
  --band-line:color-mix(in oklab, #A8C4AF 24%, transparent);
  --surface-band:#0F2019;
  --surface-raised-on-dark:#1C3A2E;
  --surface-sunken:color-mix(in oklab, #0F2019 5%, #FFFFFF);
}

/* ═══════════════════════════════════════════════════ tokens/typography.css ═══ */
/* Talous typography — brand guideline §04.
   Three families, three weights (400/500/600), nothing below 400.
   Serif for what Talous believes. Sans for what Talous does.
   Every number is mono, always tabular-nums. Sentence case everywhere. */
:root{
  /* Website scale */
  --size-display:48px;
  --size-h1:36px;
  --size-h2:28px;
  --size-h3:21px;
  --size-body:17px;
  --size-small:15px;
  --size-caption:13px;
  /* THE FLOOR. Mono labels, chips, captions and every "small print" line on the
     page used to be set anywhere between 10 and 11px, chosen per component. At
     that size a wide-tracked uppercase mono is decoration rather than text —
     legible on the designer's 27" panel and nowhere else. Nothing on this site
     is smaller than this token now, and the values that used to be 10, 10.5 or
     11 all resolve here, so the small print is one size instead of four. */
  --size-micro:12px;

  /* Marketing masthead scale. The product ladder tops out at 48px, which gives
     a landing page no scale contrast — eight sections read as one grey column. */
  --size-hero:clamp(36px, 7.2vw, 104px);
  --size-mega:clamp(29px, 4.8vw, 64px);

  /* Product scale — one step tighter than the site; screens carry more per view */
  --size-app-h1:28px;
  --size-app-h2:21px;
  --size-app-body:15px;
  --size-app-small:14px;
  --size-app-micro:12px;

  /* Metric display — mono, tabular, for the number that matters on a screen */
  --size-metric-xl:40px;
  --size-metric-lg:28px;
  --size-metric-md:21px;

  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;

  --leading-display:1.15;
  --leading-heading:1.25;
  --leading-body:1.65;
  --leading-tight:1.35;

  --tracking-heading:-0.01em;   /* headings at 600 */
  --tracking-display:-0.02em;
  --tracking-hero:-0.032em;
  --tracking-body:0;
  --tracking-eyebrow:0.16em;    /* the only place ALL CAPS is allowed */

  /* Maximum 65 characters per line of body copy */
  --measure-body:65ch;
  --measure-narrow:46ch;
  --measure-hero:940px;

  --numeric:tabular-nums; /* @kind other */
}

/* Type utilities. Applied by name so consumers do not re-derive the ladder. */
.t-display{font-family:var(--font-heading);font-size:var(--size-display);font-weight:var(--weight-semibold);line-height:var(--leading-display);letter-spacing:var(--tracking-display)}
.t-hero{font-family:var(--font-heading);font-size:var(--size-hero);font-weight:var(--weight-semibold);line-height:1.04;letter-spacing:var(--tracking-hero);max-width:22ch;text-wrap:pretty}
.t-mega{font-family:var(--font-heading);font-size:var(--size-mega);font-weight:var(--weight-semibold);line-height:1.08;letter-spacing:-.026em;max-width:23ch;text-wrap:pretty}
.t-h1{font-family:var(--font-heading);font-size:var(--size-h1);font-weight:var(--weight-semibold);line-height:var(--leading-heading);letter-spacing:var(--tracking-heading)}
.t-h2{font-family:var(--font-heading);font-size:var(--size-h2);font-weight:var(--weight-semibold);line-height:var(--leading-heading);letter-spacing:var(--tracking-heading)}
.t-h3{font-family:var(--font-heading);font-size:var(--size-h3);font-weight:var(--weight-semibold);line-height:var(--leading-tight);letter-spacing:var(--tracking-heading)}
.t-body{font-family:var(--font-sans);font-size:var(--size-body);font-weight:var(--weight-regular);line-height:var(--leading-body);max-width:var(--measure-body)}
.t-lede{font-family:var(--font-sans);font-size:var(--size-h3);font-weight:var(--weight-regular);line-height:1.5;color:var(--text-secondary);max-width:56ch}
.t-small{font-family:var(--font-sans);font-size:var(--size-small);font-weight:var(--weight-regular);line-height:var(--leading-body)}
.t-caption{font-family:var(--font-sans);font-size:var(--size-caption);font-weight:var(--weight-regular);line-height:var(--leading-tight);color:var(--text-secondary)}

/* The single italic accent word in a masthead, the dashboard greeting, pull-quotes. */
.t-serif{font-family:var(--font-serif);font-weight:var(--weight-regular);letter-spacing:0}
.t-serif-italic{font-family:var(--font-serif);font-style:italic;font-weight:var(--weight-regular)}
.t-accent{font-family:var(--font-serif);font-style:italic;font-weight:var(--weight-regular);letter-spacing:-.01em}
.t-greeting{font-family:var(--font-greeting);font-size:var(--size-h2);font-weight:var(--weight-regular);line-height:var(--leading-heading)}

/* Mono. Eyebrows, metrics, IDs, budgets. */
.ep-eyebrow{font-family:var(--font-mono);font-size:var(--size-caption);font-weight:var(--weight-medium);text-transform:uppercase;letter-spacing:var(--tracking-eyebrow);color:var(--text-secondary)}
.t-mono{font-family:var(--font-mono);font-variant-numeric:var(--numeric);font-feature-settings:"tnum" 1}
.t-metric{font-family:var(--font-mono);font-size:var(--size-metric-lg);font-weight:var(--weight-medium);font-variant-numeric:var(--numeric);letter-spacing:-.01em;line-height:1.1}
.t-metric-xl{font-family:var(--font-mono);font-size:var(--size-metric-xl);font-weight:var(--weight-medium);font-variant-numeric:var(--numeric);letter-spacing:-.02em;line-height:1.05}
/* Every figure invented for a demo says so, once, in the one permitted caps place. */
.t-illus{font-family:var(--font-mono);font-size:var(--size-micro);text-transform:none;letter-spacing:.04em;color:var(--text-secondary)}

/* Mandarin. Pain lines only — never product names, features, CTAs or module names. */
.t-cjk{font-family:var(--font-cjk);font-weight:var(--weight-regular);line-height:1.7}
.t-pain-cjk{font-family:var(--font-cjk);font-size:var(--size-h3);font-weight:var(--weight-regular);line-height:1.6;color:var(--text-secondary)}

/* ═══════════════════════════════════════════════════ tokens/spacing.css ═══ */
/* Talous space and layout.
   INTENTIONAL ADDITION: the brand guideline fixes colour and type but not
   spacing. 4px base, doubling through the middle of the range. */
:root{
  --space-0:0;
  --space-1:2px;
  --space-2:4px;
  --space-3:6px;
  --space-4:8px;
  --space-5:12px;
  --space-6:16px;
  --space-7:20px;
  --space-8:24px;
  --space-9:32px;
  --space-10:40px;
  --space-11:48px;
  --space-12:64px;
  --space-13:80px;
  --space-14:96px;
  --space-15:128px;

  /* Clear space around any lockup is one mark height. */
  --weave-module:14px;
  --weave-strip:5px;
  --logo-clear-space:var(--weave-module); /* @kind spacing */

  /* Layout */
  --page-max:1120px;
  --page-narrow:720px;
  --page-gutter:var(--space-8);
  --page-gutter-lg:var(--space-11);
  --section-y:var(--space-14);
  --section-y-tight:var(--space-12);
  --grid-gap:var(--space-8);
  --head-h:68px;

  /* Product chrome */
  --sidebar-w:248px;
  --sidebar-w-collapsed:64px;
  --topbar-h:60px;

  /* Density — comfortable is the default */
  --control-h-sm:30px;
  --control-h:38px;
  --control-h-lg:46px;
  --control-pad-x:var(--space-6);
  --card-pad:var(--space-8);
  --row-h:48px;
  --stack-gap:var(--space-6);
  --field-gap:var(--space-5);
}

/* Compact — dense reconciliation tables, long decision records, small viewports. */
[data-density="compact"]{
  --control-h-sm:26px;
  --control-h:32px;
  --control-h-lg:40px;
  --control-pad-x:var(--space-5);
  --card-pad:var(--space-6);
  --row-h:36px;
  --stack-gap:var(--space-4);
  --field-gap:var(--space-4);
  --section-y:var(--space-12);
  --page-gutter:var(--space-6);
}

/* ═══════════════════════════════════════════════════ tokens/elevation.css ═══ */
/* Talous surfaces — radii, borders, shadows.
   INTENTIONAL ADDITION: not specified in the brand guideline. Radii stay small
   and shadows stay earth-tinted, never blue-grey. A Talous card is a border
   first and a shadow second. */
:root{
  --radius-none:0;
  --radius-sm:3px;    /* chips, tags, inline code */
  --radius-md:6px;    /* buttons, inputs, the default */
  --radius-lg:10px;   /* cards, panels, dialogs */
  --radius-xl:14px;   /* one weave module — hero panels, marketing surfaces */
  --radius-frame:28px;/* the two oversized product surfaces on the site */
  --radius-pill:999px;

  --border-width:1px; /* @kind other */
  --border-width-strong:2px; /* @kind other */
  --focus-ring-width:2px; /* @kind other */
  --focus-ring-offset:2px; /* @kind other */

  --shadow-none:none;
  --shadow-xs:0 1px 2px rgba(43,40,31,.05);
  --shadow-sm:0 1px 2px rgba(43,40,31,.05), 0 2px 6px rgba(43,40,31,.04);
  --shadow-md:0 2px 4px rgba(43,40,31,.05), 0 8px 20px rgba(43,40,31,.07);
  --shadow-lg:0 4px 8px rgba(43,40,31,.06), 0 18px 44px rgba(43,40,31,.10);
  --shadow-inset:inset 0 1px 0 rgba(252,250,244,.6);
  --shadow-focus:0 0 0 var(--focus-ring-width) var(--surface-page), 0 0 0 calc(var(--focus-ring-width) + 2px) var(--border-focus);

  /* Protection gradient — for text over full-bleed imagery. Pine, not black. */
  --scrim-bottom:linear-gradient(to top, rgba(15,32,25,.86) 0%, rgba(15,32,25,.45) 45%, rgba(15,32,25,0) 100%); /* @kind other */
  --scrim-flat:rgba(15,32,25,.62); /* @kind other */

  --blur-panel:blur(14px); /* @kind other */
  --blur-header:blur(10px); /* @kind other */
  --overlay-dialog:rgba(15,32,25,.48); /* @kind other */
}

[data-theme="dark"]{
  --shadow-xs:0 1px 2px rgba(6,14,10,.4);
  --shadow-sm:0 1px 2px rgba(6,14,10,.4), 0 2px 6px rgba(6,14,10,.3);
  --shadow-md:0 2px 4px rgba(6,14,10,.45), 0 8px 20px rgba(6,14,10,.4);
  --shadow-lg:0 4px 8px rgba(6,14,10,.5), 0 18px 44px rgba(6,14,10,.5);
  --shadow-inset:inset 0 1px 0 rgba(168,196,175,.1);
  --overlay-dialog:rgba(6,14,10,.66);
}

/* ═══════════════════════════════════════════════════ tokens/motion.css ═══ */
/* Talous motion.
   INTENTIONAL ADDITION: not specified in the brand guideline. A system that
   "asks before anything that matters" does not bounce, spring or celebrate.
   Motion confirms that something happened and then gets out of the way.
   Every ease is an *-out curve. No back, no elastic, no spring, no overshoot. */
:root{
  --dur-instant:80ms; /* @kind other */
  --dur-fast:130ms; /* @kind other */
  --dur-base:190ms; /* @kind other */
  --dur-slow:280ms; /* @kind other */
  --dur-panel:340ms; /* @kind other */
  --dur-reveal:560ms;   /* scroll reveals need longer than a panel */
  --dur-count:1100ms;   /* a figure counting up */

  --ease-standard:cubic-bezier(0.2, 0, 0.2, 1); /* @kind other */
  --ease-out:cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in:cubic-bezier(0.4, 0, 1, 1); /* @kind other */
  --ease-linear:linear; /* @kind other */

  --transition-color:color var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard); /* @kind other */
  --transition-transform:transform var(--dur-fast) var(--ease-standard); /* @kind other */
  --transition-panel:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); /* @kind other */

  /* Press state: a 1px settle, never a scale-down wobble. */
  --press-translate:1px; /* @kind other */
  /* Hover lift on a card. Transform and shadow only — both composited. */
  --hover-lift:-3px; /* @kind other */
}

@media (prefers-reduced-motion:reduce){
  :root{
    --dur-instant:0ms; /* @kind other */
    --dur-fast:0ms; /* @kind other */
    --dur-base:0ms; /* @kind other */
    --dur-slow:0ms; /* @kind other */
    --dur-panel:0ms; /* @kind other */
    --dur-reveal:0ms; /* @kind other */
    --dur-count:0ms; /* @kind other */
    --press-translate:0px; /* @kind other */
    --hover-lift:0px; /* @kind other */
  }
}

/* ═══════════════════════════════════════════════════ tokens/pattern.css ═══ */
/* The logo, and the weave textures held in reserve.

   The mark and wordmark are alpha PNGs applied as CSS masks — set a background
   colour and mask with the file. Never redraw the mark, never re-set the
   wordmark in a typeface, never use ember for a lockup. */
:root{
  --logo-mark:url("../assets/talous-mark.png"); /* @kind other */
  --logo-wordmark:url("../assets/talous-wordmark.png"); /* @kind other */
  --logo-min-size:24px;
}
.tls-mark{display:inline-block;width:32px;height:32px;min-width:var(--logo-min-size);min-height:var(--logo-min-size);background:var(--ink);-webkit-mask:var(--logo-mark) center/contain no-repeat;mask:var(--logo-mark) center/contain no-repeat;flex:none}
.tls-mark-inverse{background:var(--page)}
/* Oversized and cropped, the mark is the brand's recurring graphic device.
   Tint one step from its background and let it bleed off the edge. Held at half
   a step, not a full one: at full pine 700 the dots read as blobs and drop the
   contrast of any copy they pass behind. Texture, not art. On black it is a
   7% white lift — the mark reads as light passing through the loop. */
.tls-mark-bleed{position:absolute;width:920px;height:920px;background:color-mix(in oklab, #FFFFFF 7%, var(--surface-band));-webkit-mask:var(--logo-mark) center/contain no-repeat;mask:var(--logo-mark) center/contain no-repeat;pointer-events:none;z-index:0}
.tls-wordmark{display:inline-block;width:172px;height:41px;background:var(--ink);-webkit-mask:var(--logo-wordmark) left center/contain no-repeat;mask:var(--logo-wordmark) left center/contain no-repeat}
.tls-wordmark-inverse{background:var(--page)}
/* Horizontal lockup. Clear space on all sides is one mark height. */
.tls-lockup{display:inline-flex;align-items:center;gap:20px;text-decoration:none}
/* Pronunciation micro-tag. Used once, in footers and first slides. */
.tls-pronounce{font-family:var(--font-mono);font-size:var(--size-micro);font-weight:var(--weight-regular);text-transform:uppercase;letter-spacing:var(--tracking-eyebrow);color:var(--text-secondary)}

/* Film grain. Corrective, not decorative: it dithers the banding a wide,
   low-alpha halo lays across the flat pine band on an 8-bit panel. */
.tls-grain{position:fixed;inset:0;z-index:31;pointer-events:none;opacity:.035;background:url("../assets/grain.png") repeat;background-size:128px 128px;mix-blend-mode:overlay}
@media (prefers-reduced-motion:reduce){.tls-grain{display:none}}

/* ═══ HELD IN RESERVE ══════════════════════════════════════════════════════
   These weave textures predate the approved logo and are not part of the
   identity — the recurring graphic device is the oversized mark. Reach for them
   deliberately or not at all; never mix a weave surface with an oversized mark. */
.tls-weave{background-color:var(--ink);background-image:linear-gradient(45deg, var(--action) 25%, transparent 25%, transparent 75%, var(--action) 75%),linear-gradient(45deg, var(--action) 25%, transparent 25%, transparent 75%, var(--action) 75%);background-size:calc(var(--weave-module)*2) calc(var(--weave-module)*2);background-position:0 0, var(--weave-module) var(--weave-module)}
.tls-weave-quiet{background-color:var(--sage-tint);background-image:linear-gradient(45deg, color-mix(in oklab, var(--ink) 9%, transparent) 25%, transparent 25%, transparent 75%, color-mix(in oklab, var(--ink) 9%, transparent) 75%),linear-gradient(45deg, color-mix(in oklab, var(--ink) 9%, transparent) 25%, transparent 25%, transparent 75%, color-mix(in oklab, var(--ink) 9%, transparent) 75%);background-size:calc(var(--weave-module)*2) calc(var(--weave-module)*2);background-position:0 0, var(--weave-module) var(--weave-module)}
.tls-weave-rule{height:var(--weave-strip);border:0;margin:0;background-image:repeating-linear-gradient(90deg, var(--ink) 0 var(--weave-module), var(--action) var(--weave-module) calc(var(--weave-module)*2))}
.tls-weave-empty{background-color:var(--surface-sunken);background-image:repeating-linear-gradient(45deg, color-mix(in oklab, var(--border-strong) 30%, transparent) 0 1px, transparent 1px calc(var(--weave-module)/2))}

/* ═══════════════════════════════════════════════════ tokens/base.css ═══ */
/* Talous base — resets and document defaults. Everything else is tokens. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface-page);color:var(--text-primary);font-family:var(--font-sans);font-size:var(--size-body);font-weight:var(--weight-regular);line-height:var(--leading-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;text-wrap:pretty}
h1,h2,h3,h4{margin:0;font-family:var(--font-heading);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-heading);line-height:var(--leading-heading);text-wrap:balance}
h1{font-size:var(--size-h1)}
h2{font-size:var(--size-h2)}
h3{font-size:var(--size-h3)}
p{margin:0;max-width:var(--measure-body)}
small{font-size:var(--size-small)}
code,kbd,samp,pre{font-family:var(--font-mono);font-size:.94em}
a{color:var(--text-link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em;transition:var(--transition-color)}
a:hover{color:var(--text-link-hover)}
a:active{color:var(--text-link-hover)}
/* One focus treatment everywhere: ember, on :focus-visible only, so a mouse
   click never paints it. On a pine band it flips to ember 300. */
:where(a,button,summary,details,input,select,textarea,[tabindex]):focus-visible{outline:var(--focus-ring-width) solid var(--border-focus);outline-offset:3px;border-radius:var(--radius-sm)}
.tls-band :where(a,button,summary,[tabindex]):focus-visible{outline-color:var(--ember-300)}
button{font:inherit;color:inherit}
hr{border:0;border-top:var(--border-width) solid var(--border-default);margin:var(--space-9) 0}
table{border-collapse:collapse}
::selection{background:var(--action-tint);color:var(--text-accent)}
[data-theme="dark"] ::selection{background:var(--action);color:var(--paper)}

/* Every number is mono and tabular. Apply to any numeric cell. */
[data-numeric],.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}