/* ============================================================================
   Siteclick design tokens — THE canonical source for colours, breakpoints and
   scrollbar variables.

   Split off shared.css so standalone iframe documents (native-editor/node-panel,
   the style-editor-host) can link the tokens WITHOUT loading shared.css. Add new
   --sc-* variables here, nowhere else.

   Round 27 (THM-1): one theme per document, html[data-sc-theme="dark|light"].
   :root holds the theme-independent tokens plus the DARK colour set (a missing
   attribute = dark); html[data-sc-theme="light"] holds the light colour set.
   Both groups carry exactly the same keys. No scope classes: everything follows
   the document.

       <link href="/css/shared/tokens.css" rel="stylesheet">

   The layouts link this file on its own (asset_v) right after shared.css, so
   a change here is versioned by filemtime; the import in shared.css:6 stays
   only as a fallback for pages without that link.
   ========================================================================= */

/* Round 25 (HUI-1): Geist, self-hosted (no font CDN). Only 400/500/600 are
   loaded, so font matching caps every weight: 100-300 render as 400 and
   700-900/bold as 600. */
@font-face { font-family: 'Geist'; src: url(fonts/geist/geist-400.woff2) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geist'; src: url(fonts/geist/geist-500.woff2) format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geist'; src: url(fonts/geist/geist-600.woff2) format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
/* Round 28 (r.327): metric-matched fallback so the Geist swap does not shift layout. */
@font-face { font-family: 'Geist Fallback'; src: local('Arial'); size-adjust: 102.7%; }

:root {
    /* Breakpoints */
    --width-desktop: 1224px;
    --width-tablet-landscape: 1024px;
    --width-tablet-portrait: 768px;
    --width-mobile: 480px;
    --width-main-switch-max: 1223px;
    --width-main-switch-min: 1224px;

    --sc-color-white: #FFFFFF;
    --sc-color-black: #000000;
    --sc-color-transparent: transparent;

    /* Buttons */
    --sc-button-neutral-bg: var(--sc-color-surface);
    --sc-button-neutral-bg-hover: var(--sc-color-surface-alt);
    --sc-button-neutral-text: var(--sc-color-text-muted);
    --sc-button-neutral-text-hover: var(--sc-color-text);
    --sc-button-primary-bg: var(--sc-color-blue);
    --sc-button-primary-bg-hover: var(--sc-color-blue-hover);
    --sc-button-primary-text: var(--sc-color-white);
    --sc-button-success-bg: var(--sc-color-green);
    --sc-button-success-bg-hover: var(--sc-color-green-hover);
    --sc-button-success-text: var(--sc-color-white);
    --sc-button-danger-bg: var(--sc-color-danger);
    --sc-button-danger-bg-hover: var(--sc-color-danger-hover);
    --sc-button-danger-text: var(--sc-color-white);
    --sc-button-magic-bg: var(--sc-color-purple);
    --sc-button-magic-bg-hover: var(--sc-color-purple-hover);
    --sc-button-magic-text: var(--sc-color-white);

    /* Scrollbars */
    --sb-track-color: var(--sc-color-surface);
    --sb-thumb-color: var(--sc-color-border-strong);
    --sb-size: 3px;
    --sb-size-body: 0px;
    /* Editor chrome: the 1px divider on dark surfaces (also inside iframes). */
    --sc-chrome-line: #1F1F20;

    /* Inputs: a filled field without a visible frame; the 1px transparent
       border stays so focus does not shift the height. */
    --sc-input-border: transparent;
    --sc-input-border-focus: var(--sc-color-primary);

    /* Typography */
    --sc-font-sans: 'Geist', 'Geist Fallback', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --sc-font-weight-text: 400;
    --sc-font-weight-ui: 500;
    --sc-font-weight-title: 600;

    /* Round 26 (UIX-1): design system v2 — shape, motion, rings and layers.
       Radius is shape, not size (V1: if rejected, sm/md/lg become 3px/5px/5px). */
    --sc-radius-sm: 4px;
    --sc-radius-md: 6px;
    --sc-radius-lg: 10px;
    --sc-radius-full: 999px;
    --sc-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --sc-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --sc-dur-fast: 120ms;
    --sc-dur-base: 200ms;
    --sc-dur-slow: 240ms;
    --sc-dur-shimmer: 1.6s;
    --sc-shine-period: 10s;
    --sc-ring: 0 0 0 3px var(--sc-overlay-primary-soft);
    --sc-ring-error: 0 0 0 3px var(--sc-overlay-red-soft);
    --sc-ring-success: 0 0 0 3px var(--sc-overlay-green-soft);
    /* Ink of a button label and its loader; ui-button.css sets it per variant. */
    --sc-btn-ink: var(--sc-color-white);
    --sc-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --sc-search-line: var(--sc-color-border-strong);
    /* Inner line rail <-> panel on black. */
    --sc-chrome-line-strong: rgba(255, 255, 255, .18);

    /* Round 27: shared control and bar heights, chart duration. */
    --sc-control-h: 36px;
    --sc-bar-h: 40px;
    /* Chart tween duration (sc-chart.js). */
    --sc-dur-chart: 480ms;
    /* Round 27: design-library tile grounds (siteclick-library.css, data-tile-bg, 27c LIB-1);
       content, not chrome, so equal in both themes. Ink on dark = light and vice versa. */
    --sc-color-sample-dark: #000000;
    --sc-color-sample-light: #FFFFFF;
    --sc-color-sample-checker: rgba(255, 255, 255, 0.06);
    /* Run 28c (KRT-1): the card ground per theme (data-tile-bg="theme", ds-card.css) and its ink. */
    --sc-color-tile-ground: #000000;
    --sc-color-tile-ink: #FFFFFF;
    /* Round 27 (THM-3): the rails paint the bar ground in both themes. */
    --sc-rail-bg: var(--sc-color-bar-bg);
    /* Round 27: retired, aliased until THM-6/27c sweeps the consumers. */
    --sc-color-black-soft: var(--sc-color-surface);
    --sc-color-ink-on-black: var(--sc-color-bar-ink);
    /* Round 28 (UIX-1): glass blur and the one tab size set. */
    --sc-glass-blur: blur(10px);
    --sc-tab-font: 12px;
    --sc-tab-gap: 16px;
    /* Run 36a1 (TAB-1): one tab height per strip size and the gap between stacked strips;
       --sc-tab-inset has no global value: each host sets it in parts/sc-tabs.css. */
    --sc-tab-h: 36px;
    --sc-tab-h-sm: 28px;
    --sc-tab-stack: 8px;
    /* Run 37a2 (TAB-1): stacked strips sit this far apart line to line (= --sc-tab-stack + --sc-tab-h-sm = --sc-tab-h); documentation only. */
    --sc-tab-pitch: 36px;
    /* Run 29a (LOOP-1): the gaps of the one loop rule (.sc-loop); the ladder in sc-chrome-items.css is computed on 25. */
    --sc-loop-gap-x: 25px;
    --sc-loop-gap-y: 35px;
    /* Run 30a (SHL-4): height of the scroll fade at the top of scrolling surfaces (body layer and pane masks). */
    --sc-scroll-fade: 30px;
    /* Run 31a (TGL D1): top offset of viewport-fixed panels; 0 without a header bar (raised below). */
    --sc-top: 0px;

    /* Dark colour set (default theme). */
    color-scheme: dark;

    --sc-color-primary: #2C67C5;
    --sc-color-primary-hover: #2558A7;
    --sc-color-primary-text: #5A86D0;
    --sc-color-primary-soft: #0D1F3B;
    --sc-color-primary-soft-strong: #12294F;

    --sc-color-blue: #2C67C5;
    --sc-color-blue-hover: #2558A7;
    --sc-color-blue-soft: #0D1F3B;
    --sc-color-green: #198754;
    --sc-color-green-hover: #157347;
    --sc-color-green-soft: #082919;
    --sc-color-yellow: #B45309;
    --sc-color-yellow-hover: #994708;
    --sc-color-yellow-soft: #361903;
    --sc-color-purple: #B197FF;
    --sc-color-purple-hover: #C4ADFF;
    --sc-color-purple-soft: #3B2E63;
    /* Round 28 (r.8) + 30 (SHL-3): one red = danger (errors, delete, critical). */
    --sc-color-danger: #D92D20;
    --sc-color-danger-hover: #B42318;
    --sc-color-danger-soft: #4D2A2A;
    /* Alias for shared.css only. */
    --sc-color-red: var(--sc-color-danger);
    --sc-color-red-hover: var(--sc-color-danger-hover);
    --sc-color-red-soft: var(--sc-color-danger-soft);
    --sc-color-orange: #B45309;
    --sc-color-orange-hover: #994708;
    --sc-color-orange-soft: #361903;

    --sc-color-bg: #000000;
    --sc-color-panel-bg: #000000;
    --sc-color-bg-light: #1B1B1B;
    --sc-color-surface: #1B1B1B;
    --sc-color-surface-alt: #262626;
    --sc-color-surface-dark: #D4D4D4;
    --sc-color-nav-group-active-bg: #262626;
    --sc-color-border: var(--sc-color-surface);
    --sc-color-border-strong: #55555D;

    --sc-color-text: #ECECF1;
    --sc-color-text-soft: #DADAE0;
    --sc-color-text-soft-bg: #1B1B1B;
    /* Run 31a (OPM D1): text scale strong · muted · subtle · faint; text colour only via these, opacity 1. */
    --sc-color-text-muted: #CCCCCC;
    --sc-color-text-subtle: #999999;
    --sc-color-text-faint: #555555;
    --sc-color-text-strong: #FFFFFF;

    --sc-color-dark: #000000;
    --sc-color-dark-soft: #1B1B1B;
    --sc-color-dark-muted: #262626;

    --sc-color-hairline: var(--sc-chrome-line);
    --sc-color-bar-bg: #000;
    --sc-color-bar-ink: #A1A1AA;
    --sc-color-bar-ink-active: #FFFFFF;

    --sc-input-bg: #1B1B1B;

    --sc-overlay-dark: rgba(0, 0, 0, 0.65);
    --sc-overlay-soft: rgba(0, 0, 0, 0.35);
    --sc-overlay-subtle: rgba(255, 255, 255, 0.06);
    --sc-overlay-primary-soft: rgba(44, 103, 197, 0.22);
    --sc-overlay-white-soft: rgba(32, 33, 35, 0.5);
    --sc-overlay-white-strong: rgba(32, 33, 35, 0.72);
    --sc-overlay-red-soft: rgba(226, 85, 79, .28);
    --sc-overlay-green-soft: rgba(25, 135, 84, .28);
    --sc-shadow-subtle: rgba(0, 0, 0, 0.35);
    --sc-shadow-pop: 0 8px 24px rgba(0,0,0,.6);

    --sc-notify-bg: #000;
    --sc-notify-text: #FFFFFF;
    --sc-checker-a: #262626;
    --sc-checker-b: #1B1B1B;

    --sc-glass-bg: rgba(0, 0, 0, 0.6);
    --sc-glass-bg-bar: rgba(0, 0, 0, 0.85);
    /* Round 39 (AGT-4): the answer strip's scroll fade, on the composer ground it scrolls over. */
    --sc-suggest-fade: var(--sc-color-surface);
    /* Run 29a/30a: the darker glass of .sc-dd-panel (list and header menu). */
    --sc-glass-bg-strong: rgba(12, 12, 12, .94);
    /* Run 30a (TGL-2) + 31a (TGL D1): count badge (rail, tabs) and the header bar slot. */
    --sc-count-bg: var(--sc-color-primary);
    --sc-count-ink: var(--sc-color-white);
    --sc-color-bar-slot-bg: var(--sc-color-surface);
    --sc-color-bar-slot-ink: var(--sc-color-white);
    /* Run 29a (HDR-2, V4): the header bar controls (section toggle, sc-bar-cta size). */
    --sc-color-bar-control-bg: #2B2B2B;
    --sc-color-bar-control-bg-hover: #333333;
    --sc-color-bar-control-ink: var(--sc-color-white);
    --sc-avatar-scrim: rgba(0, 0, 0, 0.35);
    --sc-shine-ink: var(--sc-color-white);
    --sc-shine-ink-mask: var(--sc-color-white);
    --sc-shine-text: #D0D0D0;
    --sc-shine-text-band: var(--sc-color-white);
    --sc-auth-line: #333333;
    --sc-pre-ink: var(--sc-color-text-muted);
    --sc-pre-ink-active: var(--sc-color-text-strong);
    /* Run 38c (EDW-3): editor title chips; the editor chrome stays black in both themes, so the value is the same. */
    --sc-ve-chip: rgba(255, 255, 255, .26);
    --sc-ve-chip-hover: rgba(255, 255, 255, .34);
}

/* Light colour set: the 25a values. */
html[data-sc-theme="light"] {
    color-scheme: light;

    --sc-color-primary: #2C67C5;
    --sc-color-primary-hover: #2558A7;
    --sc-color-primary-text: #2C67C5;
    --sc-color-primary-soft: #EAF0F9;
    --sc-color-primary-soft-strong: #D5E1F3;

    --sc-color-blue: #2C67C5;
    --sc-color-blue-hover: #2558A7;
    --sc-color-blue-soft: #D5E1F3;
    --sc-color-green: #198754;
    --sc-color-green-hover: #157347;
    --sc-color-green-soft: #D1E7DD;
    --sc-color-yellow: #B45309;
    --sc-color-yellow-hover: #994708;
    --sc-color-yellow-soft: #F8EEE6;
    --sc-color-purple: #7C5CFF;
    --sc-color-purple-hover: #6848E8;
    --sc-color-purple-soft: #ECE7FF;
    --sc-color-danger: #D92D20;
    --sc-color-danger-hover: #B42318;
    --sc-color-danger-soft: #FBE3E1;
    /* Alias for shared.css only. */
    --sc-color-red: var(--sc-color-danger);
    --sc-color-red-hover: var(--sc-color-danger-hover);
    --sc-color-red-soft: var(--sc-color-danger-soft);
    --sc-color-orange: #B45309;
    --sc-color-orange-hover: #994708;
    --sc-color-orange-soft: #F8EEE6;

    --sc-color-bg: #FFFFFF;
    --sc-color-panel-bg: #FFFFFF;
    --sc-color-bg-light: #F4F6F8;
    --sc-color-surface: #F8F8F8;
    --sc-color-surface-alt: #EFEFF1;
    --sc-color-surface-dark: #D4D4D4;
    --sc-color-nav-group-active-bg: #E6E6EA;
    --sc-color-border: var(--sc-color-surface);
    --sc-color-border-strong: #DADAE0;

    --sc-color-text: #202123;
    --sc-color-text-soft: #343541;
    --sc-color-text-soft-bg: #1B1B1B;
    /* Run 31a (V-OPM): exact mirror (255 - x) of the dark scale. */
    --sc-color-text-muted: #333333;
    --sc-color-text-subtle: #666666;
    --sc-color-text-faint: #AAAAAA;
    --sc-color-text-strong: #111827;

    --sc-color-dark: #1B1B1B;
    --sc-color-dark-soft: #2B2B2F;
    --sc-color-dark-muted: #34343A;

    /* Hairlines are inset box-shadows, never an extra border. */
    --sc-color-hairline: var(--sc-color-border-strong);
    /* V1 (Jeroen): the header is light in the light theme. */
    --sc-color-bar-bg: var(--sc-color-bg);
    --sc-color-bar-ink: var(--sc-color-text-muted);
    --sc-color-bar-ink-active: var(--sc-color-text-strong);

    --sc-input-bg: var(--sc-color-surface-alt);

    --sc-overlay-dark: rgba(0, 0, 0, 0.5);
    --sc-overlay-soft: rgba(32, 33, 35, 0.2);
    --sc-overlay-subtle: rgba(0, 0, 0, 0.04);
    --sc-overlay-primary-soft: rgba(44, 103, 197, 0.16);
    --sc-overlay-white-soft: rgba(255, 255, 255, 0.5);
    --sc-overlay-white-strong: rgba(255, 255, 255, 0.7);
    --sc-overlay-red-soft: rgba(226, 85, 79, .18);
    --sc-overlay-green-soft: rgba(25, 135, 84, .18);
    --sc-shadow-subtle: rgba(0, 0, 0, 0.08);
    --sc-shadow-pop: 0 8px 24px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.06);

    --sc-notify-bg: var(--sc-color-panel-bg);
    --sc-notify-text: var(--sc-color-text-strong);
    --sc-checker-a: #D5D9DE;
    --sc-checker-b: #FFFFFF;
    --sc-color-tile-ground: #FFFFFF;
    --sc-color-tile-ink: #000000;

    --sc-glass-bg: rgba(255, 255, 255, 0.7);
    --sc-glass-bg-bar: rgba(255, 255, 255, 0.85);
    --sc-suggest-fade: var(--sc-color-surface);
    --sc-glass-bg-strong: rgba(255, 255, 255, .97);
    --sc-count-bg: var(--sc-color-primary);
    --sc-count-ink: var(--sc-color-white);
    --sc-color-bar-slot-bg: var(--sc-color-surface-alt);
    --sc-color-bar-slot-ink: var(--sc-color-text-strong);
    --sc-color-bar-control-bg: #E4E4E7;
    --sc-color-bar-control-bg-hover: #D9D9DE;
    --sc-color-bar-control-ink: var(--sc-color-text-strong);
    --sc-avatar-scrim: rgba(0, 0, 0, 0.35);
    --sc-shine-ink: rgba(17, 24, 39, .12);
    --sc-shine-ink-mask: rgba(255, 255, 255, .7);
    --sc-shine-text: #2F2F2F;
    --sc-shine-text-band: var(--sc-color-text-strong);
    --sc-auth-line: var(--sc-color-border-strong);
    --sc-pre-ink: var(--sc-color-text-subtle);
    --sc-pre-ink-active: var(--sc-color-text-strong);
    /* Run 38c (EDW-3): editor title chips; the editor chrome stays black in both themes, so the value is the same. */
    --sc-ve-chip: rgba(255, 255, 255, .26);
    --sc-ve-chip-hover: rgba(255, 255, 255, .34);
}

/* Run 31a (TGL D1): a document with the app or marketing header bar offsets its fixed panels by the bar. */
:root:has(.siteclick-bar-header, .mk-head) { --sc-top: var(--sc-bar-h); }

@media (prefers-reduced-motion: reduce) {
    :root {
        --sc-dur-fast: 0ms;
        --sc-dur-base: 0ms;
        --sc-dur-slow: 0ms;
        --sc-dur-shimmer: 0ms;
        --sc-dur-chart: 0ms;
    }
}

/* 31d: level colours (MKT-0) — the only source of the six --np-lvl-* (editor, breadcrumb, marketing host); mirror of LEVEL_DOT, fixed, not per theme */
:root {
    --np-lvl-site: #D94FB5;
    --np-lvl-page: #22B8CF;
    --np-lvl-section: #E2554F;
    --np-lvl-row: #7C5CFF;
    --np-lvl-column: #F28C38;
    --np-lvl-component: #2C67C5;
}