/* Copied from Policy365 (FrogCover/wwwroot/broker/tokens.css, the broker console's tokens: Policy365's own brand) on 14 October 2026. Change it there, then copy it here again. */
/* Policy365 Broker: the console's own tokens (docs/broker-console.md, step 2). The console is Policy365's product, not the
   broker's brand, so it takes nothing from the site's tokens.css: this file is its palette, faces, weights, radii and
   target sizes, loaded before base.css and broker.css on every console page (_BrokerLayout.cshtml).

   The palette (the owner, 3 October 2026): petrol for the accent, slate for everything neutral, cooler than the site's;
   with tokens for code and for text that changes live, so a value the eye should find reads differently from a label.
   Two weights, regular and semibold, and a mono face beside the body face. Both themes: the device decides unless
   data-theme says otherwise. */

:root{
  /* tells the browser which system palette to draw its own native controls from (checkboxes, radios, scrollbars) —
     without it, an unticked checkbox stays the browser's light-mode white even when the page around it is dark, since
     accent-color only re-skins a control's CHECKED fill, never its unchecked chrome. Kept in step with the dark blocks
     below by hand, since it can't itself be a custom property (the browser reads it before those apply). */
  color-scheme:light;

  /* slate: the neutrals, cool greys from the paper to the ink */
  --bg:#F3F5F7; --surface:#FFFFFF; --border:#CBD2D9; --tone:#9AA5B1;
  --placeholder:#E4E9EE; --control-border:#7B8794; --text:#1F2933; --text-muted:#52606D;
  /* petrol: the one accent, for what acts and what moves */
  --accent:#0E6B78; --accent-contrast:#FFFFFF;
  /* the second accent, a muted slate-blue, for a second kind of thing beside the petrol where one is needed */
  --accent-2:#4A6FA5; --accent-2-contrast:#FFFFFF;
  --success:#2E7D5B; --success-contrast:#FFFFFF;
  --warning:#9A6B16; --warning-contrast:#FFFFFF;
  --danger:#B23A3A; --danger-contrast:#FFFFFF;
  /* a fixed light plate for third-party logos that only work on light (same in both themes) */
  --logo-plate:#FFFFFF;
  /* the dim behind a modal: dark in both themes */
  --scrim:#0B0F14;

  /* code: a block or a span of it, and any reference, id or figure that should line up */
  --code-bg:#E9EEF2; --code-text:#1F2933;
  /* text that changes while you watch (a count, a price, a status): the accent, so the eye finds what's moving */
  --live:var(--accent);

  /* the faces: the system's for an installed app that should feel like one, and a mono beside it */
  --font-body:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:ui-monospace,"Cascadia Code",SFMono-Regular,Menlo,Consolas,monospace;
  /* the two weights (the owner, 3 October 2026): regular for reading, semibold for what stands out; nothing else */
  --weight-regular:400; --weight-semibold:600;

  --radius-sm:4px; --radius-md:8px; --radius-lg:10px; --radius-full:999px;
  --chrome:56px; --blockpad:12px;      /* 12px on a phone, 16px from a desktop width */
  /* the call-to-action buttons carry half a block's padding above and below and at the sides; it follows --blockpad */
  --cta-pad-y:calc(var(--blockpad) / 2);
  --cta-pad-x:calc(var(--blockpad) / 2);
  /* the inner padding of form elements (field cards, inputs, notes): one value, tighter than --blockpad on purpose */
  --field-pad:10px;
  /* the minimum size of anything tapped: 44 x 44 CSS px (WCAG 2.2 AAA 2.5.5, Apple HIG); px, since target size is
     measured in CSS pixels */
  --target:44px;
  /* --control-border outlines anything that identifies a control (inputs, pills, icon buttons): at least 3:1 against
     the surface (WCAG 1.4.11). --border stays the lighter one for dividers and card edges, which are decorative. */

  /* the type scale, all in rem so it follows the reader's own setting (the root size is never set): poster 64 (72 from
     1024px up), 2xl 28, xl 20 (24 from 1024px up), lg 18, base 15, sm 13, 3xs 12. Breakpoints are in em so they also
     respond when the reader increases their text size. */
  --text-poster:4rem; --text-2xl:1.75rem; --text-xl:1.25rem; --text-lg:1.125rem;
  --text-base:0.9375rem; --text-sm:0.8125rem; --text-3xs:0.75rem;
}

/* short screens (a phone on its side): a slimmer header, so the sticky bar takes less of the little height there is */
@media (max-height:30em){
  :root{ --chrome:48px; }
}

@media (min-width:64em){
  :root{ --blockpad:16px; --text-poster:4.5rem; --text-xl:1.5rem; }
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#15191E; --surface:#1E242B; --border:#323B45; --tone:#52606D;
    --placeholder:#262D35; --control-border:#7B8794; --text:#E4E9EE; --text-muted:#9AA5B1;
    --accent:#3DA6B4; --accent-contrast:#0B0F14;
    --accent-2:#8FB0E0; --accent-2-contrast:#0B0F14;
    --success:#5FB38A; --success-contrast:#0B0F14;
    --warning:#D9A54B; --warning-contrast:#0B0F14;
    --danger:#E07A7A; --danger-contrast:#0B0F14;
    --code-bg:#262D35; --code-text:#E4E9EE;
  }
}

:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#15191E; --surface:#1E242B; --border:#323B45; --tone:#52606D;
  --placeholder:#262D35; --control-border:#7B8794; --text:#E4E9EE; --text-muted:#9AA5B1;
  --accent:#3DA6B4; --accent-contrast:#0B0F14;
  --accent-2:#8FB0E0; --accent-2-contrast:#0B0F14;
  --success:#5FB38A; --success-contrast:#0B0F14;
  --warning:#D9A54B; --warning-contrast:#0B0F14;
  --danger:#E07A7A; --danger-contrast:#0B0F14;
  --code-bg:#262D35; --code-text:#E4E9EE;
}