/* ==========================================================================
   Kinsen — design tokens
   Portable reference extracted from "Kinsen Sign In.html" and
   "Kinsen Iconography.html" (raw Claude Design exports). Plain CSS custom
   properties only — no build step, no framework.

   Every value below the "Reused from the app" line is copied byte-for-byte
   from this repo's tokens/colors.css, typography.css, spacing.css, shape.css,
   motion.css, fonts.css and base.css, because both raw exports resolved to
   those exact values (verified diff, not re-derived). The "Extensions" block
   at the bottom holds values the two exported pages actually use that are
   NOT part of that canonical set — see the accompanying report for which of
   those look like real gaps in the scale vs. one-off component math.
   ========================================================================== */

/* ---- Webfonts — same loading strategy as the app: Google Fonts for Inter /
   JetBrains Mono / Poppins (not yet self-hosted there either — see the app's
   CLAUDE.md "known gaps"), self-hosted IBM Plex Sans Arabic. ---- */

@import '/ins_web/ins_kit/css/ins_icons.css';



@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&family=Poppins:wght@500&display=swap');

@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:100;font-display:swap;src:url('../fonts/IBMPlexSansArabic-Thin.ttf') format('truetype')}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:200;font-display:swap;src:url('../fonts/IBMPlexSansArabic-ExtraLight.ttf') format('truetype')}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/IBMPlexSansArabic-Light.ttf') format('truetype')}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/IBMPlexSansArabic-Regular.ttf') format('truetype')}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/IBMPlexSansArabic-Medium.ttf') format('truetype')}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/IBMPlexSansArabic-SemiBold.ttf') format('truetype')}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/IBMPlexSansArabic-Bold.ttf') format('truetype')}

/* ============================== Reused from the app ============================== */




:root{
/* ---- Evergreen — primary / identity + interactivity, never status ---- */
--ev-50:#EDF7F1;--ev-100:#D9EDE3;--ev-200:#BDE4D1;--ev-300:#99CBB3;--ev-400:#71AD92;
--ev-500:#4E9175;--ev-600:#307459;--ev-700:#07583E;--ev-800:#08432F;--ev-900:#002D1D;--ev-950:#001A0F;
/* ---- Ink — the neutral scale, carries ~80% of every screen ---- */
--ink-25:#F7FBF9;--ink-50:#F1F6F4;--ink-100:#E5EDEA;--ink-200:#D3DBD8;--ink-300:#B6BEBB;
--ink-400:#939A97;--ink-500:#737B78;--ink-600:#56605C;--ink-700:#3E4844;--ink-800:#27302D;
--ink-900:#151E1B;--ink-950:#08100D;
--paper:#FBFCFB;--white:#FFFFFF;
/* ---- Clay — accent, under 5% of any screen ---- */
--clay-100:#FFE3C7;--clay-300:#ECAF80;--clay-500:#C07434;--clay-600:#A65907;--clay-700:#8C4500;
/* ---- Status — deliberately outside the brand ramp, higher chroma ---- */
--status-success:#007A16;--status-warning:#A96206;--status-danger:#B3261E;--status-info:#33566B;
--status-success-tint:#E8F6E7;--status-warning-tint:#FFE3C7;--status-danger-tint:#FDECEA;--status-info-tint:#EBF1F4;
--status-warning-text:#8C4500;
--status-success-border:#C9E7C6;--status-warning-border:#F2CFA6;--status-danger-border:#F3CFCB;--status-info-border:#D3E0E7;
/* ---- Data palette — six categorical hues, equal L and C in OKLCH. Use in order ---- */
--data-1:#348665;--data-2:#04848F;--data-3:#4D76AB;--data-4:#8D6197;--data-5:#A45F4D;--data-6:#86742A;
--data-single:#307459;
/* ---- Semantic: surface ---- */
--surface-canvas:var(--paper);--surface-raised:var(--white);--surface-sunken:var(--ink-50);
--surface-overlay:var(--white);--surface-brand:var(--ev-700);
--border-subtle:var(--ink-100);--border-strong:var(--ink-200);--border-control:var(--ink-500);
/* ---- Semantic: text ---- */
--text-primary:var(--ink-900);--text-secondary:var(--ink-600);--text-tertiary:var(--ink-500);
--text-on-brand:var(--white);--text-link:var(--ev-700);--text-link-hover:var(--ev-600);
/* ---- Semantic: action ---- */
--action-primary-bg:var(--ink-900);--action-primary-hover:var(--ink-800);--action-primary-active:var(--ink-700);
--action-primary-fg:var(--white);
--action-disabled-bg:var(--ink-100);--action-disabled-fg:var(--ink-400);
--action-secondary-bg:var(--white);--action-secondary-hover:var(--ink-50);--action-secondary-active:var(--ink-100);
--action-danger-bg:var(--status-danger);--action-danger-hover:#8F1E17;--action-danger-active:#741812;
--action-focus-ring:var(--ev-600);--action-selected-bg:var(--ev-50);--action-selected-edge:var(--ev-700);
--row-hover:var(--ink-25);
--selection-bg:var(--ev-200);--selection-fg:var(--ev-900);
--note-bg:#FFF6EA;--note-border:#F0D3B2;--note-accent:var(--clay-700);--note-text:var(--ink-900);
/* ---- Inverted surface — the one dark-on-light panel in light mode (toast, tooltip, promo
   card, selected filter pill). Explicit tokens because the ink ramp inverts in dark mode:
   reading --ink-900 as "dark" there gives white text on a white ground. ---- */
--surface-invert:var(--ink-900);--text-on-invert:var(--white);--border-invert:var(--ink-900);--text-on-invert-dim:var(--ink-400);
--toast-bg:var(--surface-invert);--toast-fg:var(--text-on-invert);--toast-muted:var(--text-on-invert-dim);--toast-border:transparent;
/* ---- Field v3 — sunken well, distinct from surface-sunken/border-subtle (not simple aliases) ---- */
--field-ground:var(--ink-25);--field-ground-focus:var(--white);--field-ground-disabled:var(--ink-100);
--field-border:var(--border-control);--field-border-focus:var(--ev-700);
}
[data-theme="dark"]{
color-scheme:dark;
--ink-25:#0B1310;--ink-50:#131C18;--ink-100:#1D2622;--ink-200:#2A3430;--ink-300:#3F4945;
--ink-400:#7C8582;--ink-500:#939A97;--ink-600:#AEB6B3;--ink-700:#CBD3D0;--ink-800:#E1E9E6;
--ink-900:#F0F5F3;--ink-950:#FBFCFB;
--paper:#08100D;
--ev-50:#0C231A;--ev-100:#103023;--ev-200:#17422F;--ev-300:#2E6449;--ev-400:#71AD92;
--ev-500:#8CC4A8;--ev-600:#A5D3BC;--ev-700:#7FC2A2;--ev-800:#08432F;--ev-900:#002D1D;--ev-950:#001A0F;
--clay-100:#33230F;--clay-300:#ECAF80;--clay-500:#D3945B;--clay-600:#E0A66E;--clay-700:#EFC099;
--status-success:#5FC36A;--status-warning:#D9922F;--status-danger:#E2635A;--status-info:#8FB4C9;
--status-success-tint:#0E2A12;--status-warning-tint:#31220C;--status-danger-tint:#331512;--status-info-tint:#14242C;
--status-warning-text:#E0A66E;
--status-success-border:#1E4522;--status-warning-border:#46331A;--status-danger-border:#4A2320;--status-info-border:#22394A;
--data-1:#57B78D;--data-2:#3FAFB8;--data-3:#7BA1D3;--data-4:#B48CBD;--data-5:#CA8B77;--data-6:#B0A055;
--data-single:#57B78D;
--surface-canvas:#08100D;--surface-raised:#121A17;--surface-sunken:#050B09;
--surface-overlay:#1A2320;--surface-brand:#07583E;
--border-subtle:#232C29;--border-strong:#333D39;--border-control:#5A6360;
--text-primary:#F0F5F3;--text-secondary:#AEB6B3;--text-tertiary:#8A9390;
--text-on-brand:#FFFFFF;--text-link:#7FC2A2;--text-link-hover:#A5D3BC;
--action-primary-bg:#F0F5F3;--action-primary-hover:#FFFFFF;--action-primary-active:#D3DBD8;
--action-primary-fg:#08100D;
--action-secondary-bg:#121A17;--action-secondary-hover:#1D2622;--action-secondary-active:#2A3430;
--action-disabled-bg:#1D2622;--action-disabled-fg:#6E7773;
--action-danger-bg:#C4392F;--action-danger-hover:#D24A40;--action-danger-active:#A32A22;
--action-focus-ring:#71AD92;--action-selected-bg:#0F2E22;--action-selected-edge:#7FC2A2;
--row-hover:#161F1B;
--selection-bg:#17422F;--selection-fg:#F0F5F3;
--note-bg:#241A10;--note-border:#40301C;--note-accent:#EFC099;--note-text:#F0F5F3;
/* Inverted surfaces cannot invert again in dark mode — they become raised panels with a hairline */
--surface-invert:#1F2A26;--text-on-invert:#F0F5F3;--border-invert:#333D39;--text-on-invert-dim:#8A9390;
--toast-bg:var(--surface-invert);--toast-fg:var(--text-on-invert);--toast-muted:var(--text-on-invert-dim);--toast-border:var(--border-invert);
--shadow-raised:0 1px 2px rgba(0,0,0,.5),0 1px 3px rgba(0,0,0,.35);
--shadow-overlay:0 8px 28px rgba(0,0,0,.55);
--field-ground:#1D2622;--field-ground-focus:#26312D;--field-ground-disabled:#2A3430;
--field-border:var(--border-control);--field-border-focus:var(--ev-700);
}
::selection{background:var(--selection-bg);color:var(--selection-fg)}

:root{
--font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
--font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
--font-wordmark:'Poppins','Inter',sans-serif; /* logo lockups only — never UI text */
--font-arabic:'IBM Plex Sans Arabic','Inter',sans-serif;
--arabic-size-scale:1.10;
--arabic-line-height-scale:1.15;
--fw-regular:400;--fw-medium:500;--fw-semibold:600;

--text-display-size:56px;--text-display-lh:60px;--text-display-ls:-0.04em;--text-display-weight:600;
--text-h1-size:40px;--text-h1-lh:46px;--text-h1-ls:-0.032em;--text-h1-weight:600;
--text-h2-size:30px;--text-h2-lh:38px;--text-h2-ls:-0.028em;--text-h2-weight:600;
--text-h3-size:22px;--text-h3-lh:30px;--text-h3-ls:-0.02em;--text-h3-weight:600;
--text-lede-size:19px;--text-lede-lh:30px;--text-lede-ls:-0.014em;--text-lede-weight:400;
--text-body-size:16px;--text-body-lh:26px;--text-body-ls:-0.006em;--text-body-weight:400;
--text-small-size:14px;--text-small-lh:22px;--text-small-ls:0;--text-small-weight:400;
--text-caption-size:12.5px;--text-caption-lh:18px;--text-caption-ls:0.005em;--text-caption-weight:400;
--text-label-size:11px;--text-label-lh:14px;--text-label-ls:0.12em;--text-label-weight:500;
--measure-prose:680px;
}

:root{
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;
--space-8:32px;--space-12:48px;--space-20:80px;--space-30:120px;
--grid-columns:12;--grid-gutter:24px;--content-max:1200px;--container-max:1440px;
--pane-list:260px;--pane-context:320px;
--bp-sm:640px;--bp-md:900px;--bp-lg:1280px;--bp-xl:1600px;
--control-h-lg:44px;--control-h-md:36px;--control-h-sm:28px;
--field-h:40px;--field-h-compact:32px;--field-h-lg:48px;
--row-h-comfortable:44px;--row-h-compact:36px;--row-h-two-line:52px;
--touch-target:44px;
}

:root{
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-full:999px;
--shadow-raised:0 1px 2px rgba(8,16,13,.06),0 1px 3px rgba(8,16,13,.04);
--shadow-overlay:0 8px 28px rgba(8,16,13,.12);
--focus-ring-width:2px;--focus-ring-offset:2px;
--thread-stroke:1.5px;--thread-stroke-dense:1px;--thread-radius:28px;
}

:root{
--duration-state:120ms;--duration-enter:200ms;--duration-panel:280ms;
--ease-standard:cubic-bezier(.2,0,0,1);
--move-max:8px;--scale-press:0.98;--draw-mark:900ms;
}
@media (prefers-reduced-motion:reduce){
:root{--duration-state:0ms;--duration-enter:0ms;--duration-panel:0ms;--draw-mark:0ms;--move-max:0px;--scale-press:1;}
}

/* Base element styles — ported from tokens/base.css. This reference has no
   separate base.css slot, so global element rules live here alongside the
   variables they consume. */
body{background:var(--surface-canvas);color:var(--text-primary);font-family:var(--font-sans);
font-size:var(--text-body-size);line-height:var(--text-body-lh);letter-spacing:var(--text-body-ls);
font-weight:var(--fw-regular);-webkit-font-smoothing:antialiased}
a{color:var(--text-link);text-decoration:none;/*border-bottom:1px solid var(--ev-200)*/}
a:hover{color:var(--text-link-hover);border-bottom-color:currentColor}
:focus-visible{outline:var(--focus-ring-width) solid var(--action-focus-ring);outline-offset:var(--focus-ring-offset)}
code,kbd,samp{font-family:var(--font-mono)}
table{font-variant-numeric:tabular-nums}
@keyframes kinsen-spin{to{transform:rotate(360deg)}}

/* ============================== Extensions ==============================
   Values the two raw exports actually use that are NOT in tokens/*.css.
   Kept as named variables (per the "every value must reference a variable"
   rule) but visually separated so their origin is never ambiguous. Most are
   one-off arithmetic from a component's own render logic (e.g. Logo scales
   its wordmark to size*0.78); a few are genuine gaps in the 4pt spacing
   scale or the type scale — flagged individually in the extraction report.
   ========================================================================== */
:root{
/* off-scale spacing (the app's --space-* scale has no 5,6,7,9,10,14,18,20,22,36,72) */
--ext-space-1:1px;--ext-space-5:5px;--ext-space-6:6px;--ext-space-7:7px;--ext-space-9:9px;
--ext-space-10:10px;--ext-space-14:14px;--ext-space-18:18px;--ext-space-20:20px;
--ext-space-22:22px;--ext-space-36:36px;--ext-space-72:72px;
/* off-scale type (the app's type scale has no 9, 9.5, 10, 10.5, 12, 13, 13.5, 14.5, 15, 20, 24) */
--ext-font-9:9px;--ext-font-9-5:9.5px;--ext-font-10:10px;--ext-font-10-5:10.5px;
--ext-font-12:12px;--ext-font-13:13px;--ext-font-13-5:13.5px;--ext-font-14-5:14.5px;
--ext-font-15:15px;--ext-font-15-5:15.5px;--ext-font-20:20px;--ext-font-24:24px;
--ext-ls-024:-0.024em;--ext-ls-09:.09em;
/* one-off measures */
--ext-measure-form:340px;--ext-measure-380:380px;--ext-measure-420:420px;
/* Sign In code-entry box */
--ext-code-w:46px;--ext-code-h:52px;
/* Button loading spinner spin duration — not one of the app's motion durations */
--ext-duration-spin:700ms;
/* white-on-Evergreen, 72% opacity — the thread line and lede copy on the brand panel */
--ext-color-on-brand-72:rgba(255,255,255,.72);
/* Logo horizontal lockup at size 26 (gap = size*0.3, wordmark size = size*0.78) */
--ext-logo-gap:7.8px;--ext-logo-word-size:20.28px;
/* Iconography swatch/ramp utilities (ported, not exercised by this particular page) */
--ext-swatch-h:58px;--ext-swatch-chip-h:56px;
}

/* ============================== Extensions — Users & access levels ==============================
   Same rule as above: values ui_kits/product/users.html + Users.jsx + AccessLevels.jsx actually use
   that aren't in tokens/*.css. Shared magnitudes (13, 13.5, 6, 9, 10, 14, 20 …) reuse the --ext-*
   vars already defined above rather than being redefined. One-off magnitudes that only ever occur
   once on this page are named for what they are (e.g. --ext-avatar-size) instead of by number,
   since a second occurrence elsewhere would be a coincidence, not a reason to share the variable.
   ========================================================================== */
:root{
/* off-scale spacing new to this page */
--ext-space-11:11px;--ext-space-60:60px;
/* off-scale type new to this page (table header caps reuse the existing --ext-font-10) */
--ext-font-17:17px;--ext-font-18:18px;--ext-font-19:19px;
--ext-ls-1:.1em; /* table header caps tracking — close to but not --text-label-ls (.12em) */

/* Select chevron gutter */
--ext-select-chevron-gutter:34px;

/* Page header bar (Users / Access levels / Level form) */
--ext-header-h:56px;

/* Table column widths */
--ext-col-name:var(--pane-list); /* 260px — exact match to the existing --pane-list token */
--ext-col-org:120px;--ext-col-level:110px;--ext-col-status:96px;--ext-col-seen:116px;--ext-col-actions:96px;
--ext-table-max:1060px;

/* User avatar */
--ext-avatar-size:30px;--ext-avatar-font:11.5px;--ext-avatar-ls:.02em;

/* Filter toolbar */
--ext-search-min:220px;--ext-select-level-w:150px;--ext-select-status-w:140px;

/* Kebab menu */
--ext-menu-w:210px;

/* Dialog widths actually used (UserForm step1/step2, Revoke, Delete) */
--ext-dialog-w-460:460px;--ext-dialog-w-480:480px;--ext-dialog-w-520:520px;

/* Empty state */
--ext-empty-max:460px;

/* Access-level cards */
--ext-level-card-min:300px;--ext-level-card-min-form:280px;--ext-level-name-size:15px;
--ext-level-badge-size:11px;

/* Permission matrix */
--ext-perm-col-w:74px;--ext-perm-indent:22px;--ext-perm-chevron-w:30px;--ext-perm-chevron-h:34px;

/* Restrictions / category checklist */
--ext-category-max-h:168px;
/* "Copy from another level" select */
--ext-measure-190:190px;
}

/* ============================== Extensions — AI agents ==============================
   Same rule as the two blocks above: values ui_kits/product/agents.html + AiAgents.jsx +
   AgentEditor.jsx + AgentActionPage.jsx + AgentLog.jsx + AgentTest.jsx + TokenField.jsx
   actually use that aren't in tokens/*.css. Reuses this file's existing --ext-* vars for
   every magnitude that already has one (13, 13.5, 20, 22, space-6, font-10 …).
   ========================================================================== */
:root{
/* off-scale spacing new to this page */
--ext-space-2:2px;--ext-space-13:13px;--ext-space-64:64px;
/* off-scale type new to this page (11 reuses --text-label-size, 12.5 reuses
   --text-caption-size, 14 reuses --text-small-size — no new token needed for those) */
--ext-font-14-25:14.5px; /* alias kept distinct from --ext-font-14-5 only to self-document call sites; same value */
--ext-ls-005:.005em;--ext-ls-14:.14em;--ext-ls-06:.06em;

/* Layout measures */
--ext-measure-108:108px;--ext-measure-240:240px;--ext-measure-300:300px;--ext-measure-260:260px;--ext-measure-330:330px;--ext-measure-640:640px;
--ext-measure-1040:1040px;--ext-measure-1080:1080px;
--ext-toggle-w:28px;--ext-toggle-h:24px;
--ext-mark-38:38px;--ext-mark-34:34px;--ext-mark-28:28px;--ext-mark-26:26px;

/* Badge / Toast / Tooltip */
--ext-badge-h:22px;--ext-toast-w:360px;

/* Promo carousel (dark card) */
--ext-promo-circle-1:260px;--ext-promo-circle-2:180px;
--ext-color-hairline-on-dark-1:rgba(255,255,255,.07);--ext-color-hairline-on-dark-2:rgba(255,255,255,.06);
--ext-color-fill-on-dark:rgba(255,255,255,.09);--ext-color-border-on-dark:rgba(255,255,255,.28);
--ext-color-track-on-dark:rgba(255,255,255,.26);
--ext-dot-active-w:18px;--ext-dot-size:6px;

/* Pill tabs (agent-list status filter, activity-log outcome filter) */
--ext-pill-gap:4px;

/* Sections (AgentEditor / AgentActionPage bordered blocks) reuse --ext-space-14/18 from
   the users-page panel already defined; sidebar rail width is new: */
--ext-sidebar-w:320px;--ext-sidebar-w-wide:340px;

/* Connected-action method chip */
--ext-method-fs:10px; /* same as --ext-font-10, aliased for readability at call sites */

/* TokenField */
--ext-tokenfield-min-h:96px;--ext-tokenfield-menu-w:320px;--ext-tokenfield-menu-h:280px;
--ext-focus-ring-tint:color-mix(in oklch, var(--action-focus-ring) 22%, transparent);

/* Test panel chat */
--ext-chat-min-h:320px;--ext-chat-bubble-max:86%;

/* Sample-call preview code block */
--ext-code-fs:11.5px;--ext-code-lh:1.7;

/* Cleanup pass — small values used in this and the previous (Users) section
   that were written as literals instead of variables; consolidated here. */
--ext-space-3:3px;--ext-space-17:17px;--ext-space-40:40px;--ext-measure-168:168px;
--ext-font-11-5:11.5px;
--ext-rail-w:56px;--ext-topbar-h:52px;--ext-rail-collapsed-w:52px;
--ext-measure-60:60px;--ext-measure-100:100px;--ext-measure-120:120px;--ext-measure-140:140px;--ext-measure-150:150px;--ext-measure-170:170px;--ext-measure-200:200px;--ext-measure-1000:1000px;
--ext-col-agent-name:34%;
--ext-offset-neg-20:-20px;--ext-offset-neg-40:-40px;--ext-offset-neg-60:-60px;
}

/* Auto-tokenized literals from the inbox CSS pass */
:root{

--ext-measure-16:16px;--ext-measure-20:20px;--ext-measure-34:34px;
}

/* Auto-tokenized literals from the inbox CSS pass, round 2 */
:root{
--ext-space-28:28px;--ext-space-34:34px;
--ext-measure-3:3px;--ext-measure-6:6px;--ext-measure-7:7px;--ext-measure-8:8px;--ext-measure-9:9px;--ext-measure-14:14px;--ext-measure-17:17px;--ext-measure-18:18px;--ext-measure-19:19px;--ext-measure-22:22px;--ext-measure-24:24px;--ext-measure-26:26px;--ext-measure-28:28px;--ext-measure-30:30px;--ext-measure-32:32px;--ext-measure-36:36px;--ext-measure-38:38px;--ext-measure-44:44px;--ext-measure-56:56px;--ext-measure-78:78px;--ext-measure-104:104px;--ext-measure-132:132px;--ext-measure-214:214px;--ext-measure-220:220px;--ext-measure-244:244px;--ext-measure-246:246px;--ext-measure-280:280px;--ext-measure-288:288px;--ext-measure-320:320px;--ext-measure-340:340px;--ext-measure-344:344px;--ext-measure-400:400px;--ext-measure-460:460px;--ext-measure-520:520px;--ext-measure-560:560px;
}

/* ============================== Extensions — Workflows ==============================
   Values ui_kits/product/workflows.html + Workflows.jsx + WorkflowEditor.jsx actually
   use that aren't in tokens/*.css. Most magnitudes here already have an --ext-* var from
   an earlier page (9, 14, 16→space-4, 18, 22, 26, 28, 30, 40, 60, 140, 240, 420, 640 …)
   and are reused directly rather than redefined — see the extraction report.
   ========================================================================== */
:root{
--ext-measure-86:86px;--ext-measure-88:88px;--ext-measure-252:252px;--ext-measure-360:360px;
--ext-radius-3:3px; /* the branch-label pill's own radius — distinct from --radius-sm (4px) */
--ext-radius-6:6px; /* step icon chips' own radius — also distinct from --radius-sm/md */
--ext-font-11:11px; /* PlanPill's own label size */
--ext-font-12-5:12.5px; /* UsageRow/LimitLine's compact label size */
--ext-dialog-w-860:860px; /* PlanSheet's compare-plans width */
}

/* ============================== Extensions — Gating ==============================
   Values ui_kits/product/Gating.jsx + planData.js actually use that aren't in
   tokens/*.css. Everything else the gating pieces need (space-1/2/4, ext-space-3/5/6/
   7/9/10/13/14, ext-font-10/12/13/13-5/14-5, ext-measure-6/8/9/38, radius-full,
   status-* / clay-* / ev-*, duration-panel + ease-standard) was already covered by the
   base tokens or an earlier page's --ext-* additions and is reused directly.
   (--ext-font-11 / --ext-font-12-5 / --ext-dialog-w-860 declared above, merged into
   the Workflows block above — this file has a dedicated :root block per page but a
   parser issue silently dropped one placed here on its own, so the 3 declarations
   were relocated into an adjacent block confirmed to parse.)
   ========================================================================== */

/* ============================== Extensions — Settings ==============================
   Values ui_kits/product/Settings.jsx + ChannelDetail.jsx + ApiTokens.jsx +
   TemplateComposer.jsx + MediaLibrary.jsx actually use that aren't in tokens/*.css.
   Most magnitudes here already have an --ext-* var from an earlier page and are
   reused directly — see the extraction report.
   ========================================================================== */
:root{
--ext-dialog-w-560:560px;
--ext-measure-680:680px;--ext-measure-700:700px;--ext-measure-620:620px;--ext-measure-900:900px;
--ext-measure-232:232px;--ext-measure-258:258px;--ext-measure-212:212px;--ext-measure-116:116px;
--ext-measure-48:48px;--ext-measure-74:74px;--ext-measure-40:40px;--ext-measure-42:42px;--ext-measure-54:54px;
--ext-measure-110:110px;--ext-measure-15:15px;--ext-measure-90:90px;--ext-measure-92:92px;
--ext-font-14:14px;--ext-font-16:16px;--ext-font-22:22px;--ext-font-23:23px;
--ext-space-26:26px;--ext-space-30:30px;--ext-space-80:80px;
--ext-ls-08:.08em;
}

/* ============================== Extensions — Bulk operations ==============================
   Values ui_kits/product/BulkOperations.jsx actually uses that aren't in
   tokens/*.css. Everything else (space-3/4/6/8, ext-space-3/5/6/9/10/13/14/18/60,
   ext-measure-6/16/220/1040, ext-header-h, ext-font-11/12-5/13-5) was already
   covered and is reused directly.
   ========================================================================== */
:root{
--ext-font-26:26px; /* the match-count number */
--ext-measure-46:46px; /* operation-row field indent, lining up with the radio + icon above it */
--ext-measure-180:180px;
}

/* ============================== Extensions — Guideline cards ==============================
   Values guidelines/*.html actually use that aren't in tokens/*.css. Most
   magnitudes here already have an --ext-* var from an earlier page and are
   reused directly — see the guidelines-folder report.
   ========================================================================== */
:root{
--ext-font-8-5:8.5px;--ext-font-28:28px;--ext-font-34:34px;--ext-font-32:32px;
--ext-measure-58:58px;--ext-measure-64:64px;--ext-measure-80:80px;--ext-measure-84:84px;
--ext-measure-148:148px;--ext-measure-660:660px;
--ext-space-44:44px;--ext-space-48:48px;--ext-space-96:96px;
--ext-radius-10:10px; /* the ground demo's message-bubble corner */
--ext-font-38:38px; /* the Arabic H1 sample */
}

/* ============================== Extensions — Contacts + Customer record ==============================
   Values ui_kits/product/Contacts.jsx + CustomerRecord.jsx actually use that
   aren't in tokens/*.css. Everything else (space-1/2/3/4/6/8, ext-space-3/4/5/
   6/7/9/10/13/14/18/20/22/28/30/34, ext-measure-6/22/30/48/108/190/232/240/300/
   320, ext-font-10-5/11/11-5/12-5/13-5) was already covered and is reused
   directly. Frozen-column pixel offsets (44/268/84) are Contacts' own
   structural layout math, not tokenized — see the file header comment.
   ========================================================================== */
:root{
--ext-measure-96:96px; /* Field label column in CustomerRecord's detail rows */
--ext-measure-230:230px; /* expanded-row field group min-width */
--ext-measure-118:118px; /* expanded-row label column */
--ext-shadow-scroll-right:10px 0 12px -8px rgba(21,30,27,.16); /* frozen-name column's scroll shadow */
--ext-shadow-scroll-left:-10px 0 12px -8px rgba(21,30,27,.14); /* frozen actions column's scroll shadow */
}

/* ============================== Extensions — Onboarding ==============================
   Values ui_kits/product/Onboarding.jsx actually uses that aren't in
   tokens/*.css. Everything else (space-1/3/4/6/8, ext-space-3/6/9/10/12/13/14/
   18/20/22/26/28/40/72, ext-measure-22/26/520/1000, ext-font-11/11-5/12/13/
   13-5/15, ext-ls-08) was already covered and is reused directly.
   ========================================================================== */
:root{
--ext-font-30:30px; /* the page h1 */
--ext-measure-236:236px; /* the aside column width */
--ext-space-56:56px; /* the main/aside grid gap */
}

/* ============================== Extensions — ChoiceSet ==============================
   Values components/data/ChoiceSet.jsx actually uses that aren't in
   tokens/*.css. Everything else (space-2, ext-space-5/6/7/9, ext-font-10/
   10-5/12-5/13-5, ext-ls-06, radius-sm, ev-100/300, border-control,
   border-subtle, text-link, text-tertiary, text-primary, bubble-rule) was
   already covered and is reused directly.
   ========================================================================== */
:root{
--ext-measure-12:12px; /* the row index column width */
}

/* ============================== Extensions — Lifecycle ==============================
   Values ui_kits/product/Lifecycle.jsx actually uses that aren't in tokens/*.css.
   Everything else (space-1/2/3/4, ext-space-7/9/14/18/26/34, ext-measure-20/22/24/
   26/28/34/84/92/104/168/232/520/620, ext-font-11/11-5/12-5/13-5, ext-ls-08,
   radius-sm/md, ev-50/600, ink-25/400/900, status-success/warning, border-subtle,
   shadow-overlay, font-mono) was already covered and is reused directly.
   ========================================================================== */
:root{
--ext-measure-10:10px; /* the colour swatch chip height */
}

/* ============================== Extensions — Sign-up ==============================
   Values ui_kits/product/SignUp.jsx and SignUpV2.jsx actually use that aren't in
   tokens/*.css. Everything else (space-1/2/3/4/8, ext-space-3/10/13/14/18/20/22/
   28/40/72, ext-measure-15/92/96/380/400, ext-font-11/11-5/12-5/13-5/14/15/22,
   ext-ls-024/08, radius-sm/md/full, ev-700, ease-standard) was already covered
   and is reused directly. Both pages' h1 ("Create your workspace", 30px/-0.028em/
   600) is an exact match for --text-h2-size/-ls/-weight — reuses .signin__title
   rather than a new class.
   ========================================================================== */
:root{
--ext-measure-440:440px; /* the workspace preview card */
/* white-on-Evergreen at the opacities the brand-panel preview card actually
   uses (72% already covered by --ext-color-on-brand-72) */
--ext-color-on-brand-06:rgba(255,255,255,.06);
--ext-color-on-brand-12:rgba(255,255,255,.12);
--ext-color-on-brand-16:rgba(255,255,255,.16);
--ext-color-on-brand-18:rgba(255,255,255,.18);
--ext-color-on-brand-42:rgba(255,255,255,.42);
--ext-color-on-brand-50:rgba(255,255,255,.5);
--ext-color-on-brand-60:rgba(255,255,255,.6);
--ext-color-on-brand-66:rgba(255,255,255,.66);
--ext-color-on-brand-92:rgba(255,255,255,.92);
/* preview-row fill transitions and the password-strength bars — not one of
   the app's motion durations (--duration-state is 120ms) */
--ext-duration-260:260ms;--ext-duration-200:200ms;
/* SignUpV2's local floating-label field shell (shellStyle/FloatLabel) — its
   own 160ms transition speed, plus letter-spacing/padding values distinct
   from every value already covered above. Reuses ext-measure-118/280/320
   (already on the scale) for the field-width props, and --duration-state
   (120ms) for the input-reveal opacity fade. */
--ext-space-21:21px;
--ext-duration-160:160ms;
--ext-ls-n005:-0.005em;--ext-ls-n01:-0.01em;
--ext-measure-264:264px;
/* Field v3 (form-elements.html / signup-v3.html) — the listbox's own open-animation
   speed, distinct from every --ext-duration-* above */
--ext-duration-140:140ms;
}

/* ============================== Extensions — Field v3 extras ==============================
   form-elements.html's multi-select/date-time popover tracking and width —
   FieldExtras.jsx's own 0.04em letter-spacing and 272px popover, distinct
   from every --ext-ls-* / --ext-measure-* above. */
:root{
--ext-ls-04:.04em;
--ext-measure-272:272px;
}