/* =========================================================
   CaptureTech design tokens - the single source of truth.

   Two vocabularies live on top of this one block:

     1. --ct-*      The Figma design system (file kIwiujcAOFQszyXPwiIbN0).
                    Names and values match the Figma variables 1:1, so a
                    developer reading a Dev Mode snippet finds the same name here.

     2. The material aliases used by the two stylesheets that follow:
        site.css   (public website: layered glass, InsightAndroid landing idiom)
        portal.css (admin: flat surfaces, InsightAndroid concept idiom)
        Both are written against the short names (--cyan, --ink, --glass, ...)
        that the InsightAndroid stylesheets already use, so rules can be ported
        verbatim. Every one of those aliases resolves to a --ct-* token.

   Change a colour here and both materials follow. Never define a raw colour in
   site.css or portal.css.
   ========================================================= */

@font-face{font-family:'Mont';src:url('../fonts/mont-regular.woff2') format('woff2');font-weight:300 500;font-style:normal;font-display:swap;}
@font-face{font-family:'Mont';src:url('../fonts/mont-bold.woff2') format('woff2');font-weight:600 900;font-style:normal;font-display:swap;}
@font-face{font-family:'Roboto';src:url('../fonts/roboto-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Roboto';src:url('../fonts/roboto-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:'Roboto';src:url('../fonts/roboto-medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Roboto';src:url('../fonts/roboto-bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}

:root{
  /* ---- Primitives (Figma: Primitives collection) ---- */
  --ct-blue-100:#E5F8FF; --ct-blue-200:#B3ECFF; --ct-blue-500:#00BAFF; --ct-blue-600:#00A6E3; --ct-blue-700:#0088BA;
  --ct-navy-500:#0064CD; --ct-navy-600:#0052A8; --ct-navy-700:#003D7A;
  --ct-red-100:#FDE7EB;  --ct-red-500:#F03C5A;  --ct-red-600:#CC334D;
  --ct-white-1000:#FFFFFF; --ct-black-1000:#000000;
  --ct-grey-50:#F8F9FA; --ct-grey-100:#F4F4F4; --ct-grey-200:#E6E6E6; --ct-grey-300:#CDCDCD; --ct-grey-400:#ABABAB;
  --ct-grey-500:#969696; --ct-grey-600:#6E6E6E; --ct-grey-700:#4A4A4A; --ct-grey-800:#292929; --ct-grey-900:#141414;
  --ct-green-500:#1DB954; --ct-amber-500:#F5A623;

  /* ---- Semantic colour, Light mode (Figma: Color collection) ---- */
  --ct-bg-page:var(--ct-white-1000);
  --ct-bg-subtle:var(--ct-grey-100);
  --ct-bg-muted:var(--ct-grey-200);
  --ct-bg-inverse:var(--ct-black-1000);
  --ct-bg-brand:var(--ct-blue-500);
  --ct-bg-brand-subtle:var(--ct-blue-100);
  --ct-bg-accent:var(--ct-red-500);
  --ct-bg-accent-hover:var(--ct-red-600);
  --ct-bg-navy:var(--ct-navy-500);
  --ct-text-primary:var(--ct-black-1000);
  --ct-text-secondary:var(--ct-grey-600);
  --ct-text-muted:var(--ct-grey-500);
  --ct-text-inverse:var(--ct-white-1000);
  --ct-text-brand:var(--ct-blue-500);
  --ct-text-brand-strong:var(--ct-navy-500);
  --ct-text-accent:var(--ct-red-500);
  --ct-text-on-brand:var(--ct-white-1000);
  --ct-text-on-accent:var(--ct-white-1000);
  --ct-border-default:var(--ct-grey-300);
  --ct-border-subtle:var(--ct-grey-200);
  --ct-border-strong:var(--ct-grey-500);
  --ct-border-brand:var(--ct-blue-500);
  --ct-border-accent:var(--ct-red-500);
  --ct-border-focus:var(--ct-navy-500);
  --ct-icon-default:var(--ct-black-1000);
  --ct-icon-brand:var(--ct-blue-500);
  --ct-icon-muted:var(--ct-grey-500);
  --ct-status-success:var(--ct-green-500);
  --ct-status-warning:var(--ct-amber-500);
  --ct-status-error:var(--ct-red-600);

  /* ---- Spacing (4pt) and sizing ---- */
  --ct-space-0:0px; --ct-space-1:4px; --ct-space-2:8px; --ct-space-3:12px; --ct-space-4:16px; --ct-space-5:20px;
  --ct-space-6:24px; --ct-space-8:32px; --ct-space-10:40px; --ct-space-12:48px; --ct-space-16:64px; --ct-space-20:80px;
  --ct-space-24:96px; --ct-space-32:128px;
  --ct-size-container-xl:1440px; --ct-size-container-lg:1280px; --ct-size-container-md:1080px; --ct-size-container-sm:860px;
  --ct-size-control-sm:40px; --ct-size-control-md:48px; --ct-size-control-lg:56px;
  --ct-size-icon-sm:16px; --ct-size-icon-md:24px; --ct-size-icon-lg:32px;
  --ct-size-stroke:1px; --ct-size-stroke-strong:2px;

  /* ---- Radius ---- */
  --ct-radius-none:0; --ct-radius-sm:6px; --ct-radius-md:13px; --ct-radius-lg:20px; --ct-radius-xl:32px; --ct-radius-full:999px;

  /* ---- Typography ---- */
  --ct-font-heading:'Mont', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ct-font-body:'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ct-font-size-xs:12px; --ct-font-size-sm:14px; --ct-font-size-md:16px; --ct-font-size-lg:18px; --ct-font-size-xl:20px;
  --ct-font-size-2xl:24px; --ct-font-size-3xl:30px; --ct-font-size-4xl:36px; --ct-font-size-5xl:48px; --ct-font-size-6xl:64px; --ct-font-size-7xl:80px;
  --ct-line-height-tight:1.1; --ct-line-height-snug:1.25; --ct-line-height-normal:1.5; --ct-line-height-relaxed:1.7;

  /* ---- Motion ---- */
  --ct-ease:cubic-bezier(0.32, 0.72, 0, 1);

  /* =====================================================
     Material aliases (InsightAndroid vocabulary)
     ===================================================== */
  --cyan:var(--ct-blue-500);
  --cyan-dark:#0092c8;
  --blue:var(--ct-navy-500);
  --red:var(--ct-red-500);
  --red-dark:var(--ct-red-600);

  /* Cool-tinted ink ramp: the site and portal read text on a tinted field, so
     pure grey looks warm there. Kept from InsightAndroid rather than mapped to
     --ct-grey-*, which is the neutral ramp the Figma file uses on white. */
  --ink:#0a0f17;
  --ink-2:#2b3542;
  --ink-3:#5c6878;
  --ink-4:#8b97a6;
  --line:rgba(10,25,50,0.09);
  --line-soft:rgba(10,25,50,0.055);

  --font-head:var(--ct-font-heading);
  --font-body:var(--ct-font-body);
  --ease:var(--ct-ease);

  /* Glass materials for site.css. Alpha carries hierarchy: the further forward a
     surface is, the more opaque it gets. */
  --field:#f4f8fc;
  --field-warm:rgba(255,255,255,0.9);
  --glass-thin:rgba(255,255,255,0.46);
  --glass:rgba(255,255,255,0.62);
  --glass-thick:rgba(255,255,255,0.78);
  --glass-edge:rgba(255,255,255,0.85);
  --glass-blur:saturate(170%) blur(22px);
  --glass-blur-lg:saturate(180%) blur(40px);
  --glass-dark:rgba(12,18,28,0.72);
  --glass-dark-edge:rgba(255,255,255,0.12);
  --shadow-sm:0 1px 2px rgba(10,25,50,0.05), 0 4px 14px -6px rgba(10,25,50,0.12);
  --shadow-md:0 1px 2px rgba(10,25,50,0.05), 0 16px 44px -16px rgba(10,25,50,0.20);
  --shadow-lg:0 2px 4px rgba(10,25,50,0.06), 0 32px 80px -24px rgba(10,25,50,0.28);
  --inner-top:inset 0 1px 0 rgba(255,255,255,0.75);
  /* Behind a dialog: the page dimmed, for the glass to blur. */
  --scrim:rgba(10,18,30,0.28);
  --r-sm:12px; --r:18px; --r-lg:24px; --r-xl:32px;
  --maxw:1180px;
  --header-h:72px;
}

/* Dark mode is defined in Figma (Color collection, Dark mode) but the public site
   ships light only for v1. The portal is light by design. Kept as a hook. */
:root[data-theme="dark"]{
  --ct-bg-page:var(--ct-grey-900);
  --ct-bg-subtle:var(--ct-grey-800);
  --ct-bg-muted:var(--ct-grey-700);
  --ct-bg-inverse:var(--ct-white-1000);
  --ct-text-primary:var(--ct-white-1000);
  --ct-text-secondary:var(--ct-grey-300);
  --ct-text-muted:var(--ct-grey-400);
  --ct-text-inverse:var(--ct-black-1000);
  --ct-border-default:var(--ct-grey-700);
  --ct-border-subtle:var(--ct-grey-800);
}

/* =========================================================
   Portal material tokens (InsightAndroid ui-next.css, layer 2).
   portal.css is scoped to html[data-ui="next"]; the admin sets that attribute.
   ========================================================= */
html[data-ui="next"]{
  --surface:#ffffff;
  --field:#f7f9fb;
  --hover:rgba(10,25,50,0.035);
  --tint:rgba(0,100,205,0.07);
  --r-panel:10px;
  --r-ctl:7px;
  --r-item:6px;
  --r-chip:5px;
  --shadow:0 1px 2px rgba(10,25,50,0.05);
  --shadow-pop:0 1px 2px rgba(10,25,50,0.06), 0 12px 32px -10px rgba(10,25,50,0.24);
  --app-font:14px;
  --app-lh:1.5;
  --pad:18px;
  --gap:14px;
  --rail-w:236px;
  --topbar-h:56px;
  --status-good:#12806a;
  --status-warn:#a9670b;
  --status-crit:var(--red-dark);
  --status-idle:var(--ink-4);
  --status-info:var(--blue);
  /* Chart series, anywhere on a page (they were only defined inside .chart): the same three as Palette.Chart. */
  --c1:#0064cd;
  --c2:#009bd0;
  --c3:#b8730a;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  /* The focus ring of a field or control, and the edge of something selected in blue. */
  --focus-ring:0 0 0 3px rgba(0,100,205,0.1);
  --blue-edge:rgba(0,100,205,0.3);
  --tint-warn:rgba(245,166,35,0.06);
  /* Text on a blue or coloured fill. */
  --on-accent:#ffffff;
  /* A scrollbar's thumb, at rest and under the pointer. */
  --scroll-thumb:rgba(10,25,50,0.22);
  --scroll-thumb-hover:rgba(10,25,50,0.38);
}

/* The page itself scrolls without a bar: by wheel, touch and keys, as everyone expects of a page.
   Everything that scrolls inside the page (a wide table, a board, a planning grid, a dialog's body, a long list)
   shows a thin bar in the tokens' colours, always there, so a table wider than a phone says that it goes on to the
   right. Hiding every bar hid exactly that: a technician saw Monday and Tuesday and nothing hinted at the rest of the
   week. A strip that scrolls as a matter of course (tabs on a phone) opts out with scrollbar-width:none (.no-scrollbar).

   WebKit and Blink draw the ::-webkit-scrollbar rules (a styled bar there is a classic one, not an overlay that fades
   away); Firefox, which has none, takes the standard properties. Setting those in Blink would switch the styled bar
   off, hence the @supports. */
html,body{scrollbar-width:none;-ms-overflow-style:none;}
html::-webkit-scrollbar,body::-webkit-scrollbar{width:0;height:0;display:none;}
*::-webkit-scrollbar{width:8px;height:8px;}
*::-webkit-scrollbar-track,*::-webkit-scrollbar-corner{background:transparent;}
*::-webkit-scrollbar-thumb{background-color:var(--scroll-thumb);background-clip:padding-box;border:2px solid transparent;border-radius:8px;}
*::-webkit-scrollbar-thumb:hover{background-color:var(--scroll-thumb-hover);}
@supports not selector(::-webkit-scrollbar){
  *{scrollbar-width:thin;scrollbar-color:var(--scroll-thumb) transparent;}
  html,body{scrollbar-width:none;}
}
.no-scrollbar{scrollbar-width:none;}
.no-scrollbar::-webkit-scrollbar{display:none;}