/* =====================================================================
   FedisDNA tokens.css - the ONLY file of the app where raw values live.
   Part 1 (below, down to "END OF THE BRANDBOOK BLOCK") is the token block of
   C:shareFedisGraphicsBrandbookFEDIS-BRANDBOOK-V2.html lines 17-399,
   copied and adapted for FEDISMINUTE: local font URLs, the app palette,
   the four in-app font weights, and the QR size. Fonts ship in static/fonts.
   Part 2 maps the two app themes onto <html data-theme="light|dark">.
   Part 3 holds the few values the Brandbook has no token for.
   ===================================================================== */
@font-face{font-family:'Chillax'; src:url('../fonts/Chillax-200.woff2') format('woff2'); font-weight:200; font-display:swap;}
@font-face{font-family:'Chillax'; src:url('../fonts/Chillax-300.woff2') format('woff2'); font-weight:300; font-display:swap;}
@font-face{font-family:'Chillax'; src:url('../fonts/Chillax-400.woff2') format('woff2'); font-weight:400; font-display:swap;}
@font-face{font-family:'Chillax'; src:url('../fonts/Chillax-500.woff2') format('woff2'); font-weight:500; font-display:swap;}

:root{
  /* Minute table dimensions from the old editor's colgroup. */
  --minute-handle-w:24px; --minute-subject-w:240px; --minute-description-w:240px;
  --minute-owner-w:150px; --minute-deadline-w:120px; --minute-status-w:120px;
  --minute-notes-w:210px; --minute-tools-w:176px;
  --minute-info-label-w:150px; --minute-info-row-h:45px;   /* meeting header: label column and row height, same as a table row */
  --minute-vote-w:120px; --minute-label-w:110px;
  --qr-size:192px;
  /* Exact green/teal fills in brand/default/FedisMinute.svg. */
  --logo-minute-1:#a7c7bf; --logo-minute-2:#92aea8; --logo-minute-3:#7d9792;
  --qr-ink:linear-gradient(135deg, var(--logo-minute-1), var(--logo-minute-2), var(--logo-minute-3));
  /* ---- primitive palette (color1.PNG / color2.PNG) ---- */
  --fedisblue1:#52707f;   --fedisblue2:#15202a;   --fedisblue3:#091318;
  --fedissand1:#f5f5f0;   --fedissand2:#e6e1d7;   --fedissand3:#d7d2c3;
  --fedisgray1:#454545;   --fedisgray2:#2b2b2b;   --fedisgray3:#212121;
  --fediswhite1:#ffffff;  --fediswhite2:#f0f0f0;  --fediswhite3:#e0e0e0;
  --fedisgreen1:#7dffaf;  --fedisgreen2:#32ff87;  --fedisgreen3:#00ff69;
  --fedispurple1:#a569ff; --fedispurple2:#8732ff; --fedispurple3:#6900ff;
  --fedisgold1:#f0cd6e;   --fedisgold2:#f0c850;   --fedisgold3:#f5be2d;

  /* ---- typography: Chillax only ---- */
  --font:'Chillax', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-email:Arial, Helvetica, sans-serif;   /* email signature export only: mail clients do not load web fonts */
  --fw-extralight:200; --fw-light:300; --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;
  --fw-wordmark:500; --auth-wizard-w:560px; --terms-max-h:45vh;
  --brand-preview-light:var(--fedissand1); --brand-preview-dark:var(--fedisgray2);
  --fw-menu-title:var(--fw-medium);   /* the one Medium inside the app: a menu's main title (resolved here, so the app's cap at Regular does not reach it) */
  --figures-tabular:tabular-nums;
  --tt-label:uppercase;

  /* type scale: size / line-height / letter-spacing / weight per role */
  --fs-display:clamp(56px, 9vw, 144px);  --lh-display:0.95; --ls-display:-0.045em; --fw-display:var(--fw-medium);
  --fs-h1:clamp(36px, 4.6vw, 68px);      --lh-h1:1.05;      --ls-h1:-0.03em;       --fw-h1:var(--fw-medium);
  --fs-h2:clamp(30px, 3.6vw, 52px);      --lh-h2:1.1;       --ls-h2:-0.02em;       --fw-h2:var(--fw-light);
  --fs-h3:clamp(22px, 2.1vw, 30px);      --lh-h3:1.2;       --ls-h3:-0.01em;       --fw-h3:var(--fw-medium);
  --fs-h4:clamp(18px, 1.5vw, 21px);      --lh-h4:1.3;       --ls-h4:0em;           --fw-h4:var(--fw-medium);
  --fs-body-l:clamp(17px, 1.35vw, 21px); --lh-body-l:1.5;   --ls-body-l:0em;       --fw-body-l:var(--fw-light);
  --fs-body:16px;                        --lh-body:1.55;    --ls-body:0em;         --fw-body:var(--fw-light);
  --fs-small:14px;                       --lh-small:1.5;    --ls-small:0.005em;    --fw-small:var(--fw-regular);
  --fs-caption:13px;                     --lh-caption:1.45; --ls-caption:0.01em;   --fw-caption:var(--fw-regular);
  --fs-label:12px;                       --lh-label:1.3;    --ls-label:0.18em;     --fw-label:var(--fw-regular);
  --fs-num:clamp(36px, 4.4vw, 64px);     --lh-num:1;        --ls-num:-0.02em;      --fw-num:var(--fw-light);
  --fs-mono:13px;                        --lh-mono:1.7;     --ls-mono:0.02em;      --fw-mono:var(--fw-regular);
  /* fixed sizes inside the app mockup (it is drawn at true pixel size, then scaled) */
  --fs-app-title:34px; --fs-app-kpi:44px; --fs-app-h:18px; --fs-app-total:24px; --fs-app-title-s:26px;
  --lh-relaxed:1.6; --lh-tight:1.15;

  /* ---- spacing: 4px base ---- */
  --space-0:0px;  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;
  --space-section:clamp(64px, 10vw, 128px);
  --gutter:clamp(16px, 4vw, 64px);
  --pad-hero:clamp(24px, 4vw, 64px);

  /* ---- layout ---- */
  --content-max:1200px;
  --measure:62ch;
  --rail-w:64px;
  --grid-cols:12; --grid-gap:var(--space-5);
  --col-min-xs:120px; --col-min-sm:180px; --col-min-md:260px; --col-min-lg:340px;
  --bp-mobile:45em;   /* documentation only: media queries cannot read tokens, they use the same 45em */

  /* ---- radii ---- */
  --radius-2xs:2px; --radius-xs:6px; --radius-sm:8px; --radius-md:12px; --radius-lg:16px;
  --radius-xl:24px; --radius-2xl:32px; --radius-device:48px; --radius-phone:56px; --radius-pill:999px;

  /* ---- borders ---- */
  --bw-hair:1px; --bw-strong:2px; --bw-focus:2px; --focus-offset:2px;
  --mark-size:4px;           /* the small square in front of kickers */
  --dot-size:0.13em; --dot-gap:0.05em;   /* the brand dot in front of the cover title */

  /* ---- blur (glass) ---- */
  --blur-sm:8px; --blur-md:16px; --blur-lg:32px;

  /* ---- motion ---- */
  --dur-instant:80ms; --dur-fast:150ms; --dur-base:240ms; --dur-slow:480ms;
  --dur-reveal:1000ms; --dur-hairline:1400ms; --dur-spin:800ms; --dur-loop:1600ms;
  --ease-standard:cubic-bezier(.2, .7, .1, 1);
  --ease-out:cubic-bezier(.16, 1, .3, 1);
  --ease-in-out:cubic-bezier(.65, 0, .35, 1);
  --ease-linear:linear;
  --toast-time:3200ms;
  --motion-shift:24px;
  --press-shift:1px;
  --stagger:120ms;

  /* ---- icons ---- */
  --icon-size-sm:16px; --icon-size:24px; --icon-size-lg:32px; --icon-stroke:1;   /* px at every size: the line does not scale with the icon */
  --icon-stroke-bold:1.6;   /* a rail icon whose menu is open: a slightly stronger line */
  --icon-corner:1.2;   /* every sharp corner of an icon gets this small curve (units of the 24 grid) */
  --icon-specimen:192px;

  /* ---- logo ---- */
  --logo-cover:clamp(160px, 24vw, 340px);
  --logo-rail:28px;
  --logo-inline:22px;
  --logo-hero:clamp(120px, 16vw, 200px);
  --logo-module-ratio:0.3125;   /* one rounded square = 5/16 of the mark width */
  --logo-gap-ratio:0.03125;     /* the gap between squares = 1/32 of the mark width = 0.1 module */
  --logo-clear-ratio:0.15625;   /* clear space = half a module on every side */
  --logo-min-screen:24px; --logo-min-print:7mm; --logo-favicon:16px;
  --bad-stretch:1.45; --bad-rotate:14deg;
  --bad-effect:drop-shadow(0 10px 8px color-mix(in srgb, var(--fedisgray3) 55%, transparent)) drop-shadow(0 0 18px var(--fedisgold2));

  /* ---- components ---- */
  --control-h-s:32px; --control-h-m:40px; --control-h-l:48px;
  --switch-w:40px; --switch-h:24px; --switch-knob:18px; --check:18px; --modal-pad:var(--space-6); --card-pad:var(--space-5); --spinner:16px;
  --avatar-s:28px; --avatar-m:36px; --avatar-l:48px;
  --badge-count:18px; --progress-h:6px; --glow-blur:28px; --glow-width:1.5px;
  --modal-w:440px; --menu-w:220px; --toast-w:340px; --scroll-card-h:180px; --signature-w:600px; --signature-h:200px; --chart-h:150px; --code-gutter:28px;
  --tab-indicator:2px;

  /* ---- app mockup shell ---- */
  --mock-w:1440px; --mock-h:900px; --phone-w:390px; --phone-h:844px;
  --tabl-w:1180px; --tabl-h:820px; --tabp-w:820px; --tabp-h:1180px;   /* tablet: landscape, portrait */
  --stage-max-h:900px;   /* a mockup is scaled down so it is never taller than this on the book page */
  --tap:44px;   /* touch: the smallest tap target */
  --bp-panel-m:900px; --bp-panel-s:640px;   /* the page narrower than these (tablet, agent open): its layouts reflow (read by the engine) */
  --island-w-tab:520px; --pane-list-w-m:280px; --pane-ctrl-w-m:280px; --chat-hist-w:280px; --chat-measure:760px; --sheet-max-h:88%; --auth-mark-s:56px; --grip-hit:44px;
  --frame-gap:8px; --app-rail-w:64px; --app-rail-item:44px; --tabbar-h:60px;
  --island-h:44px; --island-w:600px;   /* the top island (search / command) */
  --app-switch-w:32px; --app-switch-h:18px; --app-switch-knob:10px; --app-dot:6px; --chart-h-app:230px;
  --dock-w:56px; --dock-item:40px; --dock-fillet:20px; --aa:0.5px; --agent-panel-w:360px;   /* the action dock on the frame */
  --scroll-thumb-w:3px; --scroll-thumb-w-hover:6px; --scroll-gutter:14px; --mask:#000; --scroll-thumb-len:12px; --scroll-hit-w:16px; --scroll-dot:22px;   /* the panel's scroll track: the fade towards the menus */
  --pane-list-w:360px; --pane-ctrl-w:340px; --editor-measure:68ch; --cell-h:36px; --cell-w-s:88px; --cell-w-m:150px; --grid-min-w:2000px; --fly-w:280px; --auth-form-w:360px; --auth-mark:120px; --auth-lang-w:150px; --agent-pane-w:440px; --line-modal-w:640px; --grip-dot:3px; --grip-gap:1.5px; --agent-think:900ms; --clock-tick:1000ms; --settle:40ms;   /* waits, not motion: reduced motion does not shorten them */
  --radius-panel:calc(var(--radius-device) - var(--frame-gap));
  --radius-panel-phone:calc(var(--radius-phone) - var(--frame-gap));

  /* ---- stationery (print) ---- */
  --a4-w:210mm; --a4-h:297mm;
  --page-margin-x:20mm; --page-margin-top:18mm; --page-margin-bottom:14mm;
  --card-w:85mm; --card-h:55mm; --bleed:3mm; --safe:4mm;
  --print-trim:0.4mm;   /* printed sheets are this much shorter than the page, so rounding never spills onto a new page */
  --print-logo:14mm; --print-logo-small:9mm; --print-card-logo:16mm;
  --print-fs-body:10pt; --print-fs-small:7.5pt; --print-fs-name:11pt; --print-fs-label:6.5pt; --print-fs-title:16pt;
  --sig-logo:40px;

  /* ---- customizer ---- */
  --cz-preview:clamp(140px, 18vw, 220px);

  /* ---- pages list, product pages, website mockup (V2) ---- */
  --tree-w:256px; --tree-mark:20px; --phead-mark:clamp(96px, 12vw, 168px); --modal-w-l:520px;
  --web-chrome-h:40px; --web-head-h:72px; --web-head-h-s:60px; --web-url-w:420px; --logo-web:32px;
  --web-pad:64px; --web-pad-m:40px; --web-pad-s:20px; --web-hero-h:560px; --web-textarea-h:120px;
  --web-hero-mark:360px; --web-hero-mark-m:260px; --web-hero-mark-s:160px; --web-card-mark:48px;
  --fs-web-h1:88px; --fs-web-h1-m:64px; --fs-web-h1-s:44px; --fs-web-h2:48px; --fs-web-h2-s:30px; --fs-web-lead:21px; --fs-web-lead-s:17px;

  /* ---- layers ---- */
  --z-base:0; --z-raised:10; --z-tree:45; --z-rail:50; --z-overlay:80; --z-toast:90; --z-tooltip:100;

  /* ---- opacity ---- */
  --opacity-disabled:0.4; --opacity-muted:0.65; --opacity-icon:0.45; --hover-scale:1.08;

  /* ---- swatch geometry ---- */
  --swatch-h:112px; --chip:20px; --dot:8px;
}

:root{
  /* ---- app-logo gradients (sampled from the original logo files, Suite exact from the vector).
     The products manager's "Apply" writes free colours here, above the end marker. ---- */
  --logo-suite-1:var(--fedisgray1); --logo-suite-2:var(--fedissand3);
  --logo-fedis-1:var(--logo-suite-1); --logo-fedis-2:var(--logo-suite-2);            /* FEDIS master mark: the suite neutral colourway */
  --logo-fedislight-1:var(--logo-suitelight-1); --logo-fedislight-2:var(--logo-suitelight-2);
  --logo-suitelight-1:#d9d0c4; --logo-suitelight-2:#e7e2d9;
  --logo-auth-1:#6d6f72;       --logo-auth-2:#bcbec0;
  --logo-bos-1:#dad1c5;        --logo-bos-2:#928c85;
  --logo-ai-1:#e9eaec;         --logo-ai-2:#a7a9ab;
  --logo-fuse-legacy-1:#de4232; --logo-fuse-legacy-2:#9e2720;
  /* @app-logos-end */
}

/* ---------- semantic tokens: LIGHT (sand) ---------- */
[data-theme="light"]{
  color-scheme:light;
  --mk-light:block; --mk-dark:none;   /* which version of a mark shows: the nearest theme decides */
  --bg:var(--fedissand1);
  --bg-cover:var(--fedissand2);
  --surface:var(--fediswhite1);
  --surface-2:var(--fedissand2);
  --stage:var(--fedissand2);
  --panel:var(--fedissand1);
  --panel-sheen:linear-gradient(155deg, var(--fediswhite1), var(--fedissand1) 42%, color-mix(in srgb, var(--fedissand2) 45%, var(--fedissand1)));
  --frame:var(--fedissand2);
  --frame-border:transparent;
  --glass:color-mix(in srgb, var(--fediswhite1) 55%, transparent);
  --glass-border:var(--fediswhite1);
  --input-bg:var(--fediswhite1);
  --seg-active:var(--fediswhite1);
  --card-face:var(--fedissand2);
  --rail:var(--fedissand2);
  --rail-pill:color-mix(in srgb, var(--fedisgray3) 8%, transparent);
  --rail-icon:color-mix(in srgb, var(--fedisgray3) 70%, var(--fedissand2));
  --rail-icon-active:var(--fedisgray3);
  --icon-idle:color-mix(in srgb, var(--fedisgray3) 45%, transparent);   /* icon buttons at rest: lighter than the text */
  --icon-on:var(--fedisgray3);   /* icon buttons on hover and when selected */
  --frame-positive:var(--fedisgreen2);
  --frame-negative:var(--fedispurple1);
  --frame-delete:var(--fedispurple2);        /* delete X on the menu surfaces */
  --frame-delete-hover:var(--fedispurple3);
  --delete:var(--fedispurple2);              /* delete X inside the page: the only coloured button */
  --delete-hover:var(--fedispurple3);
  --delete-off:var(--text-3);
  --text:var(--fedisgray3);
  --text-2:var(--fedisgray2);
  --text-3:var(--fedisgray1);
  --text-blue:var(--fedisgray2);
  --text-blue-strong:var(--fedisgray1);
  --text-link:var(--fedisgray1);
  --text-positive:var(--fedisgray3);
  --text-alert:var(--fedisgray3);
  --text-negative:var(--fedispurple3);
  --code-key:var(--fedispurple3);
  --code-str:var(--fedisgray2);
  --border:color-mix(in srgb, var(--fedisgray3) 14%, transparent);
  --border-strong:color-mix(in srgb, var(--fedisgray3) 32%, transparent);
  --border-positive:var(--fedisgreen3);
  --border-alert:var(--fedisgold3);
  --border-negative:var(--fedispurple3);
  --accent-brand:var(--fedisgray1);
  --accent-positive:var(--fedisgreen2);  --accent-positive-hover:var(--fedisgreen1);  --on-positive:var(--fedisgray3);
  --accent-alert:var(--fedisgold2);      --accent-alert-hover:var(--fedisgold1);      --on-alert:var(--fedisgray3);
  --accent-negative:var(--fedispurple3); --accent-negative-hover:var(--fedispurple2); --on-negative:var(--fediswhite1);
  --switch-off:color-mix(in srgb, var(--fedisgray3) 24%, transparent);
  --switch-knob-color:var(--fediswhite1);
  --chart-1:var(--fedisgray1);
  --timeline-bar:linear-gradient(90deg, color-mix(in srgb, var(--fedisgray3) 15%, transparent), var(--fedisgray3));   /* gantt bars: soft gray to full dark at the end */
  --chart-fill:color-mix(in srgb, var(--fedisgray1) 14%, transparent);
  --avatar-1:var(--fedisgreen2); --avatar-2:var(--fedisgold2); --avatar-3:var(--fedispurple2);
  --hairline-from:var(--fedisgray2);
  --hairline-to:var(--fedisgray1);
  --focus-ring:var(--fedisgray1);
  --badge-count-bg:var(--fedisgray3);
  --badge-count-fg:var(--fediswhite1);
  --tooltip-bg:var(--fedisgray3);
  --tooltip-fg:var(--fediswhite1);
  --overlay:color-mix(in srgb, var(--fedisgray3) 40%, transparent);
  --selection-bg:var(--fedisgray2);
  --selection-fg:var(--fedissand1);
  --scrollbar-thumb:color-mix(in srgb, var(--fedisgray3) 22%, transparent);
  --scrollbar-thumb-hover:color-mix(in srgb, var(--fedisgray3) 40%, transparent);
  --glow-from:var(--fedisgreen2);
  --glow-to:var(--fedispurple2);
  --brand-glow-a:var(--fedissand3); --brand-glow-b:var(--fediswhite1);   /* sign-in brand side: sands */
  --shadow-1:0 1px 2px color-mix(in srgb, var(--fedisgray3) 8%, transparent);
  --shadow-2:0 8px 24px color-mix(in srgb, var(--fedisgray3) 10%, transparent);
  --shadow-3:0 24px 64px color-mix(in srgb, var(--fedisgray3) 16%, transparent);
  --shadow-device:0 40px 80px color-mix(in srgb, var(--fedisgray3) 22%, transparent);
}

/* ---------- semantic tokens: DARK (grayscale) ---------- */
[data-theme="dark"]{
  color-scheme:dark;
  --mk-light:none; --mk-dark:block;
  --bg:var(--fedisgray3);
  --bg-cover:var(--fedisgray2);
  --surface:var(--fedisgray2);
  --surface-2:color-mix(in srgb, var(--fediswhite1) 6%, var(--fedisgray2));
  --stage:var(--fedisgray3);
  --panel:var(--fedisgray2);
  --panel-sheen:linear-gradient(155deg, color-mix(in srgb, var(--fediswhite1) 5%, var(--fedisgray2)), var(--fedisgray2) 42%, color-mix(in srgb, var(--fedisgray3) 45%, var(--fedisgray2)));
  --frame:var(--fedisgray3);
  --frame-border:color-mix(in srgb, var(--fediswhite1) 10%, transparent);
  --glass:color-mix(in srgb, var(--fediswhite1) 6%, transparent);
  --glass-border:color-mix(in srgb, var(--fediswhite1) 10%, transparent);
  --input-bg:color-mix(in srgb, var(--fediswhite1) 5%, var(--fedisgray2));
  --seg-active:color-mix(in srgb, var(--fediswhite1) 16%, var(--fedisgray2));
  --card-face:var(--fedisgray3);
  --rail:var(--fedisgray3);
  --rail-pill:color-mix(in srgb, var(--fediswhite1) 14%, transparent);   /* selected menu item */
  --rail-hover:color-mix(in srgb, var(--rail-pill) 30%, transparent);   /* menu hover: the selected shade at 70% transparency */
  --rail-icon:var(--fediswhite3);
  --rail-icon-active:var(--fediswhite1);
  --icon-idle:color-mix(in srgb, var(--fediswhite1) 45%, transparent);   /* icon buttons at rest: darker than the text */
  --icon-on:var(--fediswhite1);   /* icon buttons on hover and when selected */
  --frame-positive:var(--fedisgreen2);   /* accents on the dark menu surfaces */
  --frame-negative:var(--fedispurple1);
  --frame-delete:var(--fedispurple1);
  --frame-delete-hover:var(--fedispurple2);
  --delete:var(--fedispurple1);              /* purple2/3 are too dark to read on the dark panel */
  --delete-hover:var(--fedispurple1);
  --delete-off:var(--text-3);
  --text:var(--fediswhite1);
  --text-2:var(--fediswhite2);
  --text-3:var(--fediswhite3);
  --text-blue:var(--fediswhite1);
  --text-blue-strong:var(--fedissand2);
  --text-link:var(--fediswhite1);
  --text-positive:var(--fedisgreen1);
  --text-alert:var(--fedisgold1);
  --text-negative:var(--fediswhite1);
  --code-key:var(--fedisgold1);
  --code-str:var(--fedisgreen1);
  --border:color-mix(in srgb, var(--fediswhite1) 10%, transparent);
  --border-strong:color-mix(in srgb, var(--fediswhite1) 24%, transparent);
  --border-positive:var(--fedisgreen2);
  --border-alert:var(--fedisgold2);
  --border-negative:var(--fedispurple1);
  --accent-brand:var(--fedissand2);
  --accent-positive:var(--fedisgreen2);  --accent-positive-hover:var(--fedisgreen1);  --on-positive:var(--fedisgray3);
  --accent-alert:var(--fedisgold2);      --accent-alert-hover:var(--fedisgold1);      --on-alert:var(--fedisgray3);
  --accent-negative:var(--fedispurple3); --accent-negative-hover:var(--fedispurple2); --on-negative:var(--fediswhite1);
  --switch-off:color-mix(in srgb, var(--fediswhite1) 22%, transparent);
  --switch-knob-color:var(--fediswhite1);
  --chart-1:var(--fediswhite2);
  --timeline-bar:linear-gradient(90deg, color-mix(in srgb, var(--fediswhite1) 15%, transparent), var(--fediswhite1));   /* gantt bars: soft gray to full white at the end */
  --chart-fill:color-mix(in srgb, var(--fediswhite1) 10%, transparent);
  --avatar-1:var(--fedisgreen2); --avatar-2:var(--fedisgold2); --avatar-3:var(--fedispurple2);
  --hairline-from:var(--fedissand2);
  --hairline-to:var(--fediswhite3);
  --focus-ring:var(--fedissand2);
  --badge-count-bg:var(--fediswhite1);
  --badge-count-fg:var(--fedisgray3);
  --tooltip-bg:var(--fedissand1);
  --tooltip-fg:var(--fedisgray3);
  --overlay:color-mix(in srgb, var(--fedisgray3) 60%, transparent);
  --selection-bg:var(--fedissand2);
  --selection-fg:var(--fedisgray3);
  --scrollbar-thumb:color-mix(in srgb, var(--fediswhite1) 18%, transparent);
  --scrollbar-thumb-hover:color-mix(in srgb, var(--fediswhite1) 34%, transparent);
  --glow-from:var(--fedisgreen2);
  --glow-to:var(--fedispurple2);
  --brand-glow-a:var(--fedisgray1); --brand-glow-b:var(--fedisgray3);   /* sign-in brand side: grays */
  --shadow-1:0 1px 2px color-mix(in srgb, var(--fedisgray3) 40%, transparent);
  --shadow-2:0 8px 24px color-mix(in srgb, var(--fedisgray3) 50%, transparent);
  --shadow-3:0 24px 64px color-mix(in srgb, var(--fedisgray3) 70%, transparent);
  --shadow-device:0 40px 80px color-mix(in srgb, var(--fedisgray3) 80%, transparent);
}


/* ---------- reduced motion: every duration collapses ---------- */
@media (prefers-reduced-motion: reduce){
  :root{
    --dur-instant:0ms; --dur-fast:0ms; --dur-base:0ms; --dur-slow:0ms;
    --dur-reveal:0ms; --dur-hairline:0ms; --dur-loop:0ms; --toast-time:6000ms; --motion-shift:0px; --press-shift:0px; --stagger:0ms;
  }
}

/* ---------- print pages (page geometry cannot read tokens, so it lives here) ---------- */
@page{ size:A4; margin:0; }
@page card{ size:85mm 55mm; margin:0; }
/* ============================ END OF THE BRANDBOOK BLOCK ============================ */

/* PART 2 - the two app themes are the light and dark blocks above, one place for each. */

/* =====================================================================
   PART 3 - FedisDNA additions: values the Brandbook has no token for.
   The value check lists every rule of this part as "addition".
   ===================================================================== */

/* inside the app: Extralight to Regular only (the Brandbook .app rule of line 387, on the FedisDNA root) */
.dna-app{ --fw-medium:var(--fw-regular); --fw-semibold:var(--fw-regular); --fw-bold:var(--fw-regular); }

/* the type specimen shows every Chillax weight, so it restores the primitive weights of line 37 */
.dna-specimen{ --fw-medium:500; --fw-semibold:600; --fw-bold:700; }

:root{
  --px:1px;             /* runtime geometry: scripts measure in px and write unitless numbers; CSS multiplies them by this */
  --opacity-full:1;     /* fully visible, the counterpart of 0 */
  --underline-offset:0.2em;   /* links: the underline sits a little below the words (the Brandbook base, line 415) */
  --z-behind:-1;        /* a hover block drawn behind its row (the Brandbook writes z-index:-1 in place) */
  --typeahead-reset:700ms;   /* a wait, not motion (reduced motion does not shorten it): how long typed letters add up to one dropdown search */
  /* code text: the system monospace (prompt 5.1 "Chillax only ...; system mono for code"; the Brandbook sets code in
     --font, lines 527 and 888; the prompt wins, DECISIONS.md phase 00 fix 3, U-20). Nothing is bundled: each system
     uses its own mono face (Cascadia Mono / Consolas on Windows, SF Mono / Menlo on macOS, DejaVu / Liberation on Linux). */
  --font-mono:ui-monospace, "Cascadia Mono", Consolas, "SF Mono", SFMono-Regular, Menlo, "DejaVu Sans Mono", "Liberation Mono", monospace;
}

/* ---------- app-level roles for UI contract rules the Brandbook tokens do not meet (DECISIONS.md 2026-09-28, phase 00 fix 1) ---------- */
:root{
  /* prompt 5.7 "count badges black": black with white figures in every theme (the Brandbook inverts it on dark panels) */
  --app-count-bg:var(--fedisgray3);
  --app-count-fg:var(--fediswhite1);
  --app-count-ring:var(--border-strong);
  /* code keys: the Brandbook's light --code-key is purple3, and purple is for delete only (components.delete) */
  --app-code-key:var(--code-key);
  /* the official FedisDNA logo (pale yellow, Graphics/fedisDna.png) sits on a dark tile so it reads at 3:1 or more */
  --app-logo-tile:var(--fedisgray3);
}
html[data-theme="light"]{
  --app-code-key:var(--fedisgray1);   /* gray1 on sand1; strings use gray2 */
}
html[data-theme="dark"]{
  --app-logo-tile:var(--rail);
}

/* ---------- the live mockups (phase 07, src/renderer/mockup and styles/mockup; they render in their own shadow root,
   which adopts this file too) ---------- */
:root{
  --mock-xl-w:1920px; --mock-xl-h:1080px;   /* the 1920 x 1080 window size of prompt 5.9: the Brandbook desk (--mock-w) drawn larger */
  --help-measure:52ch;   /* the order lines' help text (Brandbook 1140 writes max-width:52ch in place) */
  --opacity-faint:0.25;  /* the agent's typing dots at rest (Brandbook 1813 writes opacity:0.25 in place) */
}
/* parts that sit on the frame's dark take their text roles from the rail (Brandbook 1414, 1653, 1703-1704: declared on
   the part itself there; a token is redefined only in this file) */
.app .agent-pop{
  --text:var(--rail-icon-active); --text-2:var(--rail-icon); --text-3:var(--rail-icon); --border:var(--rail-pill); --border-strong:var(--rail-pill); --surface-2:var(--rail-pill);
}
.app .fly{
  --text:var(--rail-icon-active); --text-2:var(--rail-icon); --text-3:var(--rail-icon); --border:var(--rail-pill); --border-strong:var(--rail-pill); --surface-2:var(--rail-pill);
}
.app .auth-side, .dna-app .auth-side{
  --text:var(--rail-icon-active); --text-2:var(--rail-icon); --text-3:var(--rail-icon); --border:var(--rail-pill);
  --border-strong:color-mix(in srgb, var(--rail-icon) 45%, transparent); --surface-2:var(--rail-pill); --panel:var(--frame);
}

/* ---------- the structure builder (phase 08, src/renderer/structure and styles/structure) ---------- */
:root{
  --st-minimap-w:200px; --st-minimap-h:150px;   /* the canvas's minimap: React Flow's own default size, which its drawing is computed for */
  --st-view-wait:300ms;   /* a wait, not motion: a scheme's zoom and pan are remembered this long after the view settles */
}

/* ---------- UI rules (FedisCove notes/UI-RULES.md, decision D17): the spacing, size and background roles every page,
   group, table and pop-up shares. app.css applies them in its last section. ---------- */
:root{
  --space-half:2px;                      /* tile rows */
  --group-pad:10px;                      /* a group: 10 px above and below its content, inside its top and bottom lines */
  --group-end-w:var(--space-0);          /* a group draws only its top line; the wizard sets this to keep a bottom line too */
  --group-gap:var(--space-5);            /* between groups */
  --title-gap:calc(var(--space-3) + var(--space-2));   /* page title to the first block: 20 px on every page */
  --group-title-pad:var(--space-1);      /* a group's or pop-up's title bar: 4 / title / 4 */
  --row-pad:var(--space-2);              /* every row: 8 / content / 8 */
  --row-line-h:22px;                     /* one line of row text; dropdowns and one-line inputs are this tall */
  --list-rows-max:5;                     /* a scrolling list of rows shows this many, then scrolls */
  --tree-row-h:28px; --tree-ctrl-h:20px; --timeline-bar-h:10px; --tree-indent:var(--space-3);
  --table-head-h:32px; --table-row-h:var(--cell-h);
  --table-cell-gap:var(--space-2);       /* between two cells */
  --table-edge:var(--space-3);           /* at the table's two outer edges */
  --ls-th:0.06em;                        /* table headings: slight tracking */
  --pop-pad:var(--space-5);              /* pop-ups: 24 px on all sides */
  --pop-foot-gap:var(--space-4);         /* above the footer line */
  --pop-foot-pad:var(--space-2);         /* between the footer line and its buttons */
  --label-gap:var(--space-1);            /* between a field label and its input */
  --dropdown-pad-x:var(--space-2);
  --check-app:13px; --radius-check:4px;
  --tip-max-w:320px;
  --hover-bg:color-mix(in srgb, var(--surface-2) 30%, transparent);   /* the one hover background */
  --selected-bg:var(--surface-2);
}