/*

 * System-wide semantic tokens ONLY (uinedodelki 6).

 * Contract: common/tests/test_semantic_tokens_domain_split_contract.py — every

 * declaration here must belong to an approved system-wide family. Domain and

 * page tokens live with their owner CSS:

 *   --rating-final-*        css/domains/rating_final_sheet.css

 *   --ui-ai-thinking-*      cabinet/ai.css

 *   --ui-clerical-error-*   cabinet/clerical_form_fields.css

 *   --header-*              css/header/_tokens.css

 *   --ui-surface-header*    css/header/_tokens.css

 *   --ui-layout-header-*    css/header/_tokens.css

 *   --ui-modal-width-*      cabinet/modals.css

 *   --ui-tabs-*             cabinet/base_modules.css

 *   --ui-cabinet-*          css/ui/layout/cabinet-shell-tokens.css

 *   teaching/exam/score/student surfaces  css/domains/cabinet_module_surfaces.css

 *   --ui-lesson-*           kursy/css/lesson_shell/tokens.css

 *   home hero motion        main/home_hero.css (scoped)

 *   --auth-*                css/domains/auth.css (scoped)

 */

:root {

  /* --- Shared layout breakpoints -------------------------------------- */

  /* CSS variables cannot be used inside @media conditions; these tokens
     document the canonical literals mirrored by cabinet/mobile chrome. */

  --ui-bp-phone: 576px;

  --ui-bp-tablet: 992px;



  /* --- Action + feedback colors ------------------------------------- */

  --ui-color-action: var(--ui-primitive-brand-500);

  --ui-color-action-hover: var(--ui-primitive-brand-600);

  --ui-color-action-active: var(--ui-primitive-brand-700);

  --ui-color-action-muted: var(--ui-primitive-brand-50);

  --ui-color-action-text: var(--ui-color-action);

  --ui-color-secondary-bg: var(--ui-primitive-neutral-200);



  --ui-color-success: var(--ui-primitive-success-600);

  --ui-color-success-muted: var(--ui-primitive-success-50);

  --ui-color-success-strong: var(--ui-primitive-success-600);

  --ui-color-success-on-muted: var(--ui-color-success-strong);

  --ui-color-warning: var(--ui-primitive-warning-600);

  --ui-color-warning-muted: var(--ui-primitive-warning-50);

  --ui-color-warning-strong: var(--ui-primitive-warning-600);

  --ui-color-warning-on-muted: var(--ui-color-warning-strong);

  --ui-color-danger: var(--ui-primitive-danger-600);

  --ui-color-danger-muted: var(--ui-primitive-danger-50);

  --ui-color-danger-strong: var(--ui-primitive-danger-600);

  --ui-color-danger-on-muted: var(--ui-color-danger-strong);

  --ui-color-info: var(--ui-primitive-brand-500);

  --ui-color-info-muted: var(--ui-primitive-brand-50);

  --ui-color-info-strong: var(--ui-primitive-brand-700);

  --ui-color-info-on-muted: var(--ui-color-info-strong);



  /* --- Surfaces ------------------------------------------------------ */

  --ui-surface-base: var(--ui-primitive-white);

  --ui-surface-muted: var(--ui-primitive-neutral-50);

  --ui-surface-raised: var(--ui-primitive-white);

  --ui-surface-inverse: var(--ui-primitive-neutral-900);

  --ui-surface-glass: rgba(255, 255, 255, 0.6);

  --ui-surface-glass-strong: rgba(255, 255, 255, 0.86);

  --ui-surface-transparent: transparent;

  --ui-surface-hover: rgba(0, 0, 0, 0.05);

  --ui-surface-active: rgba(0, 0, 0, 0.08);

  --ui-surface-shell: var(--ui-surface-base);

  --ui-surface-panel: var(--ui-surface-raised);

  --ui-surface-card: var(--ui-surface-raised);

  --ui-surface-card-hover: var(--ui-primitive-neutral-100);

  --ui-surface-card-active: var(--ui-surface-active);

  --ui-surface-modal: var(--ui-surface-raised);

  --ui-surface-toolbar: var(--ui-surface-glass);

  --ui-surface-empty: var(--ui-primitive-neutral-100);



  /* --- SitePattern wallpaper (owner: css/ui/components/site_pattern.css) --

     Two fixed layers behind all chrome: a full-bleed "wash" gradient and the

     active drawing mask lit by "paint". Theme packs tune this shared palette;

     purchasable [data-ui-pattern] packs swap only the mask tile. The defaults

     below are the branded "formulas" colors on light packs. */

  --ui-pattern-tile: url("../../../images/patterns/doodle-math.53aa429e9c22.svg");

  --ui-pattern-paint: linear-gradient(
    35deg,
    var(--ui-primitive-pattern-glow-teal) 0%,
    var(--ui-primitive-pattern-glow-blue) 38%,
    var(--ui-primitive-pattern-glow-violet) 68%,
    var(--ui-primitive-pattern-glow-rose) 100%
  );

  --ui-pattern-paint-opacity: 0.256;

  --ui-pattern-wash: linear-gradient(
    35deg,
    var(--ui-primitive-pattern-glow-teal) 0%,
    var(--ui-primitive-pattern-glow-blue) 38%,
    var(--ui-primitive-pattern-glow-violet) 68%,
    var(--ui-primitive-pattern-glow-rose) 100%
  );

  --ui-pattern-wash-opacity: 0.05;



  /* --- Borders --------------------------------------------------------- */

  --ui-border-subtle: var(--ui-primitive-neutral-200);

  --ui-border-strong: var(--ui-primitive-neutral-300);

  --ui-border-card: var(--ui-border-strong);

  --ui-border-row: var(--ui-border-strong);

  --ui-border-glass: rgba(0, 0, 0, 0.16);

  --ui-border-selected: var(--ui-color-action);



  /* --- Text + icons --------------------------------------------------- */

  --ui-text-primary: var(--ui-primitive-neutral-900);

  --ui-text-secondary: var(--ui-primitive-neutral-600);

  --ui-text-muted: var(--ui-primitive-neutral-500);

  --ui-text-inverse: var(--ui-primitive-white);

  --ui-text-on-accent: var(--ui-primitive-white);

  --ui-icon: var(--ui-text-secondary);

  --ui-icon-filter-muted: none;

  --ui-focus-ring: var(--ui-primitive-focus-ring);



  /* --- Shadows / blur / filters / opacity ------------------------------ */

  --ui-shadow-sm: var(--ui-primitive-shadow-sm);

  --ui-shadow-md: var(--ui-primitive-shadow-md);

  --ui-shadow-panel: 0 4px 18px rgba(15, 23, 42, 0.1), 0 1px 3px rgba(15, 23, 42, 0.06);

  --ui-shadow-card: 0 2px 10px rgba(15, 23, 42, 0.1), 0 1px 2px rgba(15, 23, 42, 0.06);

  --ui-shadow-highlight-warning: 0 0 0 3px color-mix(in srgb, var(--ui-color-warning) 45%, transparent);

  --ui-backdrop-blur-sm: 8px;

  --ui-backdrop-blur-md: 10px;

  --ui-backdrop-blur-lg: 18px;

  --ui-backdrop-saturate: saturate(180%);

  --ui-filter-hover-soft: brightness(0.97);

  --ui-filter-active-soft: brightness(0.95);

  --ui-filter-busy: saturate(0.9) grayscale(0.15);

  --ui-filter-muted: saturate(0.9);

  --ui-opacity-list-busy: 0.55;

  --ui-skeleton-shimmer-motion: 1200ms var(--ui-motion-easing-standard) infinite;



  /* --- Radius roles ----------------------------------------------------- */

  --ui-radius-none: 0;

  --ui-radius-circle: 50%;

  --ui-radius-control: var(--ui-radius-sm);

  --ui-radius-card: var(--ui-radius-lg);

  --ui-radius-panel: var(--ui-radius-xl);

  --ui-radius-shell: 1.125rem;

  --ui-radius-modal: var(--ui-radius-lg);



  /* --- Typography roles -------------------------------------------------- */

  --ui-font-size-xs: 0.75rem;

  --ui-font-size-sm: 0.875rem;

  --ui-font-size-md: 1rem;

  --ui-font-weight-medium: 500;

  --ui-font-weight-semibold: 600;

  --ui-font-weight-bold: 700;



  /* --- Interaction states ------------------------------------------------ */

  --ui-state-hover-bg: var(--ui-surface-hover);

  --ui-state-active-bg: var(--ui-surface-active);

  --ui-state-selected-bg: var(--ui-color-action-muted);

  --ui-state-disabled-opacity: 0.62;

  --ui-state-busy-opacity: 0.72;

  --ui-state-muted-opacity: 0.68;



  /* --- Spacing roles ------------------------------------------------------ */

  --ui-section-gap: var(--ui-space-4);

  --ui-card-gap: var(--ui-space-3);

  --ui-row-gap: var(--ui-space-3);

  --ui-toolbar-gap: var(--ui-space-3);



  /* --- Card / list / toolbar / empty-state components ---------------------- */

  --ui-card-bg: var(--ui-surface-card);

  --ui-card-border: var(--ui-border-card);

  --ui-card-radius: var(--ui-radius-card);

  --ui-card-shadow: var(--ui-shadow-card);

  --ui-card-hover-bg: var(--ui-surface-card-hover);

  --ui-card-hover-border: var(--ui-border-strong);

  --ui-card-selected-bg: var(--ui-state-selected-bg);

  --ui-card-selected-border: var(--ui-border-selected);

  --ui-card-padding: var(--ui-space-3);

  --ui-list-row-bg: var(--ui-surface-muted);

  --ui-list-row-border: var(--ui-border-row);

  --ui-list-row-radius: var(--ui-radius-md);

  --ui-list-row-padding: var(--ui-space-2) var(--ui-space-3);

  --ui-list-row-hover-bg: var(--ui-state-hover-bg);

  --ui-list-row-active-bg: var(--ui-state-active-bg);

  --ui-list-row-selected-bg: var(--ui-state-selected-bg);

  --ui-toolbar-bg: var(--ui-surface-toolbar);

  --ui-toolbar-border: var(--ui-border-strong);

  --ui-toolbar-radius: var(--ui-radius-panel);

  --ui-toolbar-padding: var(--ui-space-2);

  --ui-toolbar-sticky-bg: var(--ui-surface-header-solid);

  --ui-empty-bg: var(--ui-surface-empty);

  --ui-empty-border: var(--ui-border-strong);

  --ui-empty-radius: var(--ui-radius-panel);

  --ui-empty-padding: var(--ui-space-5);



  /* --- Scrollbars --------------------------------------------------------- */

  --ui-scrollbar-size: 5px;

  --ui-scrollbar-thumb: color-mix(in srgb, var(--ui-text-primary) 18%, transparent);

  --ui-scrollbar-thumb-hover: color-mix(in srgb, var(--ui-text-primary) 34%, transparent);

  --ui-scrollbar-track: transparent;



  /* --- Buttons ------------------------------------------------------------ */

  --ui-btn-radius: var(--ui-radius-sm);

  --ui-btn-font-size: var(--ui-font-size-sm);

  --ui-btn-font-weight: var(--ui-font-weight-medium);

  --ui-btn-gap: 0.375rem;

  --ui-btn-height: 2rem;

  --ui-btn-padding: 0.375rem 0.75rem;

  --ui-btn-sm-height: 1.875rem;

  --ui-btn-sm-padding: 0.3125rem 0.625rem;

  --ui-btn-xs-height: 1.625rem;

  --ui-btn-xs-padding: 0.1875rem 0.5rem;

  --ui-btn-lg-height: 2.25rem;

  --ui-btn-lg-padding: 0.5rem 0.875rem;

  --ui-btn-plate-bg: color-mix(in srgb, var(--ui-surface-raised) 90%, transparent);

  --ui-btn-plate-hover-bg: color-mix(in srgb, var(--ui-surface-raised) 94%, transparent);

  --ui-btn-plate-active-bg: color-mix(in srgb, var(--ui-surface-muted) 96%, transparent);

  --ui-btn-plate-disabled-bg: color-mix(in srgb, var(--ui-surface-muted) 90%, transparent);

  --ui-btn-control-accent: var(--ui-primitive-control-aurora-600);

  --ui-btn-control-accent-strong: var(--ui-primitive-control-aurora-700);

  --ui-btn-control-accent-soft: var(--ui-primitive-control-aurora-50);

  --ui-btn-primary-bg: color-mix(in srgb, var(--ui-btn-control-accent-soft) 90%, transparent);

  --ui-btn-primary-border: color-mix(in srgb, var(--ui-btn-control-accent) 82%, var(--ui-surface-raised));

  --ui-btn-primary-text: var(--ui-btn-control-accent-strong);

  --ui-btn-primary-hover-bg: color-mix(in srgb, var(--ui-primitive-control-aurora-100) 94%, transparent);

  --ui-btn-primary-hover-border: var(--ui-btn-control-accent);

  --ui-btn-primary-active-bg: color-mix(in srgb, var(--ui-primitive-control-aurora-200) 96%, transparent);

  --ui-btn-primary-active-border: var(--ui-btn-control-accent-strong);

  --ui-btn-toggle-checked-bg: var(--ui-btn-primary-active-bg);

  --ui-btn-toggle-checked-border: var(--ui-btn-primary-active-border);

  --ui-btn-toggle-checked-text: var(--ui-btn-primary-text);

  --ui-btn-secondary-bg: var(--ui-btn-plate-bg);

  --ui-btn-secondary-border: var(--ui-border-strong);

  --ui-btn-secondary-text: var(--ui-text-primary);

  --ui-btn-secondary-hover-bg: var(--ui-btn-plate-hover-bg);

  --ui-btn-secondary-hover-border: color-mix(in srgb, var(--ui-btn-control-accent) 42%, var(--ui-border-strong));

  --ui-btn-secondary-active-bg: var(--ui-btn-plate-active-bg);

  --ui-btn-secondary-active-border: color-mix(in srgb, var(--ui-btn-control-accent) 58%, var(--ui-border-strong));

  --ui-btn-danger-bg: color-mix(in srgb, var(--ui-color-danger-muted) 90%, transparent);

  --ui-btn-danger-border: color-mix(in srgb, var(--ui-color-danger) 64%, var(--ui-surface-raised));

  --ui-btn-danger-text: var(--ui-color-danger-strong);

  --ui-btn-danger-hover-bg: color-mix(in srgb, var(--ui-color-danger-muted) 94%, transparent);

  --ui-btn-danger-hover-border: color-mix(in srgb, var(--ui-color-danger) 78%, var(--ui-surface-raised));

  --ui-btn-danger-active-bg: color-mix(in srgb, var(--ui-color-danger-muted) 96%, transparent);

  --ui-btn-danger-active-border: color-mix(in srgb, var(--ui-color-danger) 88%, var(--ui-surface-raised));

  --ui-btn-success-bg: color-mix(in srgb, var(--ui-color-success-muted) 90%, transparent);

  --ui-btn-success-border: color-mix(in srgb, var(--ui-color-success) 64%, var(--ui-surface-raised));

  --ui-btn-success-text: var(--ui-color-success-strong);

  --ui-btn-success-hover-bg: color-mix(in srgb, var(--ui-color-success-muted) 94%, transparent);

  --ui-btn-success-hover-border: color-mix(in srgb, var(--ui-color-success) 78%, var(--ui-surface-raised));

  --ui-btn-success-active-bg: color-mix(in srgb, var(--ui-color-success-muted) 96%, transparent);

  --ui-btn-success-active-border: color-mix(in srgb, var(--ui-color-success) 88%, var(--ui-surface-raised));

  --ui-btn-warning-bg: color-mix(in srgb, var(--ui-color-warning-muted) 90%, transparent);

  --ui-btn-warning-border: color-mix(in srgb, var(--ui-color-warning) 66%, var(--ui-surface-raised));

  --ui-btn-warning-text: var(--ui-color-warning-strong);

  --ui-btn-warning-hover-bg: color-mix(in srgb, var(--ui-color-warning-muted) 94%, transparent);

  --ui-btn-warning-hover-border: color-mix(in srgb, var(--ui-color-warning) 80%, var(--ui-surface-raised));

  --ui-btn-warning-active-bg: color-mix(in srgb, var(--ui-color-warning-muted) 96%, transparent);

  --ui-btn-warning-active-border: color-mix(in srgb, var(--ui-color-warning) 88%, var(--ui-surface-raised));

  --ui-btn-info-bg: color-mix(in srgb, var(--ui-color-info-muted) 90%, transparent);

  --ui-btn-info-border: color-mix(in srgb, var(--ui-color-info) 64%, var(--ui-surface-raised));

  --ui-btn-info-text: var(--ui-color-info-strong);

  --ui-btn-info-hover-bg: color-mix(in srgb, var(--ui-color-info-muted) 94%, transparent);

  --ui-btn-info-hover-border: color-mix(in srgb, var(--ui-color-info) 78%, var(--ui-surface-raised));

  --ui-btn-info-active-bg: color-mix(in srgb, var(--ui-color-info-muted) 96%, transparent);

  --ui-btn-info-active-border: color-mix(in srgb, var(--ui-color-info) 88%, var(--ui-surface-raised));

  --ui-btn-disabled-bg: var(--ui-btn-plate-disabled-bg);

  --ui-btn-disabled-border: var(--ui-border-subtle);

  --ui-btn-disabled-text: var(--ui-text-muted);

  --ui-btn-close-filter: none;

  --ui-btn-close-opacity: 0.72;

  --ui-btn-close-hover-opacity: 1;



  /* --- Status pills ---------------------------------------------------------- */

  --ui-status-pill-bg: var(--ui-surface-muted);

  --ui-status-pill-border: var(--ui-border-subtle);

  --ui-status-pill-text: var(--ui-text-secondary);

  --ui-status-pill-success-bg: var(--ui-color-success-muted);

  --ui-status-pill-success-text: var(--ui-color-success-on-muted);

  --ui-status-pill-warning-bg: var(--ui-color-warning-muted);

  --ui-status-pill-warning-text: var(--ui-color-warning-on-muted);

  --ui-status-pill-danger-bg: var(--ui-color-danger-muted);

  --ui-status-pill-danger-text: var(--ui-color-danger-on-muted);

  --ui-status-pill-info-bg: var(--ui-color-info-muted);

  --ui-status-pill-info-text: var(--ui-color-info-on-muted);

  --ui-status-pill-muted-bg: var(--ui-surface-muted);

  --ui-status-pill-muted-text: var(--ui-text-muted);



  /* --- Tables ------------------------------------------------------------------ */

  --ui-table-bg: var(--ui-surface-raised);

  --ui-table-border: var(--ui-border-subtle);

  --ui-table-head-bg: var(--ui-surface-muted);

  --ui-table-cell-padding: var(--ui-space-2) var(--ui-space-3);

  --ui-table-dense-cell-padding: 0.25rem var(--ui-space-2);

  --ui-table-shell-radius: var(--ui-radius-sm);

  --ui-table-row-hover-bg: var(--ui-state-hover-bg);

  --ui-table-row-selected-bg: var(--ui-state-selected-bg);



  /* --- Toasts -------------------------------------------------------------------- */

  --ui-space-toast-offset: var(--ui-space-6);

  --ui-shadow-toast-hover: 0 14px 40px rgba(0, 0, 0, 0.28);

  --ui-toast-bg: var(--ui-surface-inverse);

  --ui-toast-text: var(--ui-text-inverse);

  --ui-toast-success-bg: var(--ui-color-success);

  --ui-toast-error-bg: var(--ui-color-danger);

  --ui-toast-warning-bg: var(--ui-color-warning);

  --ui-toast-info-bg: var(--ui-color-info);



  /* --- Overlays / modal shell ------------------------------------------------------ */

  --ui-modal-backdrop-bg: rgba(0, 0, 0, 0.5);

  --ui-modal-secondary-backdrop-opacity: 0.3;

  --ui-overlay-bg: rgba(255, 255, 255, 0.8);

  --ui-overlay-strong-bg: rgba(15, 16, 20, 0.98);



  /* --- Print --------------------------------------------------------------- */

  --ui-print-bg: var(--ui-primitive-white);

  --ui-print-text: var(--ui-primitive-neutral-900);

  --ui-print-muted: var(--ui-primitive-neutral-600);

  --ui-print-border: var(--ui-primitive-neutral-300);

  --ui-print-surface-muted: var(--ui-primitive-neutral-50);

  --ui-print-card-radius: var(--ui-radius-sm);

  --ui-print-code-radius: var(--ui-radius-sm);



  /* ui-z-* is the global stacking map (ADR-008). Keep numeric literals here. */

  --ui-z-tab-decoration: 0;

  --ui-z-tab-decoration-raised: 1;

  --ui-z-sticky: 100;

  --ui-z-underlay: -1;

  --ui-z-raised: 10;

  --ui-z-dropdown: 1000;

  --ui-z-modal-backdrop: 1040;

  --ui-z-modal: 1050;

  --ui-z-editor-popover: 1065;

  --ui-z-announcement: 2000;

  --ui-z-overlay: 5000;

  /* GD embed center dialogs: above embed drawers/find (--ui-z-overlay + n), below header/toast. */

  --ui-z-editor-modal: 5100;

  --ui-z-proctor: 8300;

  --ui-z-header: 8000;

  --ui-z-header-dropdown: 8010;

  --ui-z-toast: 8200;

  /* Stacked cabinet modals intentionally sit above header/toast chrome.

     Owner: ModalStackService (js/modal/application/services) reads these. */

  --ui-z-modal-stack-backdrop: 10040;

  --ui-z-modal-stack: 10050;

}