/* Mesa Jurídica, Harvey-style version (apps/site/public/): tokens.
   Two layers. (1) SITE: the editorial chrome, in the structure of harvey.ai with our colours; pages and styles.css use
   only the roles (--fundo, --texto, --destaque…), never the primitives. (2) PRODUCT UI: the app's own dark tokens, used only
   by the illustrative mocks (mocks.css), because a mock is a picture of the product. */

/* ===== 1. SITE ===== */
:root {
  /* Primitives (private to this file). The navy family is the live site's; the light family is our ink, lifted to a ground. */
  --navy-900: #111418;   /* the live site's --bg */
  --navy-850: #1a1e24;   /* its --surface */
  --navy-800: #22272e;
  --navy-line: #2d333c;
  --mist-50: #f5f7f9;    /* off-white with a cool tint: --ink #eef1f5 mixed toward white */
  --mist-100: #eceff3;   /* the second light ground, one step down */
  --mist-line: #d9dee6;
  --slate-700: #2b313b;
  --slate-500: #535c6b;  /* muted text on light: 6.5:1 on mist-50 */
  --ice-100: #eef1f5;    /* the live --ink */
  --ice-300: #cfd5de;
  --ice-500: #9aa3b2;    /* the live --muted */
  --blue-400: #7ea2ff;   /* the live accent, on dark */
  --blue-600: #2a5bd7;   /* the app's light-mode accent, on light: 5.6:1 on mist-50 */

  --slate-blue: #34466e; /* the product frame's painted middle tone */
  --haze: #b4c3de;       /* the product frame's soft light */

  /* The warm light ground (the one light ground): muted stone, not yellow. Contrast on ground / second ground:
     text 16.3 / 14.8 · secondary 10.6 / 9.7 · muted 6.0 / 5.4 · accent #2a5bd7 5.2 / 4.7 · error 5.8 / 5.3. */
  --pedra-50: #f4f1eb;
  --pedra-100: #ebe6dc;
  --pedra-line: #dcd5c8;
  --tinta-900: #16140f;
  --tinta-700: #3a3630;
  --tinta-500: #625b4f;

  /* The two grounds. To make the site dark-only, point every --claro-* at its --escuro-* twin here: nothing else changes. */
  --claro-fundo: var(--pedra-50);
  --claro-fundo-2: var(--pedra-100);
  --claro-texto: var(--tinta-900);
  --claro-texto-2: var(--tinta-700);
  --claro-suave: var(--tinta-500);
  --claro-linha: var(--pedra-line);
  --claro-destaque: var(--blue-600);
  --claro-erro: #b42318;            /* 5.9:1 on mist-50 */
  --claro-ok: #1f7a4d;
  --claro-aviso: #7a4d00;
  --escuro-fundo: var(--navy-900);
  --escuro-fundo-2: var(--navy-850);
  --escuro-texto: var(--ice-100);
  --escuro-texto-2: var(--ice-300);
  --escuro-suave: var(--ice-500);
  --escuro-linha: var(--navy-line);
  --escuro-destaque: var(--blue-400);
  --escuro-erro: #ff8a80;
  --escuro-ok: #5cc48d;
  --escuro-aviso: #f3c878;

  /* The logo square and the product frame. */
  /* The product window keeps the product's own cool light UI on any ground (it is a picture of the product). */
  --app-fundo: var(--mist-50); --app-fundo-2: var(--mist-100); --app-texto: var(--navy-900); --app-texto-2: var(--slate-700);
  --app-suave: var(--slate-500); --app-linha: var(--mist-line); --app-destaque: var(--blue-600);
  --marca-fundo: linear-gradient(145deg, #8dadff, var(--blue-400) 55%, #6b8ad9); /* = linear-gradient(145deg, color-mix(in srgb, var(--blue-400) 88%, white), var(--blue-400) 55%, color-mix(in srgb, var(--blue-400) 85%, black)) */
  --papel: #fbf9f4;   /* the laudo's sheet: a lighter warm paper than the beige ground */
  --sombra-papel: 0 1px 2px rgba(22, 20, 15, 0.08), 0 12px 32px rgba(22, 20, 15, 0.08); /* = 0 1px 2px color-mix(in srgb, var(--tinta-900) 8%, transparent), 0 12px 32px color-mix(in srgb, var(--tinta-900) 8%, transparent) */
  --sombra-menu: 0 12px 32px rgba(17, 20, 24, 0.14), 0 1px 2px rgba(17, 20, 24, 0.08); /* = 0 12px 32px color-mix(in srgb, var(--navy-900) 14%, transparent), 0 1px 2px color-mix(in srgb, var(--navy-900) 8%, transparent) */
  --sombra-janela: 0 24px 64px rgba(17, 20, 24, 0.35); /* = 0 24px 64px color-mix(in srgb, var(--navy-900) 35%, transparent) */
  /* A painterly panel: fine grain and a coarse stipple (SVG feTurbulence, inline), over soft fields of navy, slate-blue and haze. */
  --quadro-grao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 -.18'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --quadro-manchas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='600'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.008 .014' numOctaves='4' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .07 0 0 0 0 .08 0 0 0 0 .1 0 0 0 -1.4 1.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
  --quadro-textura: var(--quadro-grao), var(--quadro-manchas) center / cover, radial-gradient(70% 90% at 78% 18%, var(--haze), transparent 70%), radial-gradient(80% 100% at 15% 85%, var(--slate-blue), transparent 75%), var(--navy-900);
  --vitrine-textura: var(--quadro-grao), radial-gradient(70% 110% at 88% 12%, var(--slate-blue), transparent 72%), var(--navy-900);   /* the featured panel: the frame's grain and middle tone, without its light haze, so text keeps AA */

  /* Photos (RULES.md §10b, proposal 2026-10-02): one treatment for every photo, so they read as one set. The photo turns
     grey, its lights take --foto-luz (multiply over the ground) and its shadows --foto-sombra (lighten), then the frame's
     grain sits on top. A navy-to-haze duotone: the featured panel's colours. */
  --foto-sombra: var(--slate-blue);
  --foto-luz: var(--haze);
  --foto-filtro: grayscale(1) contrast(1.15);
  --foto-grao: .35;                 /* the grain's opacity over a photo */
  --foto-capa: 5 / 2;               /* an article's hero photo */
  --foto-capa-movel: 3 / 2;         /* the same photo on phones */
  --foto-cartao: 3 / 2;             /* a card's photo */

  /* Type: ONE scale. The serif only for H1, H2 and big numbers; the sans for everything else. Line-heights on the 4px grid
     where the size is fixed; the fluid titles take a ratio. Instrument Serif is condensed with a small x-height, so the
     serif titles run big: H2's x-height is about 2.5x the subtitle's at 1440 (52 x .51 against 20 x .52).
     Hierarchy in a section: label 14 · H2 52 · subtitle 20 · item title (h3) 18 · body 16 · caption 13. */
  --fonte-titulo: "Instrument Serif", Georgia, "Times New Roman", serif;
  --fonte-texto: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --tx-hero: clamp(40px, 5.6vw, 84px);        /* H1, every page (harvey.ai: 80px at 1589); 81 at 1440 */
  --lx-hero: 1;
  --trk-hero: -.02em;
  --tx-hero-home: clamp(40px, 4.6vw, 66px);   /* the home's H1, one notch under the page H1: its hero holds a second column (2026-10-01) */
  --tx-display: var(--tx-hero); --lx-display: var(--lx-hero);   /* page H1 = the same H1 token */
  --tx-titulo: clamp(34px, 3.6vw, 52px);      /* H2 (52 at 1440, 34 on phones) */
  --lx-titulo: 1.04;
  --tx-numero: clamp(32px, 3vw, 44px);        /* big numbers in the site's stats */
  --lx-numero: 1.04;
  --tx-lead: 20px;      --lx-lead: 28px;      /* subtitles: the hero lede, a section's intro (muted, at most 60ch) */
  --tx-item: 18px;      --lx-item: 24px;      /* item titles: every h3, a row's lead, a link's title (sans 500) */
  --tx-corpo: 16px;     --lx-corpo: 24px;     /* body */
  --tx-ui: 14px;        --lx-ui: 20px;        /* labels and eyebrows, nav, buttons */
  --tx-nota: 13px;      --lx-nota: 20px;      /* captions and fine print */
  --tx-selo: 12px;      --lx-selo: 16px;      /* tags; product-UI labels */
  --tx-entrada: 24px;   --lx-entrada: 32px;   /* the Raio-X's conversational field (never under 18px: no zoom on iOS) */
  --tx-produto-titulo: 28px; --lx-produto-titulo: 32px; /* a title inside a product mock (the product's own serif title) */
  --tx-dor: var(--tx-produto-titulo); --lx-dor: var(--lx-produto-titulo);   /* a role's pain line, serif (home, O que a Mesa responde; RULES §2) */
  --tx-produto-numero: 36px; --lx-produto-numero: 40px; /* a big number inside a product mock */
  --peso-texto: 400; --peso-ui: 500;
  --trk-display: -.0125em;  /* -0.6px at 48 */
  --trk-titulo: -.01em;
  --trk-ui: -.01em;
  --trk-rotulo: .08em;      /* an uppercase label or tag (home v5: the diagram's layers, the access seal, the caption under the product frame) */

  /* Space: a 4px grid (primitives). */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px; --sp-32: 128px;
  /* One proximity scale (gestalt): the space inside a group is always clearly smaller than the space around it.
     interno < componente < irmaos < cab-conteudo < secao-y. Pages and components use these, never the primitives. */
  --gap-interno: var(--sp-2);       /* inside a component: label, title, text, link (8) */
  --gap-componente: var(--sp-4);    /* a component's picture to its text block (16) */
  --gap-irmaos: var(--sp-10);       /* between sibling components in a grid (40) */
  --cab-conteudo: var(--sp-12);     /* a section head to its content (48: under half the section padding) */
  --secao-y: var(--sp-32);          /* above and below a section's content (128; harvey.ai: 112 to 144) */
  --divisor-abaixo: var(--sp-6);    /* a divider belongs to what follows: 24 to the content below, the section padding above */
  --titulo-intro: var(--sp-4);      /* a title to its intro */
  --recorte-alt: calc(var(--sp-12) * 5);   /* a cropped product picture (home v5, sections 02 and 08): 240, its lower edge fading out */
  --visual-legenda: var(--sp-4);    /* a visual (image, frame, illustration, demo) to its caption: 16 at every width, no exceptions (RULES §3b) */

  /* Layout: one content box, equal halves. */
  --pagina-max: 1280px;
  --calha: var(--sp-10);            /* the gutter */
  --gap-grade: var(--sp-12);        /* between halves and grid columns: one 12-column grid, so halves, thirds and quarters align */
  --medida: 62ch;                  /* the longest line of prose */
  --topo-h: var(--sp-16);           /* the header */

  /* Shape: nearly square, like harvey.ai. */
  --raio-acao: 4px;                /* buttons, inputs */
  --raio-quadro: 12px;             /* panels: the product frame, photos, menus */
  --raio-janela: 8px;              /* the app window inside the product frame */

  /* Actions */
  --acao-h: 40px; --acao-h-grande: 48px; --acao-h-toque: 44px; --acao-px: var(--sp-4);
  /* One icon set: Lucide (icons/, ISC), 1.5px strokes, the text colour. Sizes by job. */
  --icone: 24px;          /* default */
  --icone-denso: 20px;    /* dense UI: close, menu */
  --icone-texto: 16px;    /* inline with 14 to 16px text: arrows, chevrons, checks */
  --icone-ui: 16px;       /* inside product mocks (the product's own scale) */
  --icone-grade: 32px;    /* feature grids */
  --icone-lista: 40px;    /* document rows */
  --icone-traco: 1.5px;
  --aviso-h: 36px;                 /* the announcement line (44 on touch widths) */
  --aviso-vel: 20px;               /* the ticker's speed, per second, the same on every width: site.js sets the loop's duration from it */
  --dur-aviso: 160s;               /* one loop without JS only (about --aviso-vel on the desktop track); site.js replaces it */
  --aviso-vao: var(--sp-32);       /* half the empty track between two messages (256 in all; 2026-10-02: one step up from 96) */
  --aviso-borda: var(--sp-10);     /* the fade at each end of the strip; a focused link is brought to this distance in */

  /* Motion: calm, product-like, once. Transform and opacity only (scaleX/scaleY for bars, stroke-dashoffset for lines). */
  --dur-micro: 160ms;     /* hover, a menu opening, a tint */
  --dur-troca: 240ms;     /* a view changing in place */
  --dur-entrada: 420ms;   /* a block entering */
  --dur-desenho: 700ms;   /* a bar or a line drawing, a number counting */
  --dur-hover: var(--dur-micro);
  --curva-saida: cubic-bezier(.2, .8, .2, 1);   /* entering, settling */
  --curva-padrao: cubic-bezier(.4, 0, .2, 1);   /* moving from one place to another */
  --escalonar: 60ms;      /* stagger: only to show order */
  --entrada-y: var(--sp-3);  /* how far a block rises as it enters (12) */
}
@media (max-width: 1100px) { :root { --secao-y: var(--sp-24); --calha: var(--sp-8); } }
@media (max-width: 960px) { :root { --aviso-h: var(--acao-h-toque); --tx-ui: 16px; --lx-ui: 24px; --tx-lead: 18px; --lx-lead: 28px; --secao-y: var(--sp-20); --gap-grade: var(--sp-8); --gap-irmaos: var(--sp-8); --cab-conteudo: var(--sp-10); } }
@media (max-width: 640px) { :root { --tx-entrada: 20px; --lx-entrada: 28px; --tx-lead: 17px; --lx-lead: 24px; --tx-item: 17px; --lx-item: 24px; --tx-produto-titulo: 24px; --lx-produto-titulo: 28px; --secao-y: var(--sp-16); --calha: var(--sp-4); --cab-conteudo: var(--sp-8); --gap-irmaos: var(--sp-8); --divisor-abaixo: var(--sp-5); } }

/* The roles. Light is the default ground; [data-tema="escuro"] turns a section (and what it holds) dark. */
:root, [data-tema="claro"] {
  color-scheme: light;   /* native controls (checkboxes, selects) follow the ground, not the OS */
  --fundo: var(--claro-fundo); --fundo-2: var(--claro-fundo-2); --texto: var(--claro-texto); --texto-2: var(--claro-texto-2);
  --suave: var(--claro-suave); --linha: var(--claro-linha); --destaque: var(--claro-destaque); --erro: var(--claro-erro); --certo: var(--claro-ok); --alerta: var(--claro-aviso);
}
[data-tema="escuro"] {
  color-scheme: dark;
  --fundo: var(--escuro-fundo); --fundo-2: var(--escuro-fundo-2); --texto: var(--escuro-texto); --texto-2: var(--escuro-texto-2);
  --suave: var(--escuro-suave); --linha: var(--escuro-linha); --destaque: var(--escuro-destaque); --erro: var(--escuro-erro); --certo: var(--escuro-ok); --alerta: var(--escuro-aviso);
}

/* ===== 2. PRODUCT UI (the app's dark tokens, copied from landing/tokens.css; mocks only) ===== */
:root {
  /* r7: dark only for the first release (decided 2026-09-30). The dark values are the only values;
     the names stay, so light mode can come back later as one more block. Light values, for that day:
     bg #f6f7f9 · surface #ffffff · surface-soft #f1f3f6 · ink #1d2433 · ink-2 #3c4556 · muted #5b6474 · line #e3e6ec ·
     accent #2a5bd7 · accent-soft #e8eefc · bar #2a78d6 · ok #1f7a4d · ok-soft #e4f3ea · warn-soft #fff4e0 · warn-ink #7a4d00 ·
     danger #b42318 · on-accent #ffffff (public/styles.css). */
  --bg: #111418;
  --surface: #1a1e24;
  --surface-soft: #22272e;
  --ink: #eef1f5;
  --ink-2: #cfd5de;
  --muted: #9aa3b2;
  --line: #2d333c;
  --accent: #7ea2ff;
  --accent-soft: #1f2a44;
  --bar: #3987e5;
  --ok: #5cc48d;
  --ok-soft: #173325;
  --warn-soft: #3a2c10;
  --warn-ink: #f3c878;
  --danger: #ff8a80;
  --shadow: none;
  --on-accent: #0d1426;
  --r: 12px;
  --font: var(--fonte-texto); /* this version: Geist in the mocks too */
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --font-marca: "Instrument Serif", Georgia, serif; /* r10: the logo face; r13: also the brand name inside titles (.nome-marca) */
}

:root {
  /* Space: a 4px grid. --s-half (2px) only between a label and its value. */
  --s-half: 2px; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;

  /* Type: size and line-height in pairs; every line-height lands on the grid. */
  --t-2xs: 10px; --lh-2xs: 12px;   /* chart ticks, tile map */
  --t-xs: 11px;  --lh-xs: 16px;    /* uppercase labels, badges, tags */
  --t-sm: 12px;  --lh-sm: 16px;    /* meta, captions */
  --t-base: 13px; --lh-base: 20px; /* dense UI, prose inside cards */
  --t-md: 14px;  --lh-md: 20px;    /* body, controls, row titles */
  --t-lg: 16px;  --lh-lg: 24px;    /* card titles */
  --t-xl: 20px;  --lh-xl: 28px;    /* section titles, numbers in a tile */
  --t-2xl: 24px; --lh-2xl: 32px;   /* page titles, a card's headline number */
  --t-3xl: 32px; --lh-3xl: 40px;   /* dashboard stats */
  --w-regular: 400; --w-medium: 500; --w-semibold: 600;
  --tracking-label: .06em; --tracking-tight: -.01em;

  /* Shape, by job */
  --radius-mark: 4px;       /* kbd, bar ends */
  --radius-inner: 6px;      /* inside a row or card */
  --radius-tile: 8px;       /* tiles, menu items */
  --radius-control: 10px;   /* buttons, inputs, segmented */
  --radius-card: 12px;      /* cards, popovers */
  --radius-overlay: 16px;   /* modal, toast, selection bar */
  --radius-pill: 999px;     /* chips, pills, badges, tracks */

  /* Controls */
  --size-label: 20px;   /* badge, tag, event */
  --control-xs: 24px;   /* pill, small avatar */
  --control-sm: 32px;   /* small button, chip, small select */
  --control: 40px;      /* default button, input, select */
  --control-lg: 44px;   /* tabs, touch targets */

  /* Layout */
  --page-max: 1180px; --page-gutter: 20px; --page-top: var(--s-6); --page-bottom: var(--s-16);
  --gap-card: var(--s-3);      /* between cards, in every grid */
  --gap-section: var(--s-6);   /* page head to body, between groups */
  --pad-card: var(--s-5);      /* equal on every side */
  --pad-tile: var(--s-3);      /* a tile or note inside a card */
  --row-pad: var(--s-3);       /* list and table rows */
  --card-head: var(--s-3);     /* card header to body */
  --page-narrow: 800px;        /* forms: profile, first setup */
  --col-side: 320px;           /* a side column next to the main one */
  --col-nav: 220px;            /* settings nav */
  --col-date: 64px;            /* a date column in a list (30/09 + weekday) */
  --col-meta: 96px;            /* a full date or short label column */
  --col-label: 112px;          /* a definition label, a small select */
  --tile-min: 220px;           /* the narrowest a card may get in an auto-fill grid */
  --busca-w: 336px;            /* the search in a filter bar: holds the longest placeholder whole */
  --sticky-top: 128px;         /* below the sticky header (64 + tabs 44) plus 20 */
  --chart-h: 200px; --chart-h-sm: 144px;
  --track: 8px; --track-thin: 4px; --dot: 8px;
  --blur-preview: 6px;         /* a blocked preview: the layout that will be there, out of focus */
  --opacity-preview: .6;       /* how present that blurred layout is under its notice */

  /* Elevation (--shade, --e-1 to --e-3): defined once, below (r7, dark only) */

  /* Motion, named by job. One easing family. */
  /* --dur-micro: the site's (160ms, section 1) also drives the mocks; one value per name */
  --dur-exit: 200ms;    /* closing, leaving */
  --dur-enter: 280ms;   /* opening, entering */
  --dur-move: 320ms;    /* changing place */
  --dur-settle: 480ms;  /* numbers, bars, resolved states */
  --dur-draw: 800ms;    /* a chart line */
  --dur-linger: 1600ms; /* a highlight fading */
  --stagger: 30ms;
  --ease-out: cubic-bezier(.2, .8, .2, 1);   /* entering, settling */
  --ease-move: cubic-bezier(.4, 0, .2, 1);   /* from one place to another, exits */
  --press: .97;

  /* Extra colour roles (derived, so they follow light and dark) */
  --danger-soft: #352b2f; /* = color-mix(in srgb, var(--danger) 12%, var(--surface)) */
  --accent-line: #516594; /* = color-mix(in srgb, var(--accent) 45%, var(--line)) */
  --warn-line: #867657; /* = color-mix(in srgb, var(--warn-ink) 45%, var(--line)) */
  --tint: rgba(34, 39, 46, 0.6); /* = color-mix(in srgb, var(--surface-soft) 60%, transparent) */ /* row hover */
  --overlay: rgb(8 12 20 / .55);
  --focus: 0 0 0 3px rgba(126, 162, 255, 0.35); /* = 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent) */
  /* Chart series: six colours from the same roles, so they follow light and dark */
  --graf-1: var(--bar); --graf-2: #49a2bd; /* = color-mix(in srgb, var(--bar) 55%, var(--ok)) */ --graf-3: var(--ok); --graf-4: var(--warn-ink);
  --graf-5: #b897c6; /* = color-mix(in srgb, var(--accent) 55%, var(--danger)) */ --graf-6: var(--muted);
  --z-sticky: 5; --z-pop: 20; --z-modal: 40; --z-toast: 60;

}
:root { --shade: 0 0 0; --e-1: none; --e-2: 0 4px 16px rgb(var(--shade) / .35); --e-3: 0 18px 48px rgb(var(--shade) / .5); } /* r7: dark only */


:root {
  --t-stat: 48px; --lh-stat: 56px; --w-display: 500; --t-lead: 18px; --lh-lead: 28px;
  --feature-visual: var(--s-6); --measure: 60ch; --reveal-y: var(--s-2); --section-y: var(--secao-y);
}

/* The product's LIGHT values (the app's own light theme, from landing/tokens.css's note), scoped to an app window drawn on a
   light content area (the hero frame, the Exemplo demo). Derived tokens are re-declared so they follow. */
.produto-claro {
  --bg: #f6f7f9; --surface: #ffffff; --surface-soft: #f1f3f6; --ink: #1d2433; --ink-2: #3c4556; --muted: #5b6474; --line: #e3e6ec;
  --accent: #2a5bd7; --accent-soft: #e8eefc; --bar: #2a78d6; --ok: #1f7a4d; --ok-soft: #e4f3ea; --warn-soft: #fff4e0; --warn-ink: #7a4d00;
  --danger: #b42318; --on-accent: #ffffff; --e-1: none; --e-2: 0 1px 2px rgb(20 30 50 / .06), 0 1px 1px rgb(20 30 50 / .04);
  --danger-soft: #f6e5e3; /* = color-mix(in srgb, var(--danger) 12%, var(--surface)) */ --accent-line: #90a7e3; /* = color-mix(in srgb, var(--accent) 45%, var(--line)) */
  --warn-line: #b4a182; /* = color-mix(in srgb, var(--warn-ink) 45%, var(--line)) */ --tint: rgba(241, 243, 246, 0.6); /* = color-mix(in srgb, var(--surface-soft) 60%, transparent) */
  --focus: 0 0 0 3px rgba(42, 91, 215, 0.35); /* = 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent) */
  --graf-1: var(--bar); --graf-2: #257998; /* = color-mix(in srgb, var(--bar) 55%, var(--ok)) */ --graf-3: var(--ok); --graf-4: var(--warn-ink);
  --graf-5: #684281; /* = color-mix(in srgb, var(--accent) 55%, var(--danger)) */ --graf-6: var(--muted);
}