/* Tanda design tokens — one source.

   Colours here are the values that actually shipped, not aspirations. Where
   the spec and the running app disagreed, the running app won: the confirmed
   green is #2E7D5B because that is what a member has been looking at, and the
   not-sent outline keeps the older brown because it is what the hollow mark is
   drawn in today.

   Three reds, and they are three different jobs. --bad is a mark: a fact on
   the record, used by the disputed glyph. --danger is a destructive button:
   Remove, Leave. --accent is consequence rather than error — the "seat 2
   becomes vacant" warnings, where nothing has gone wrong and an alarm colour
   would say otherwise.

   Four of these were once aspirations that differed from what shipped —
   ink, muted, line and bg were each a shade or two off the colour on the
   screen. A token that does not hold the colour it names is worse than no
   token: it invites somebody to use it and quietly repaints 279 places. They
   now say what the surfaces actually are.

   What this file still does not cover is the older :root in app.css, a
   brown-and-orange generation that paints marketing and the console. That is
   its own piece of work with its own before and after.
*/
:root{
  /* --- colour --------------------------------------------------------- */
  --t-brand:#2AA56A;              /* fill only. 3.14:1 — never text. */
  --t-brand-deep:#147B49;         /* buttons, links */
  /* Three greens that were written as literals 51 times between them. Same
     values, named -- so this introduces no visual change anywhere, which is the
     point: it makes the next decision (collapsing five greens toward two) a
     readable diff instead of a blind sweep across light and night surfaces. */
  --t-green-hover:#1F8353;        /* the pressed/hover step below --t-brand-deep */
  --t-green-bright:#35B879;       /* focus rings and hover fills on dark */
  --t-green-soft:#8FDDBD;         /* tints and marks on dark */
  /* An inset that exists. `rgba(255,255,255,.04)` is a dark-theme idiom: white
     at low opacity to lift a panel off a dark canvas. On `--t-card` (#FFFFFF)
     it is white on white. */
  --t-inset:#F8F9FA;              /* Google's quiet grey, 2026-10-12; was a warm #FAF8F6 */
  --t-confirmed:#2E7D5B;          /* green is earned — the shipped value */
  --t-brand-dim:#0F5F39;          /* green type on light */
  --t-navy:#1A2E35;                /* primary actions; green stays the accent */
  --t-accent:#B0521A;             /* the one warm thing — consequence, not error */
  /* The accent at panel strength. Reserved for the same job as --t-accent
     itself: a surface that is holding something up. */
  --t-accent-tint:#FDF4EC;
  --t-sent:#7A6A55;               /* warm grey: a claim, not a warning */
  --t-bad:#B3261E;                /* disputed — a mark on the record */
  --t-danger:#B91C1C;             /* destructive actions only */
  --t-not-sent-outline:rgba(58,42,30,.42);
  --t-ink:#1A1A1A;
  /* White, by owner decision on 2026-10-12: light mode is a plain white page.
     Cards keep --t-line as their edge, which is what separates them now. */
  --t-bg:#FFFFFF;
  --t-card:#FFFFFF;
  /* Secondary text. #8A8A8A measured 3.45:1 on white, 3.26 on --t-inset and
     3.10 on --t-bg -- below AA for the hints, labels, tabs and step numbers
     it carries, over two hundred uses. #6E6E6E is the smallest step that
     clears 4.5:1 on all three grounds (5.10 / 4.81 / 4.57): the same grey,
     readable, rather than a repaint. */
  --t-muted:#6E6E6E;
  --t-line:#EDEAE6;
  /* The brand green at chip strength, for green text on it. --t-green-soft is
     a mark for dark grounds and holds --t-brand-deep at 3.35:1; this holds it
     at 4.69:1. */
  --t-green-tint:#E7F4EE;
  /* Names used in app.css and defined nowhere. A var() with no definition and
     no fallback is invalid at computed value, so each one silently dropped a
     border, a background or a font size. Aliased to the tokens their rules
     evidently meant, so the rules do what they say. */
  --t-accent-soft:rgba(176,82,26,.3);
  --t-border:var(--t-line);
  --t-green:var(--t-brand);
  --t-subtle:var(--t-muted);
  --t-surface:var(--t-card);
  --mint:var(--t-green-bright);   /* the install card is a dark panel */
  --shadow-soft:var(--shadow-sm);
  --text-2xl:var(--text-xl);

  /* Version 1 component-standard aliases. These name the intended shared
     primitives without repainting untouched screens in this slice. */
  --color-brand:#20A96B;
  --color-brand-hover:#178956;
  --color-brand-active:#126D46;
  --color-brand-soft:#EAF7F0;
  --color-text:#111820;
  --color-text-secondary:#647184;
  --color-text-muted:#7C8796;
  --color-border:#DDE2DF;
  --color-surface:#FFFFFF;
  --color-page:#FFFFFF;
  --color-surface-subtle:#F1EEE8;
  --color-attention:#B75A16;
  --color-attention-soft:#FFF4E8;
  --color-danger:#B42318;
  --color-danger-soft:#FFF0EE;
  --color-success:#087A4B;
  --color-success-soft:#EAF7F0;

  /* --- type -----------------------------------------------------------

     One family per role, and these are the stacks that shipped.

     There were four different sans stacks in the stylesheet and a fifth in
     here that contained no Inter at all. Where Inter is installed they all
     look identical, which is why nobody noticed; where it is not — most of
     the phones this product is actually used on — they fall back to different
     fonts in different places on the same screen.

     --serif, over in app.css, is a different token and still an alias of the
     body face. It is used only by the marketing and public pages, which are
     the brown-and-orange generation and not this palette; changing it is
     their piece of work, not this one. */
  /* The face everywhere, by owner decision on 2026-10-03: the stack Google's
     own sites use. Nothing is downloaded -- each device uses the best of
     these it already has: Google Sans where it is installed (Android,
     ChromeOS), Roboto on every other Android phone, Helvetica Neue on Apple
     devices, Arial on Windows. That is zero font requests against the LCP
     budget, which no web font can match. */
  --t-font-body:"Google Sans",Roboto,"Helvetica Neue",Arial,sans-serif;
  /* Names and titles. Georgia shipped here from 2026-09 until the owner asked,
     on 2026-10-12, for Google's own type styles everywhere: a heading is the
     body face at weight 500, as on Google's sites, not a second family. Kept
     as its own name so the six rules that use it say what they are.

     The lining-nums those rules still set were for Georgia's old-style
     figures; the sans has lining figures already, so the declaration is now
     harmless and stays as a guard should a serif ever come back. */
  --t-font-heading:var(--t-font-body);
  --t-font-mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;
  /* The landing's handwritten notes: whatever script face the device has,
     so a decorative line costs no request against the LCP budget. */
  --t-font-script:"Segoe Print","Bradley Hand","Chalkboard SE","Comic Sans MS",cursive;
  /* The public pages share the body face; kept as its own name so a page can
     still be pointed at it on purpose. */
  --t-font-public:var(--t-font-body);

  --t-size-xs:.75rem;
  --t-size-sm:.875rem;
  --t-size-base:1rem;
  --t-size-md:1.125rem;
  --t-size-lg:1.25rem;

  --text-xs:var(--t-size-xs);
  --text-sm:var(--t-size-sm);
  --text-base:var(--t-size-base);
  --text-md:var(--t-size-md);
  --text-lg:1.375rem;
  --text-xl:clamp(1.75rem,4vw,2.5rem);
  --text-display:clamp(2.25rem,6vw,4.25rem);
  --line-tight:1.15;
  --line-heading:1.25;
  --line-body:1.55;
  --measure-copy:65ch;
  --measure-narrow:48ch;

  --t-weight-normal:400;
  --t-weight-medium:500;
  --t-weight-semibold:600;
  --t-weight-bold:700;

  --t-leading-tight:1.1;
  --t-leading-normal:1.5;
  --t-tracking-wide:.04em;

  /* Semantic. A label takes the body face, and that is a decision rather
     than a deferral: labels are small, uppercase and tracked, which is where
     Georgia's low contrast and bracketed serifs turn to mud. The heading face
     is for names and titles at size. */
  --t-label:var(--t-font-body);
  --t-label-size:var(--t-size-xs);
  --t-label-weight:var(--t-weight-medium);
  --t-label-tracking:var(--t-tracking-wide);

  /* --- shell ----------------------------------------------------------- */
  /* One change, everywhere. Start at 620 and adjust by looking: the member
     list was tuned nearer 520, so if the rows read stretched this is the one
     number to move. */
  /* The brand bar is sticky and the sidebar sticks under it, so both need to
     agree on one number. Left implicit it was the logo's intrinsic height,
     which the sidebar had no way to read — so the sidebar stuck to the top of
     the viewport, behind the bar, and its own head went under. */
  --t-topbar-h:61px;
  --t-sidebar-width:280px;
  --t-canvas-max:620px;
  --space-1:.25rem;
  --space-2:.5rem;
  --space-3:.75rem;
  --space-4:1rem;
  --space-5:1.5rem;
  --space-6:2rem;
  --space-7:3rem;
  --space-8:4rem;
  --space-9:6rem;
  --page-gutter:1rem;
  --layout-public:87.5rem;
  --layout-app:50rem;
  --layout-form:40rem;
  --radius-sm:.5rem;
  --radius-md:.75rem;
  --radius-lg:1.25rem;
  --radius-pill:999px;
  --border-default:1px solid var(--color-border);
  --shadow-sm:0 1px 2px rgba(17,24,32,.05);
  --shadow-md:0 12px 30px rgba(17,24,32,.08);
  --z-header:100;
  --z-dropdown:140;
  --z-overlay:220;
  --z-modal:230;
  --z-toast:260;

  /* --- motion ---------------------------------------------------------- */
  --t-spring:cubic-bezier(.34,1.56,.64,1);   /* entrances, confirmations */
  --t-settle:cubic-bezier(.22,1,.36,1);      /* anything following a finger */
  --t-d1:140ms;   /* press feedback */
  --t-d2:220ms;   /* state change */
  --t-d3:320ms;   /* sheet */
  --t-d4:460ms;   /* page */
}