/* Jetons du hub — ses valeurs sur les rôles de la fondation canonique : le bleu d'action, l'anneau de
   focus, la mesure de lecture ; sur le fil d'Ariane canonique : le verre sombre collant du hub, et la
   teinte de chaque rubrique sur la bande de ses pages sœurs. */

@layer tokens {
    :root {
        --canon-shadow-overlay: 0 8px 24px rgb(0 0 0 / 0.12);
        --canon-color-action-luxis: rgb(10 75 180);
        --canon-theme-focus: #3010b8;
    }
}

/* Valeurs que les feuilles du hub écrivaient en dur, chacune sous le nom de son premier emploi
   — famille, objet, rôle (exvae #42, forme 3). */
@layer tokens {
    :root {
        --local-color-decor-link-career-hover-surface: rgb(0 255 200 / 0.4);
        --local-color-decor-link-career-surface: rgb(0 255 200 / 0.2);
        --local-color-decor-link-career-bubbles-item-surface: rgb(255 255 255 / 0.3);
        --local-color-decor-link-career-bubbles-item-surface-2: rgb(255 0 191 / 0.04);
        --local-color-decor-link-career-bubbles-item-surface-3: rgb(255 72 0 / 0.04);
        --local-color-decor-link-career-bubbles-item-surface-4: rgb(255 0 34 / 0.04);
        --local-color-decor-link-career-bubbles-surface: rgb(247 245 245);
        --local-color-decor-link-career-examples-surface: rgb(0 190 255 / 0.2);
        --local-color-decor-link-career-hub-views-surface: rgb(255 255 255 / 0.1);
        --local-color-decor-link-career-image-line: rgb(255 255 255 / 0.4);
        --local-color-decor-account-backdrop-surface: rgb(255 255 255 / 0.6);
        --local-color-decor-account-backdrop-surface-2: rgb(255 0 0 / 0.2);
        --local-color-decor-account-backdrop-surface-3: rgb(0 255 0 / 0.2);
        --local-color-decor-account-backdrop-surface-4: rgb(0 0 255 / 0.2);
        --local-color-decor-account-label-ink: rgb(0 0 0 / 0.7);
        --local-color-decor-account-fine-ink: rgb(0 0 0 / 0.5);
        --local-color-decor-account-tabs-line: rgb(0 0 0 / 0.1);
        --local-color-decor-home-link-ink: blue;
        --local-color-decor-home-gallery-item-image-line: rgb(0 0 0 / 0);
        --local-color-decor-home-banner-ink: #000;
        --local-color-decor-home-banner-surface: #ffcc00;
        --local-color-decor-home-line: rgb(255 255 255 / 0.9);
        --local-color-decor-home-showcase-arrow-hover-line: rgb(255 255 255 / 0.4);
        --local-color-decor-home-showcase-arrow-hover-surface: rgb(255 255 255 / 0.22);
        --local-color-decor-home-showcase-arrow-line: rgb(255 255 255 / 0.2);
        --local-color-decor-home-showcase-arrow-surface: rgb(255 255 255 / 0.14);
        --local-color-decor-home-showcase-dot-surface: rgb(255 255 255 / 0.85);
        --local-color-decor-home-showcase-dot-hover-surface: rgb(255 255 255 / 0.55);
        --local-color-decor-home-showcase-dot-surface-2: rgb(255 255 255 / 0.35);
        --local-color-decor-home-showcase-dot-surface-3: rgb(255 255 255 / 0.2);
        --local-color-decor-home-showcase-indicator-surface: rgb(255 255 255 / 0.9);
        --local-color-decor-home-showcase-stage-surface: #111;
        --local-color-decor-home-showcase-title-ink: white;
        --local-color-decor-home-icon-line: white;
        --local-color-decor-home-typewriter-underline-surface: color-mix(in srgb, var(--raw-color-white) 25%, transparent);
        --local-color-decor-app-link-hover-ink: black;
        --local-color-decor-app-link-hover-line: black;
        --local-color-decor-app-link-line: rgb(0 0 0 / 0.05);
        --local-color-decor-app-link-line-2: rgb(0 0 0 / 0.2);
        --local-color-decor-app-body-surface: rgb(0 0 0 / 0.08);
        --local-color-decor-app-body-surface-2: rgb(100 100 120 / 0.1);
        --local-color-decor-app-button-style-frost-hover-surface: rgb(255 255 255 / 0.2);
        --local-color-decor-app-button-style-frost-ink: rgb(0 0 0 / 0.5);
        --local-color-decor-app-button-style-frost-ink-2: rgb(0 0 0 / 0.9);
        --local-color-decor-app-button-style-frost-surface: rgb(255 255 255 / 0.5);
        --local-color-decor-app-button-style-halo-hover-ink: rgb(0 0 0 / 0.8);
        --local-color-decor-app-button-style-halo-hover-surface: rgb(255 255 255 / 0.4);
        --local-color-decor-app-button-style-halo-ink: rgb(255 255 255 / 0.9);
        --local-color-decor-app-button-style-neon-hover-line: white;
        --local-color-decor-app-button-style-snow-active-surface: hsl(216 20% 93%);
        --local-color-decor-app-button-style-snow-surface: rgb(255 255 255 / 0.62);
        --local-color-decor-app-header-burger-line-surface: rgb(0 0 0 / 0.85);
        --local-color-decor-app-header-drawer-search-field-line: rgb(0 0 0 / 0.15);
        --local-color-decor-app-header-drawer-search-item-line: rgb(0 0 0 / 0.08);
        --local-color-decor-app-header-drawer-session-head-line: rgb(0 0 0 / 0.1);
        --local-color-decor-app-header-dropdown-search-item-hover-surface: rgb(0 0 0 / 0.03);
        --local-color-decor-app-header-glass-frost-surface: rgb(255 255 255 / 0.274);
        --local-color-decor-app-header-item-surface: red;
        --local-color-decor-app-header-item-line: rgb(0 0 0 / 0);
        --local-color-decor-measures-main-surface: yellow;
        --local-color-decor-viewer-error-ink: rgb(255 238 238);
        --local-color-decor-viewer-failure-ink: rgb(0 0 0 / 0.7);
        --local-color-decor-viewer-foot-line: rgb(0 0 0 / 0.05);
        --local-color-decor-viewer-head-ink: rgb(255 255 255);
        --local-color-decor-viewer-head-surface: rgb(0 0 0 / 0.9);
        --local-color-decor-viewer-kind-ink: rgb(255 255 255 / 0.9);
        --local-color-decor-viewer-panel-line: rgb(255 255 255 / 0.8);
        --local-color-decor-viewer-panel-surface: rgb(245 245 247 / 0.92);
        --local-color-decor-viewer-placeholder-ink: rgb(0 0 0 / 0.6);
        --local-color-decor-viewer-stage-surface: rgb(255 255 255 / 0.8);
        --local-color-decor-viewer-page-number-ink: rgb(0 0 0 / 0.5);
        --local-color-decor-viewer-pager-arrow-hover-line: rgb(255 255 255 / 0.4);
        --local-color-decor-viewer-pager-arrow-hover-surface: rgb(255 255 255 / 0.2);
        --local-color-decor-viewer-pager-arrow-line: rgb(255 255 255 / 0.2);
        --local-color-decor-viewer-pager-arrow-surface: rgb(255 255 255 / 0.1);
        --local-color-decor-viewer-pager-surface: rgb(0 0 0 / 0.85);
        --local-color-decor-viewer-sidebar-head-ink: rgb(255 255 255 / 0.8);
        --local-color-decor-viewer-sidebar-head-surface: rgb(0 0 0 / 0.3);
        --local-color-decor-viewer-sidebar-line: rgb(255 255 255 / 0.1);
        --local-color-decor-viewer-sidebar-surface: rgb(30 30 30 / 0.95);
        --local-color-decor-viewer-thumbnail-hover-line: rgb(255 255 255 / 0.5);
        --local-color-decor-viewer-thumbnail-line: #007aff;
        --local-color-decor-viewer-thumbnail-number-ink: #fff;
        --local-color-decor-viewer-thumbnail-number-surface: rgb(0 0 0 / 0.7);
        --local-color-decor-viewer-thumbnail-surface: #fff;
        --local-color-decor-studies-item-line: rgb(0 0 0 / 0.1);
        --local-color-decor-listing-card-head-surface: rgb(5 20 35);
        --local-color-decor-listing-card-head-surface-2: rgb(55 48 94);
        --local-color-decor-listing-technical-card-head-surface: rgb(5 20 35);
        --local-color-decor-listing-technical-card-head-surface-2: rgb(48 69 94);
        --local-color-decor-essay-button-style-frost-hover-ink: rgb(255 255 255 / 0.85);
        --local-color-decor-essay-button-style-frost-hover-line: rgb(255 255 255 / 0.35);
        --local-color-decor-essay-button-style-frost-hover-surface: rgb(255 255 255 / 0.1);
        --local-color-decor-essay-button-style-frost-ink: rgb(255 255 255 / 0.5);
        --local-color-decor-essay-button-style-frost-line: rgb(255 255 255 / 0.18);
        --local-color-decor-essay-button-style-halo-hover-ink: rgb(255 255 255 / 0.95);
        --local-color-decor-essay-button-style-halo-hover-surface: rgb(255 255 255 / 0.15);
        --local-color-decor-essay-button-style-halo-ink: rgb(255 255 255 / 0.8);
        --local-color-decor-essay-chat-conversation-line: rgb(255 255 255 / 0.12);
        --local-color-decor-essay-chat-conversation-line-2: rgb(255 255 255 / 0.06);
        --local-color-decor-essay-chat-conversation-line-3: rgb(255 255 255 / 0.75);
        --local-color-decor-essay-chat-conversation-surface: rgb(18 20 28 / 0.55);
        --local-color-decor-essay-chat-conversation-surface-2: rgb(255 255 255 / 0.45);
        --local-color-decor-essay-chat-scrim-surface: rgb(0 0 0 / 0.35);
        --local-color-decor-essay-chat-scrim-surface-2: rgb(0 0 0 / 0.03);
        --local-color-decor-essay-chat-suggestion-mask: #fff;
        --local-color-decor-essay-chat-suggestion-surface: #e53e3e;
        --local-color-decor-essay-chat-suggestion-surface-2: #d946ef;
        --local-color-decor-essay-chat-suggestion-surface-3: #3b82f6;
        --local-color-decor-essay-chat-suggestion-surface-4: rgb(255 94 0);
        --local-color-decor-essay-chat-suggestion-surface-5: rgb(255 162 86);
        --local-color-decor-essay-chat-suggestion-hover-surface: rgb(255 255 255 / 0.11);
        --local-color-decor-essay-chat-suggestion-surface-6: rgb(255 255 255 / 0.06);
        --local-color-decor-essay-fields-sort-button-ink: white;
        --local-color-decor-figures-content-display-section-surface: rgb(255 255 255 / 0);
        --local-color-decor-figures-surface: white;
        --local-color-decor-figures-download-items-hover-line: white;
        --local-color-decor-figures-download-properties-surface: rgb(255 255 255 / 0.25);
        --local-color-decor-figures-download-property-surface: rgb(255 255 255 / 0.4);
        --local-color-decor-figures-download-property-value-line: rgb(0 0 0 / 0.1);
        --local-color-decor-figures-download-property-value-surface: rgb(255 255 255 / 0.6);
        --local-color-decor-figures-error-message-ink: #c00;
        --local-color-decor-figures-hub-gallery-item-surface: rgb(245 245 247 / 0.1);
        --local-color-decor-figures-hub-gallery-item-surface-2: rgb(245 245 247 / 0.0);
        --local-color-decor-figures-hub-gallery-item-surface-3: rgb(255 255 255 / 0.5);
        --local-color-decor-figures-item-ink: #444;
        --local-color-decor-hub-category-text-line: rgb(255 255 255);
        --local-color-decor-hub-detail-surface: rgb(255 255 255 / 0.2);
        --local-color-decor-levels-head-content-surface: #003189;
        --local-color-decor-levels-head-content-surface-2: #005adf;
        --local-color-decor-glossary-filters-line: rgb(0 0 0 / 0.08);
        --local-color-decor-glossary-term-head-ink: white;
        --local-color-decor-glossary-term-sources-line: rgb(0 0 0 / 0.06);
        --local-color-decor-listing-card-body-surface: rgb(255 255 255 / 0.88);
        --local-color-decor-listing-card-foot-line: rgb(0 0 0 / 0.05);
        --local-color-decor-listing-card-head-ink: white;
        --local-color-decor-listing-card-head-surface-3: rgb(0 0 0 / 0.9);
        --local-color-decor-listing-card-kind-surface: rgb(245 245 247 / 0.85);
        --local-color-decor-listing-sort-control-line: rgb(0 0 0 / 0.2);
        --local-color-decor-listing-sort-control-surface: rgb(255 255 255 / 0.9);
        --local-color-decor-listing-card-head-surface-4: rgb(19 3 3);
        --local-color-decor-listing-card-head-surface-5: rgb(126 37 52);
        --local-color-decor-essay-topic-card-foot-surface: #ff6b6b;
        --local-color-decor-essay-topic-card-foot-surface-2: #b59bfe;
        --local-color-decor-essay-topic-card-foot-surface-3: #d63031;
        --local-color-decor-essay-topic-card-foot-surface-4: #865ce7;
        --local-color-decor-essay-topic-intro-line: rgb(0 0 0 / 0.08);
        --local-color-decor-listing-card-head-surface-6: rgb(9 3 19);
        --local-color-decor-listing-card-head-surface-7: rgb(114 28 68);
        --local-color-decor-sitemap-link-hover-ink: rgb(0 0 0 / 0.9);
        --local-color-decor-sitemap-link-hover-line: white;
        --local-color-decor-sitemap-link-ink: rgb(0 0 0 / 0.75);
        --local-color-decor-plates-filter-field-surface: rgb(255 255 255 / 0.50);
        --local-color-decor-plates-item-hover-surface: rgb(255 255 255 / 0.3);
        --local-color-decor-plates-item-surface: rgb(0 0 0 / 0);
        --local-color-decor-plates-viewport-surface: rgb(255 255 255 / 0.15);
        --local-color-decor-plates-viewport-surface-2: rgb(255 255 255 / 0);
        --local-color-decor-plates-viewport-surface-3: rgb(255 0 0 / 0);
        --local-color-decor-pockets-download-items-hover-line: white;
        --local-color-decor-pockets-card-image-surface: rgb(255 255 255 / 0.1);
        --local-color-decor-pockets-card-serial-line: rgb(0 0 0 / 0.05);
        --local-color-decor-pockets-card-serial-surface: rgb(245 245 247 / 0.85);
        --local-color-decor-pockets-card-title-ink: white;
        --local-color-decor-pockets-card-title-surface: rgb(0 0 0 / 0.9);
        --local-color-decor-pockets-filter-field-surface: rgb(255 255 255 / 0.50);
        --local-color-decor-listing-card-head-surface-8: rgb(5 29 35);
        --local-color-decor-listing-card-head-surface-9: rgb(37 95 92);
        --local-color-decor-studies-link-hover-ink: rgb(0 0 0 / 0.9);
        --local-color-decor-studies-group-line: rgb(90 0 255 / 0.5);
        --local-color-decor-studies-legend-ink: rgb(89 0 255 / 0.7);
        --local-color-decor-studies-line-ink: white;
        --local-color-decor-studies-line-surface: rgb(0 0 0 / 0.9);
        --local-color-decor-studies-text-block-ink: rgb(0 0 0 / 0.8);
        --local-color-decor-studies-text-block-surface: rgb(255 255 255 / 0);
        --local-color-decor-studies-text-block-surface-2: rgb(255 255 255 / 0.4);
        --local-color-decor-symbol-content-display-section-surface: rgb(255 255 255 / 0);
        --local-color-decor-symbol-surface: white;
        --local-color-decor-symbol-download-items-hover-line: white;
        --local-color-decor-symbol-download-properties-surface: rgb(255 255 255 / 0.25);
        --local-color-decor-symbol-download-property-surface: rgb(255 255 255 / 0.4);
        --local-color-decor-symbol-download-property-value-line: rgb(0 0 0 / 0.1);
        --local-color-decor-symbol-download-property-value-surface: rgb(255 255 255 / 0.6);
        --local-color-decor-symbol-error-message-ink: #c00;
        --local-color-decor-symbol-hub-gallery-item-surface: rgb(245 245 247 / 0.1);
        --local-color-decor-symbol-hub-gallery-item-surface-2: rgb(245 245 247 / 0.0);
        --local-color-decor-symbol-hub-gallery-item-surface-3: rgb(255 255 255 / 0.5);
        --local-color-decor-listing-card-head-surface-10: rgb(121 50 29);
        --local-color-decor-verification-icon-error-surface: #e53935;
        --local-color-decor-verification-icon-error-surface-2: #c62828;
        --local-color-decor-verification-icon-success-ink: white;
        --local-color-decor-verification-icon-success-surface: #4caf50;
        --local-color-decor-verification-icon-success-surface-2: #45a049;
        --local-radius-link-career-bubbles-item: 999px;
        --local-radius-link-career-hub-views: 25px;
        --local-radius-link-career-image: 99px;
        --local-radius-account-input: 7px;
        --local-radius-home-gallery-item: 3px;
        --local-radius-app-link: 20px;
        --local-radius-app-link-2: 99px;
        --local-radius-app-header-burger-line: 2px;
        --local-radius-app-header-drawer-session-status: 10px;
        --local-radius-app-header-dropdown-item: 12px;
        --local-radius-app-header-dropdown-session-status: 8px;
        --local-radius-app-header-menu: 7px;
        --local-radius-viewer-panel: 10px;
        --local-radius-viewer-panel-2: 8px;
        --local-radius-viewer-page: 2px;
        --local-radius-viewer-pager-arrow: 8px;
        --local-radius-viewer-thumbnail: 4px;
        --local-radius-viewer-thumbnail-number: 3px;
        --local-radius-technical-image: 12px;
        --local-radius-studies-item: 8px;
        --local-radius-essay-chat-conversation: 16px;
        --local-radius-essay-chat-messages: 2px;
        --local-radius-essay-chat-suggestion: 100px;
        --local-radius-essay-content: 8px;
        --local-radius-essay-fields-word-button: 4px;
        --local-radius-essay-fold: 7px;
        --local-radius-essay-head-tools: 7px 7px 0 0;
        --local-radius-essay-masthead-column: 10px;
        --local-radius-figures-download-items: 14px;
        --local-radius-figures-download-properties: 16px;
        --local-radius-figures-download-property: 10px;
        --local-radius-figures-download-property-value: 6px;
        --local-radius-figures-hub-gallery-item: 7px;
        --local-radius-hub-card-icon: 10px;
        --local-radius-hub-category-icon: 12px;
        --local-radius-levels-head-content: 3px;
        --local-radius-glossary-diagram-area: 7px;
        --local-radius-glossary-filters: 8px;
        --local-radius-glossary-term-source: 99px;
        --local-radius-glossary-word: 4px;
        --local-radius-listing-bar: 999px;
        --local-radius-listing-bar-2: 12px;
        --local-radius-listing-image: 4px;
        --local-radius-listing-sort-control: 5px;
        --local-radius-essay-topic-intro: 8px;
        --local-radius-sitemap-link: 3px;
        --local-radius-plates-filter: 99px;
        --local-radius-plates-filter-2: 7px;
        --local-radius-plates-item: 8px;
        --local-radius-plates-viewport: 10px;
        --local-radius-pockets-download-items: 14px;
        --local-radius-pockets-filter: 99px;
        --local-radius-pockets-filter-2: 12px;
        --local-radius-pockets-filter-field: 8px;
        --local-radius-studies-group: 8px;
        --local-radius-studies-line: 20px 20px 0 0;
        --local-radius-studies-line-2: 0 0 20px 20px;
        --local-radius-studies-study: 20px;
        --local-radius-symbol-download-items: 14px;
        --local-radius-symbol-download-properties: 16px;
        --local-radius-symbol-download-property: 10px;
        --local-radius-symbol-download-property-value: 6px;
        --local-radius-symbol-hub-gallery-item: 7px;
        --local-shadow-link-career-image: 0 0 8px rgb(255 255 255 / 0.2);
        --local-shadow-home: 0 0 60px rgb(0 0 0 / 0.);
        --local-shadow-home-showcase-detail: 0 1px 12px rgb(0 0 0 / 0.25);
        --local-shadow-home-showcase-title: 0 2px 25px rgb(0 0 0 / 0.35);
        --local-shadow-app-button-style-frost-hover: 0 0 10px white;
        --local-shadow-app-button-style-halo-hover: 0 0 8px white;
        --local-shadow-app-button-style-snow-hover: 0 2px 14px rgb(0 0 0 / 0.18);
        --local-shadow-app-button-style-snow-hover-2: 0 2px 14px rgb(0 0 0 / 0.14);
        --local-shadow-app-header-item: 0 0 13px rgb(0 0 0 / 0.075);
        --local-shadow-viewer-error: 0 0 6px rgb(255 13 13);
        --local-shadow-viewer-name: 0 0 8px rgb(255 255 255);
        --local-shadow-viewer-panel: 0 0 30px rgb(0 0 0 / 0.2);
        --local-shadow-viewer-page: 0 2px 10px rgb(0 0 0 / 0.15);
        --local-shadow-viewer-thumbnail: 0 0 10px rgb(0 122 255 / 0.4);
        --local-shadow-resume: 0 10px 30px rgb(31 41 51 / 0.18);
        --local-shadow-technical-image: 0 16px 48px rgb(0 0 0 / 0.12);
        --local-shadow-essay-button-style-frost-hover: 0 0 10px rgb(255 255 255 / 0.15);
        --local-shadow-essay-button-style-halo-hover: 0 0 8px rgb(255 255 255 / 0.25);
        --local-shadow-essay-chat-conversation: 0 8px 32px rgb(0 0 0 / 0.35), inset 0 1px 0 rgb(255 255 255 / 0.12), inset 0 -1px 0 rgb(0 0 0 / 0.25);
        --local-shadow-essay-chat-conversation-2: 0 8px 32px rgb(0 0 0 / 0.10), inset 0 1px 0 rgb(255 255 255 / 0.80), inset 0 -1px 0 rgb(255 255 255 / 0.20);
        --local-shadow-figures-download-items-hover: 0 0 12px rgb(255 255 255 / 0.9);
        --local-shadow-figures-download-properties: 0 8px 32px rgb(0 0 0 / 0.08);
        --local-shadow-figures-hub-gallery-item-hover: 0 0 30px var(--raw-color-white-70);
        --local-shadow-listing-bar: 10px 10px 30px rgb(0 0 0 / 0.1);
        --local-shadow-sitemap-link-hover: 0 0 12px rgb(255 255 255);
        --local-shadow-plates-filter: 10px 10px 30px rgb(0 0 0 / 0.1);
        --local-shadow-pockets-download-items-hover: 0 0 12px rgb(255 255 255 / 0.9);
        --local-shadow-pockets-filter: 10px 10px 30px rgb(0 0 0 / 0.1);
        --local-shadow-studies-subtitle: 0 0 6px rgb(255 255 255 / 0.8);
        --local-shadow-symbol-download-items-hover: 0 0 12px rgb(255 255 255 / 0.9);
        --local-shadow-symbol-download-properties: 0 8px 32px rgb(0 0 0 / 0.08);
        --local-shadow-symbol-hub-gallery-item-hover: 0 0 30px var(--raw-color-white-70);
        --local-size-account-span: 2rem;
    }
}

/* Valeurs écrites en dur qui lisent un jeton variable sous la racine : déclarées sur la règle qui les lit. */
@layer components {
    .header-glass-shine {
        --local-shadow-app-header-glass-shine: inset 1px 1px 1px var(--header-shine);
    }
    .hub-card-icon {
        --local-color-decor-hub-card-icon-surface: color-mix(in srgb, var(--hub-color, white) 22%, transparent);
    }
}

@layer utilities {
    .u-bleed-top::before, .u-bleed-bottom::before {
        --local-shadow-app-bleed-top: 0 0 0 var(--local-bleed-reach) var(--bleed-color, transparent);
    }
}

@layer page {
    .home-intro {
        --local-shadow-home-intro: 0 var(--raw-space-2) var(--raw-space-6) color-mix(in srgb, var(--home-ink) 8%, transparent);
    }
    .diagram-legend-item::before {
        --local-color-decor-glossary-diagram-legend-item-surface: oklch(var(--glossary-lightness) var(--glossary-chroma) var(--diagram-legend-hue));
    }
}

/* Jetons que les feuilles du hub déclaraient hors de gbl/, même sélecteur, mêmes règles @ (exvae #42). */
@layer tokens {
    :root {
        --essay-canvas: var(--raw-color-pearl-2);
        --essay-surface: var(--raw-color-pearl-1);
        --essay-line: rgb(0 0 0 / 0.1);
        --essay-color: var(--local-color-identity-action);
        --essay-color-hover: var(--local-color-identity-action-hover);
        --essay-raised: white;
        --essay-popover-shadow: rgb(0 0 0 / 0.12);
        --essay-color-subtle: rgb(10 75 180 / 0.07);
    }
}

@layer components {
    [data-essay-dark] {
        --essay-canvas: hsl(216 5% 12%);
        --essay-surface: hsl(220 5% 15%);
        --essay-line: hsl(220 5% 20%);
        --essay-color: rgb(70 130 220);
        --essay-color-hover: rgb(100 155 240);
        --essay-color-subtle: rgb(70 130 220 / 0.12);
        --essay-raised: hsl(220 5% 15%);
        --essay-popover-shadow: rgb(0 0 0 / 0.2);
    }
    .fields-column {
        --fields-color: oklch(var(--fields-lightness) var(--fields-chroma) var(--fields-hue));
        --fields-color-hover: oklch(var(--fields-lightness-hover) var(--fields-chroma-hover) var(--fields-hue));
        --fields-color-soft: color-mix(in oklch, var(--fields-color) 2%, transparent);
    }
}

@layer page {
    .home-intro {
        --home-petrol: #2e5361;
        --home-sage: #9bb880;
        --home-lemon: #e8f18b;
    }
    .showcase-stage {
        --showcase-light-1: #ffe056;
        --showcase-light-2: #ffc628;
        --showcase-light-3: #ffadc2;
        --showcase-core-1: #ffe9c2;
        --showcase-core-2: #fff4d6;
        --showcase-core-3: #ffc685;
        --showcase-disc-1: #ffe74d;
        --showcase-disc-2: #fff8eb;
        --showcase-disc-3: #ffdbe5;
    }
    .glossary-term {
        --glossary-color: oklch(var(--glossary-lightness) var(--glossary-chroma) var(--fields-hue));
        --glossary-color-hover: oklch(var(--glossary-lightness-hover) var(--glossary-chroma-hover) var(--fields-hue));
        --glossary-color-soft: color-mix(in oklch, var(--glossary-color) 8%, transparent);
    }
    [data-glossary-order="psychique"] {
        --glossary-fields-color: oklch(55% 0.15 155);
    }
    [data-glossary-order="technique"] {
        --glossary-fields-color: oklch(55% 0.15 270);
    }
    [data-glossary-order="symbolique"] {
        --glossary-fields-color: oklch(55% 0.15 110);
    }
    [data-glossary-order="politique"] {
        --glossary-fields-color: oklch(55% 0.15 30);
    }
}