/* Mesa Jurídica landing: tokens.
   Copied on 2026-09-30 from the app, so the page stands alone:
   colour roles from public/styles.css (r7: the dark palette only, for the first release),
   scale, shape, layout, elevation and motion from public/ui/ui.css (token layer only; legacy aliases left out).
   Keep in step with those files. Landing-only additions are at the end, marked as proposals. */
: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). */
  color-scheme: dark;
  --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: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; /* Roboto, self-hosted (2026-10-01); the brand keeps Instrument */
  --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: one hue, higher is softer and wider */
  --shade: 20 30 50;
  --e-1: 0 1px 2px rgb(var(--shade) / .06), 0 1px 1px rgb(var(--shade) / .04);
  --e-2: 0 4px 12px rgb(var(--shade) / .08), 0 1px 3px rgb(var(--shade) / .06);
  --e-3: 0 16px 40px rgb(var(--shade) / .16), 0 2px 8px rgb(var(--shade) / .08);

  /* Motion, named by job. One easing family. */
  --dur-micro: 120ms;   /* press, hover colour */
  --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: color-mix(in srgb, var(--danger) 12%, var(--surface));
  --accent-line: color-mix(in srgb, var(--accent) 45%, var(--line));
  --warn-line: color-mix(in srgb, var(--warn-ink) 45%, var(--line));
  --tint: color-mix(in srgb, var(--surface-soft) 60%, transparent); /* row hover */
  --overlay: rgb(8 12 20 / .55);
  --focus: 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: color-mix(in srgb, var(--bar) 55%, var(--ok)); --graf-3: var(--ok); --graf-4: var(--warn-ink);
  --graf-5: 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 */

/* ---------- Landing additions (proposals: not in the app yet, need a verdict) ----------
   A marketing page reads at arm's length, so it needs steps above the app's scale and a section rhythm.
   Round 4 follows judit.io's proportions (measured at 1363px): H1 54/500, section H2 38 (r6: one size for every section title, the 64px statement removed),
   section padding ~96 top / ~72 bottom, content ~1200, cards and images 20px, off-white alternating with a tinted band. */
:root {
  --t-lead: 18px; --lh-lead: 28px;          /* the hero's subline and a section's intro */
  --t-4xl: 40px;  --lh-4xl: 48px;           /* proof numbers */
  --t-h1: 54px;   --lh-h1: 64px;            /* the page title (r4: was --t-4xl 40/48) */
  --t-h2: 38px;   --lh-h2: 48px;            /* a section title (r4: was --t-3xl 32/40) */
  --t-stat: 48px; --lh-stat: 56px;          /* a big number with a small caption */
  --w-display: 500;                         /* H1 and statement weight (judit: 500) */
  --page-max: 1240px;                       /* r4: was 1180 (app); content ~1200 at 20px gutters */
  --hero-top: 128px;                        /* header bottom to the hero's first line; with the 64px bar, ~192 from the top */
  --hero-y: var(--hero-top);                /* r13: a page hero's space above (header to badge) and below (lede to the first content): equal */
  --hero-media: 1040px;                     /* the hero picture: photo with the product layered on it */
  --hero-overlap: 120px;                    /* how far the hero picture sinks into the next band */
  --head-narrow: 712px;                     /* a centred, narrow section head */
  --faq-max: 912px;                         /* the centred FAQ */
  --radius-feature: 20px;                   /* cards and images on the site (app cards stay --radius-card 12) */
  --surface-band: color-mix(in srgb, var(--accent-soft) 60%, var(--bg)); /* r13: no longer a band (one fixed backdrop); kept as the colour of the inverse card, the diagnóstico call */
  --section-y: 96px;                        /* r4: space above a section's content (was 112 above and below) */
  --section-bottom: 72px;                   /* r4 new: space below a section's content */
  --section-head: var(--s-12);              /* a section's head to its content */
  --head-sub: var(--s-4);                   /* a section title to its sub */
  --gap-grid: var(--s-16);                  /* 64, wider on request (2026-09-30; was 32). 48 up to 1280, 24 at 960 and below */                   /* r7: THE gap of the grid: between split halves and between cards, so 2- and 4-up grids line up with the halves */
  --gap-feature: var(--gap-grid);
  --selo-h: calc(var(--s-6) + var(--s-1));  /* r12: the hero badge, 28 */
  --tracking-selo: .14em;                    /* r12: the hero badge's tracking */
  --marca-fundo: linear-gradient(145deg, color-mix(in srgb, var(--accent) 88%, white), var(--accent) 55%, color-mix(in srgb, var(--accent) 85%, black)); /* r12: the logo square, a soft gradient on the accent */
  --marca-gap: var(--s-3);                   /* r10: between the square, Mesa and JURÍDICA */
  --tracking-display: -.015em;               /* H1 and section titles in Roboto */
  --hero-titulo: 1200px;                     /* r9: the home H1's measure, so it breaks in two lines at 1440 and 1280 */
  --surface-inverse: var(--surface-band); /* the navy band colour, decided 2026-09-30 */            /* r7: the diagnóstico call to action, the one strong ground on the site */
  --on-inverse: var(--ink);                  /* text on it */
  --on-inverse-muted: var(--muted); /* secondary text on it */
  --link-inverse: var(--accent);       /* links and marks on it */           /* r7: an alias of --gap-grid (was 24) */
  --feature-visual: var(--s-6);             /* a feature card's text to its picture */
  --measure: 60ch;                          /* the longest line of running prose */
  --hero-visual: 520px;                     /* a page hero's picture, at most */
  --reveal-y: var(--s-2);                   /* how far a block rises, or a view slides, as it enters */

  /* r13: depth (decided 2026-09-30). A card is lit from the upper middle and falls off to a darker edge.
     The page has one fixed backdrop (no bands per section): the ground plus two very large, soft colour fields.
     Fills only: no blur filters, nothing animates, nothing moves with the scroll. */
  --surface-card-borda: color-mix(in srgb, var(--surface) 70%, var(--bg));   /* a card's darkest point, at its edges */
  --surface-card-fundo: radial-gradient(120% 90% at 50% 0%, var(--surface) 0%, var(--surface-card-borda) 100%) var(--surface-card-borda);
  --surface-card-brilho: inset 0 1px 0 color-mix(in srgb, var(--ink) 6%, transparent); /* the top edge catching the light */
  --fundo-campo: color-mix(in srgb, #1d2256 70%, transparent);    /* a deep navy, towards indigo: the top-left field */
  --fundo-luz: color-mix(in srgb, var(--accent) 10%, transparent); /* a hint of the accent: the bottom-right field, the backdrop's lightest point */
  --fundo-pagina: radial-gradient(110% 90% at 0% 0%, var(--fundo-campo), transparent), radial-gradient(90% 80% at 100% 100%, var(--fundo-luz), transparent), var(--bg);
  /* r13: the sticky header and the phone menu are frosted glass. Over the hero photo's brightest area the glass reads (83,85,88):
     so text on it is --ink-2 or --ink (5.07 and 6.60:1), never --muted or --accent (2.94 and 3.03:1); see .topo.is-sobre. */
  --vidro-fundo: color-mix(in srgb, var(--bg) 70%, transparent); /* more see-through (decided 2026-09-30); --bg keeps text readable over the hero photo */
  --vidro-filtro: blur(20px) saturate(1.6);
  --vidro-borda: color-mix(in srgb, var(--line) 60%, transparent);
  /* Retired the same day: --banda-indigo, --banda-marinho, --banda-funda, --banda-azul (blobs per band). */
}
@media (max-width: 1280px) { :root { --gap-grid: var(--s-12); } }
@media (max-width: 960px) { :root { --t-md: 16px; --lh-md: 24px; --t-h1: 44px; --lh-h1: 52px; --t-h2: 32px; --lh-h2: 40px; --section-y: 80px; --section-bottom: 64px; --gap-grid: var(--s-6); --hero-top: 96px; --hero-overlap: 80px; } }
@media (max-width: 640px) { :root { --page-gutter: var(--s-4); --pad-card: var(--s-4); --t-h1: 30px; --lh-h1: 36px; --t-h2: 26px; --lh-h2: 32px; --t-stat: 40px; --lh-stat: 48px; --section-y: 64px; --section-bottom: 48px; --section-head: var(--s-8); --hero-top: 56px; --hero-overlap: 48px; --radius-feature: 16px; } }
/* r14 (tablets and phones, 960 and below): --t-md is 16 so running text and form fields never go under 16px (iOS zooms below it); product mock UI keeps 14
   (landing.css resets it inside mocks). H1 30/36 keeps every page title within 3 lines at 375; H2 26/32 stays a step below. */