/** FORME - neutral editorial tokens. Studio overrides --ec-* at runtime.
 * All design and extension aliases retain the Template Studio semantic contract.
 * Copyright (C) 2026 BulaSikku Technologies. GPL-2.0-or-later. */
:root {
    color-scheme: light;
    --ec-bg: #fafaf7;
    --ec-surface: #ffffff;
    --ec-surface-2: #efeee8;
    --ec-fg: #242622;
    --ec-fg-2: #63645b;
    --ec-border: #dcddd5;
    --ec-accent: #2a2b27;
    --ec-accent-fg: #ffffff;
    --ec-accent-soft: #e9e6dd;
    --ec-shadow: 0 12px 32px rgb(36 38 34 / 0.04);
    --fm-sunken: #efeee8;
    --fm-ink: #242622;
    --fm-control: #85867a;
    --fm-accent-ink: var(--ec-fg);
    --fm-accent-ink-hover: #45463f;
    --fm-accent-hover: color-mix(in srgb, var(--ec-accent) 82%, var(--ec-fg));
    --fm-accent-active: var(--ec-accent);
    --fm-signal: #476848;
    --fm-focus: #476848;
    --fm-lit: #e9e6dd;
    --fm-lit-fg: #2a2b27;
    --fm-glow: transparent;
    --fm-glow-hover: transparent;
    --fm-highlight: #85867a;
    --fm-hairline: #dcddd5;
    --fm-live: #476848;
    --fm-live-fg: #ffffff;
    --fm-success: #34623d;
    --fm-success-bg: #e7efe4;
    --fm-danger: #a52b31;
    --fm-danger-bg: #fbebec;
    --fm-info: #315f79;
    --fm-info-bg: #e8f0f4;
    --fm-warning: #825e18;
    --fm-warning-bg: #f7edda;
    --fm-avatar-1: #e9e6dd;
    --fm-avatar-2: #dfe9db;
    --fm-avatar-3: #efdcd1;
    --fm-avatar-4: #e2e1dd;
    --fm-avatar-5: #e8e6ce;
    --fm-avatar-fg: #242622;
    --fm-toggle-on: #ffffff;
    --fm-scrim: rgb(36 38 34 / 0.46);
    --fm-overlay-shadow: 0 16px 40px rgb(36 38 34 / 0.12);
    --fm-map-ground: #efeee8;
    --fm-map-park: #dfe9db;
    --fm-map-water: #dce8eb;
    --fm-map-street: #e2e1dd;
    --fm-map-street-major: #ffffff;
    --fm-map-contour: #dcddd5;
    --fm-map-route: #476848;
    --fm-map-route-width: 3px;
    --fm-map-casing: #fafaf7;
    --fm-strip-bg: var(--ec-surface-2);
    --fm-band: var(--ec-surface-2);
    --fm-band-fg: var(--ec-fg);
    --fm-footer-bg: var(--ec-surface-2);
    --ts-link: var(--fm-accent-ink);
    --ts-link-hover: var(--fm-accent-ink-hover);
    --ts-focus: var(--fm-focus);
    --ts-focus-gap: transparent;
    --ts-control: var(--fm-control);
    --ts-signal: var(--fm-signal);
    --ts-tint: var(--fm-lit);
    --ts-on-tint: var(--fm-lit-fg);
    --ts-success: var(--fm-success);
    --ts-success-bg: var(--fm-success-bg);
    --ts-danger: var(--fm-danger);
    --ts-danger-bg: var(--fm-danger-bg);
    --ts-warning: var(--fm-warning);
    --ts-warning-bg: var(--fm-warning-bg);
    --ts-info: var(--fm-info);
    --ts-info-bg: var(--fm-info-bg);
    --ts-font-mono: ui-monospace, 'Cascadia Code', 'SF Mono', Menlo, Consolas, monospace;
    --ts-scrim: var(--fm-scrim);
    --ts-overlay-shadow: var(--fm-overlay-shadow);
    --ts-bg-rgb: 250, 250, 247;
    --ts-fg-rgb: 36, 38, 34;
    --ts-accent-rgb: 42, 43, 39;
    --ts-link-rgb: 36, 38, 34;
    --ts-link-hover-rgb: 69, 70, 63;
    --ts-success-rgb: 52, 98, 61;
    --ts-danger-rgb: 165, 43, 49;
    --ts-warning-rgb: 130, 94, 24;
    --ts-info-rgb: 49, 95, 121;
    --ts-fg-2-rgb: 99, 100, 91;
    --ts-surface-rgb: 255, 255, 255;
    --ts-surface-2-rgb: 239, 238, 232;
    --ec-radius: 8px;
    --ec-btn-radius: 4px;
    --ec-img-radius: 8px;
    --ec-font-display: 'Manrope', 'Segoe UI', system-ui, sans-serif;
    --ec-font-body: 'DM Sans', 'Segoe UI', system-ui, sans-serif;
    --ec-disp-weight: 500;
    --ec-disp-style: normal;
    --ec-disp-tracking: -0.045em;
    --ec-disp-transform: none;
    --ec-cw: 1432px;
    --ec-gut: clamp(1.25rem, 4vw, 4rem);
    --ec-sect-y: clamp(3.5rem, 7vw, 6.5rem);
    --ec-grid: 3;
    --ec-grid-gap: clamp(1rem, 2.5vw, 2rem);
    --ec-dur-1: 180ms;
    --ec-dur-2: 220ms;
    --ec-dur-3: 320ms;
    --ec-ease: cubic-bezier(0.2, 0.6, 0.3, 1);
    --fm-disp-stretch: 100%;
    --fm-num-weight: 600;
    --fm-t-display-xl: clamp(3rem, 6.4vw, 6.2rem);
    --fm-t-numeral-hero: clamp(4.5rem, 2.111rem + 9.8vw, 8.5rem);
    --fm-t-display-l: clamp(2rem, 4vw, 3.5rem);
    --fm-t-h1-page: clamp(2.5rem, 4.8vw, 4.5rem);
    --fm-t-h2: clamp(1.8rem, 3vw, 2.5rem);
    --fm-t-numeral-l: clamp(2.5rem, 2.129rem + 1.524vw, 3.5rem);
    --fm-t-numeral-m: clamp(2.25rem, 1.971rem + 1.143vw, 3rem);
    --fm-t-numeral-s: clamp(1.375rem, 1.05rem + 1.333vw, 2.25rem);
    --fm-t-numeral-xs: 1.75rem;
    --fm-t-h3: clamp(1.3rem, 2vw, 1.75rem);
    --fm-t-wordmark: 1.4rem;
    --fm-t-lede: clamp(1.125rem, 1.4vw, 1.375rem);
    --fm-t-title-l: 1.25rem;
    --fm-t-title-m: clamp(1.0625rem, 1.016rem + 0.19vw, 1.1875rem);
    --fm-t-nav: 0.9375rem;
    --fm-t-label: 1.125rem;
    --fm-t-body: 1.0625rem;
    --fm-t-meta: 1rem;
    --fm-t-meta-s: 0.9375rem;
    --fm-t-tag: 0.875rem;
    --fm-mullion: 1px;
    --fm-s-1: 0.25rem;
    --fm-s-2: 0.5rem;
    --fm-s-3: 0.75rem;
    --fm-s-4: 1rem;
    --fm-s-5: 1.25rem;
    --fm-s-6: 1.5rem;
    --fm-s-7: 1.75rem;
    --fm-s-8: 2rem;
    --fm-s-10: 2.5rem;
    --fm-s-12: 3rem;
    --fm-s-16: 4rem;
    --fm-s-20: 5rem;
    --fm-s-22: 5.5rem;
    --fm-s-24: 6rem;
    --fm-r-tail: var(--ec-radius);
    --fm-r-bubble: var(--ec-radius);
    --fm-r-bubble-s: var(--ec-radius);
    --fm-r-bubble-xs: var(--ec-btn-radius);
    --fm-r-avatar: 50%;
    --fm-r-toggle-inner: 7px;
    --fm-r-tag: 999px;
    --fm-r-pill-live: 999px;
    --fm-r-bar: 2px;
    --ts-z-scrim: 1005;
    --ts-z-header: 1010;
    --ts-z-dropdown: 1020;
    --ts-z-toast: 1100;
    --ts-sticky-offset: 0px;
}

:root[data-color-scheme="dark"], [data-bs-theme="dark"]:not(:root), [data-fm-scope="night"] {
    color-scheme: dark;
    --ec-bg: #20231f;
    --ec-surface: #282c26;
    --ec-surface-2: #32372e;
    --ec-fg: #f4f3ed;
    --ec-fg-2: #babdaf;
    --ec-border: #474d41;
    --ec-accent: #e9e6dd;
    --ec-accent-fg: #242622;
    --ec-accent-soft: #3d4337;
    --ec-shadow: 0 12px 32px rgb(0 0 0 / .12);
    --fm-sunken: #1b1e19;
    --fm-ink: #20231f;
    --fm-control: #858e79;
    --fm-accent-ink: #f4f3ed;
    --fm-accent-ink-hover: #ffffff;
    --fm-signal: #bdd0ab;
    --fm-focus: #bdd0ab;
    --fm-lit: #3d4337;
    --fm-lit-fg: #f4f3ed;
    --fm-highlight: #858e79;
    --fm-hairline: #474d41;
    --fm-live: #bdd0ab;
    --fm-live-fg: #20231f;
    --fm-success: #b1d6ad;
    --fm-success-bg: #2c402c;
    --fm-danger: #ffb3b5;
    --fm-danger-bg: #482e2e;
    --fm-info: #b3d5e8;
    --fm-info-bg: #283c47;
    --fm-warning: #eed49a;
    --fm-warning-bg: #403722;
    --fm-avatar-1: #3d4337;
    --fm-avatar-2: #384834;
    --fm-avatar-3: #4a3830;
    --fm-avatar-4: #43443b;
    --fm-avatar-5: #494730;
    --fm-avatar-fg: #f4f3ed;
    --fm-toggle-on: #32372e;
    --fm-scrim: rgb(0 0 0 / .6);
    --fm-overlay-shadow: 0 16px 40px rgb(0 0 0 / .3);
    --ts-bg-rgb: 32, 35, 31;
    --ts-fg-rgb: 244, 243, 237;
    --ts-fg-2-rgb: 186, 189, 175;
    --ts-surface-rgb: 40, 44, 38;
    --ts-surface-2-rgb: 50, 55, 46;
    --ts-accent-rgb: 233, 230, 221;
    --ts-link-rgb: 244, 243, 237;
    --ts-link-hover-rgb: 255, 255, 255;
    --ts-success-rgb: 177, 214, 173;
    --ts-danger-rgb: 255, 179, 181;
    --ts-warning-rgb: 238, 212, 154;
    --ts-info-rgb: 179, 213, 232;
}
[data-ec-preset="sage"] {
    --ec-accent: #425941;
    --ec-accent-fg: #ffffff;
    --ec-accent-soft: #e1e8dd;
    --fm-lit: #e1e8dd;
    --fm-lit-fg: #30432e;
    --ts-accent-rgb: 66, 89, 65;
}
[data-ec-preset="clay"] {
    --ec-accent: #795445;
    --ec-accent-fg: #ffffff;
    --ec-accent-soft: #efdfd7;
    --fm-lit: #efdfd7;
    --fm-lit-fg: #654132;
    --ts-accent-rgb: 121, 84, 69;
}
[data-ec-preset="sage"][data-color-scheme="dark"] {
    --ec-accent: #bdd0ab;
    --ec-accent-fg: #20231f;
    --ec-accent-soft: #3d4936;
    --fm-lit: #3d4936;
    --fm-lit-fg: #f4f3ed;
    --ts-accent-rgb: 189, 208, 171;
}
[data-ec-preset="clay"][data-color-scheme="dark"] {
    --ec-accent: #dbb5a3;
    --ec-accent-fg: #20231f;
    --ec-accent-soft: #4b3930;
    --fm-lit: #4b3930;
    --fm-lit-fg: #f4f3ed;
    --ts-accent-rgb: 219, 181, 163;
}

/* Shared kit controls, editor aliases and extension token contracts. */
:root,
[data-bs-theme]:not(:root),
[data-fm-scope="night"] {
    --ts-focus-width: 2px;
    --ts-control-height: 2.75rem; 
    --ts-control-height-sm: 2.25rem;
    --ts-control-radius: var(--ec-btn-radius);
    --ts-control-border-width: 1px;
    --ts-control-bg: var(--ec-surface);
    --ts-control-focus-border: var(--ts-focus);
    --ts-btn-font: var(--ec-font-body);
    --ts-btn-weight: 700;
    --ts-btn-transform: none;
    --ts-btn-tracking: normal;
    --ts-btn-pad-x: 1.25rem;
    --ts-btn-border-width: var(--ts-control-border-width);
    --ts-btn-primary-bg: var(--ec-accent);
    --ts-btn-primary-fg: var(--ec-accent-fg);
    --ts-btn-primary-border: var(--ts-btn-primary-bg); 
    --ts-btn-primary-hover-bg: var(--fm-accent-hover); 
    --ts-btn-primary-hover-fg: var(--ts-btn-primary-fg);
    --ts-btn-primary-shadow: none;
    --ts-btn-secondary-bg: transparent;
    --ts-btn-secondary-fg: var(--ec-fg);
    --ts-btn-secondary-border: var(--ec-fg-2); 
    --ts-btn-secondary-hover-bg: var(--ec-surface-2);
    --ts-btn-secondary-hover-fg: var(--ec-fg);
    --ts-btn-secondary-hover-border: var(--ec-fg);
    --ts-check-size: 1.375em; 
    --ts-check-bg: var(--ec-accent);
    --ts-check-mark: var(--ts-mark-paper-check); 
    --ts-radio-mark: var(--ts-mark-paper-dot);
    --ts-dash-mark: var(--ts-mark-paper-dash);
    --ts-switch-mark: var(--ts-mark-paper-knob);
    --ts-card-bg: var(--ec-surface);
    --ts-card-border: var(--ec-border);
    --ts-card-radius: var(--ec-radius); 
    --ts-card-shadow: var(--ec-shadow); 
    --ts-overlay-radius: var(--ec-radius);
    --ts-badge-radius: var(--fm-r-tag);
    --ts-tab-indicator: var(--ts-signal);
    --ts-tab-indicator-width: 3px;
    --ts-tab-active-bg: transparent;
    --ts-tab-active-border: transparent;
    --ts-table-head-bg: transparent;
    --ts-table-head-fg: var(--ec-fg-2);
    --ts-table-head-rule: var(--ec-border);
    --ts-page-current-bg: var(--ec-accent);
    --ts-page-current-fg: var(--ec-accent-fg);
    --ts-page-gap: 0.375rem;
    --ts-alert-border-width: 1px;
    --ts-alert-bar-width: 1px;
    --ts-alert-radius: var(--ec-radius);
    --ts-tooltip-bg: var(--fm-ink); 
    --ts-tooltip-fg: #EFE8DA; 
}



:root,
[data-bs-theme]:not(:root),
[data-fm-scope="night"] {
    --color-paper: var(--ec-bg);
    --color-paper-2: var(--ec-surface);
    --color-paper-3: var(--ec-surface-2);
    --color-ink: var(--ec-fg);
    --color-ink-2: var(--ec-fg);
    --color-neutral: var(--ec-fg-2);
    --color-muted: var(--ec-fg-2);
    --color-rule: var(--ec-border);
    --color-rule-2: var(--ts-control);
    --color-accent: var(--ec-accent);
    --color-accent-ink: var(--ec-accent-fg); 
    --color-accent-soft: var(--ec-accent-soft);
    --color-focus: var(--ts-focus);
    --color-error: var(--ts-danger);
    --color-error-soft: var(--ts-danger-bg);
    --color-success: var(--ts-success);
    --color-success-soft: var(--ts-success-bg);
    --color-warning: var(--ts-warning);
    --color-warning-soft: var(--ts-warning-bg);
    --color-scrim: var(--ts-scrim);

    
    --font-display: var(--ec-font-display);
    --font-body: var(--ec-font-body);
    --font-mono: var(--ts-font-mono); 
    --font-ui: var(--ec-font-body);

    
    --space-3xs: 0.125rem;
    --space-2xs: 0.25rem;
    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 5rem;
    --space-5xl: 6rem;

    
    --text-xs: var(--fm-t-tag);
    --text-sm: var(--fm-t-meta-s);
    --text-base: 1rem;
    --text-md: var(--fm-t-body);
    --text-lg: var(--fm-t-title-l);
    --text-xl: var(--fm-t-lede);
    --text-2xl: 1.75rem;
    --text-3xl: var(--fm-t-h2);
    --text-4xl: var(--fm-t-h1-page);
    --text-display-s: var(--fm-t-display-l);
    --text-display: var(--fm-t-display-xl);

    
    --radius-xs: var(--fm-r-tail);
    --radius-sm: var(--ec-btn-radius);
    --radius-md: var(--ec-radius);
    --radius-lg: 1.25rem;
    --radius-pill: 999px;
    --measure: 68ch;
    --target-min: 44px;
    --page-max: var(--ec-cw);
    --page-gutter: max(var(--ec-gut), env(safe-area-inset-left), env(safe-area-inset-right));
    --rule-hair: 1px;
    --rule-strong: 2px;
}



:root,
[data-bs-theme]:not(:root),
[data-fm-scope="night"] {
    
    --template-bg: var(--ec-bg);
    --template-bg-elev: var(--ec-surface);
    --template-bg-subtle: var(--ec-surface);
    --template-bg-inset: var(--ec-surface-2);
    --template-border-color: var(--ec-border);
    --template-border-strong-color: var(--ts-control);
    --template-text-color: var(--ec-fg);
    --template-muted-color: var(--ec-fg-2);
    --template-subtle-color: var(--ec-fg-2);
    --template-link-color: var(--ts-link);
    --template-link-hover-color: var(--ts-link-hover);
    --template-accent-soft: var(--ts-tint);
    --template-success-color: var(--ts-success);
    --template-success-bg: var(--ts-success-bg);
    --template-warning-color: var(--ts-warning);
    --template-warning-bg: var(--ts-warning-bg);
    --template-danger-color: var(--ts-danger);
    --template-danger-bg: var(--ts-danger-bg);
    --template-heading-font: var(--ec-font-display);
    --template-font-family: var(--ec-font-body);
    --template-mono-font: var(--ts-font-mono);

    
    --vy-bg: var(--ec-bg);
    --vy-surface: var(--ec-surface);
    --vy-surface-2: var(--ec-surface-2);
    --vy-fg: var(--ec-fg);
    --vy-fg-2: var(--ec-fg-2);
    --vy-border: var(--ec-border);
    --vy-control-border: var(--ts-control);
    --vy-accent: var(--ec-accent);
    --vy-accent-fg: var(--ec-accent-fg);
    --vy-accent-soft: var(--ts-tint);
    --vy-ok: var(--ts-success);
    --vy-ok-strong: var(--ts-success);
    --vy-warn: var(--ts-warning);
    --vy-warn-strong: var(--ts-warning);
    --vy-danger: var(--ts-danger);
    --vy-danger-strong: var(--ts-danger);
    --vy-feature: var(--fm-lit); 
    --vy-feature-fg: var(--ec-fg);
    --vy-feature-fg-2: var(--ec-fg-2);
    --vy-feature-action: var(--ec-accent);
    --vy-feature-action-fg: var(--ec-accent-fg);
    --vy-radius: var(--ec-btn-radius);
    --vy-radius-lg: var(--ec-radius);
    --vy-btn-radius: var(--ec-btn-radius);
    --vy-font-body: var(--ec-font-body); 
    --vy-font-display: var(--ec-font-display);
    --vy-font-mono: var(--ts-font-mono);
    --vy-focus: var(--ts-focus-width, 2px) solid var(--ts-focus);
    --vy-dur-1: var(--ec-dur-1);
    --vy-dur-2: var(--ec-dur-2);

    
    --calendar-bg: var(--ec-surface);
    --calendar-week-bg: var(--ec-surface-2);
    --calendar-select-color: var(--ec-fg);
    --calendar-select-bg-color: var(--ts-control-bg, var(--ec-surface));
    --calendar-disabled-bg: transparent;
    --calendar-disabled-color: var(--ec-fg-2);
    --btn-primary-bg: var(--ec-accent);
    --btn-primary-color: var(--ec-accent-fg);
    --body-bg: var(--ec-bg);

    
    --focus: var(--ts-focus);

    
    --template-bg-dark: var(--ec-fg);
    --template-bg-dark-3: color-mix(in srgb, var(--ec-fg) 3%, var(--ec-surface));
    --template-bg-dark-5: color-mix(in srgb, var(--ec-fg) 5%, var(--ec-surface));
    --template-bg-dark-7: color-mix(in srgb, var(--ec-fg) 7%, var(--ec-surface));
    --template-bg-dark-10: color-mix(in srgb, var(--ec-fg) 10%, var(--ec-surface));
    --template-bg-dark-40: color-mix(in srgb, var(--ec-fg) 40%, var(--ec-surface));
    --template-bg-dark-50: color-mix(in srgb, var(--ec-fg) 50%, var(--ec-surface));
    --template-bg-dark-60: var(--ec-fg-2);
    --template-bg-dark-80: var(--ec-fg);
    --hue: 75; 
    --link-color: var(--ts-link);
    --body-color: var(--ec-fg);
    --gray-400: var(--ec-border);
    --com-media-manager-content-bg: var(--ec-surface);
    --com-media-manager-content-color: var(--ec-fg);
    --com-media-manager-disk-name-color: var(--ec-fg);
    --com-media-manager-infobar-dt-color: var(--ec-fg-2);
    --com-media-manager-overlay-bg: var(--ec-surface-2);
    --com-media-manager-overlay-header-bg: var(--ec-surface-2);
    --com-media-manager-toolbar-icon-color: var(--ec-fg-2);
    --com-media-manager-tree-item-hover-bg: var(--ec-surface-2);

    
    --grid-layout-gap: var(--ec-grid-gap);
    --grid-item--min-width: 16rem;
}



@media (prefers-reduced-motion: reduce) {
    :root,
    [data-ec-preset] {
        --ec-dur-1: 0ms;
        --ec-dur-2: 0ms;
        --ec-dur-3: 0ms;
    }
}

:root[data-color-scheme="dark"] {
    --ts-check-mark: var(--ts-mark-ink-check);
    --ts-radio-mark: var(--ts-mark-ink-dot);
    --ts-dash-mark: var(--ts-mark-ink-dash);
    --ts-switch-mark: var(--ts-mark-ink-knob);
}