/*
 * 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 ------------------------------------------------------ */
  /* base = a sheet of paper, muted = the desk it lies on. Glass alphas are
     tinted with the canvas, not pure white, so frosted chrome stays warm. */
  --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(250, 249, 245, 0.66);
  --ui-surface-glass-strong: rgba(250, 249, 245, 0.9);
  --ui-surface-transparent: transparent;
  --ui-surface-hover: rgba(20, 20, 19, 0.05);
  --ui-surface-active: rgba(20, 20, 19, 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-subtle);
  --ui-border-row: var(--ui-border-subtle);
  --ui-border-glass: rgba(20, 20, 19, 0.12);
  --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-lg: var(--ui-primitive-shadow-lg);
  --ui-shadow-panel: 0 10px 26px -18px rgba(20, 20, 19, 0.34), 0 1px 2px rgba(20, 20, 19, 0.05);
  --ui-shadow-card: 0 6px 16px -12px rgba(20, 20, 19, 0.3), 0 1px 2px rgba(20, 20, 19, 0.05);
  --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: 12px;
  --ui-backdrop-blur-lg: 20px;
  --ui-backdrop-saturate: saturate(160%);

  --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 -------------------------------------------------- */
  /* Display serif for titles, Inter for everything operational. The scale is
     a 1.22 ratio from the 1rem body step, rounded to whole pixels at 16px. */
  --ui-font-body: var(--ui-font-sans);
  --ui-font-heading: var(--ui-font-display);

  --ui-font-size-xs: 0.75rem;
  --ui-font-size-sm: 0.875rem;
  --ui-font-size-md: 1rem;
  --ui-font-size-lg: 1.125rem;
  --ui-font-size-xl: 1.375rem;
  --ui-font-size-2xl: 1.75rem;
  --ui-font-size-3xl: 2.125rem;

  --ui-font-weight-regular: 400;
  --ui-font-weight-medium: 500;
  --ui-font-weight-semibold: 600;
  --ui-font-weight-bold: 700;

  --ui-font-line-tight: 1.18;
  --ui-font-line-snug: 1.35;
  --ui-font-line-normal: 1.55;

  --ui-font-tracking-tight: -0.018em;
  --ui-font-tracking-normal: 0;
  --ui-font-tracking-wide: 0.08em;

  /* --- 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);
  /* One page rhythm for every module tab and standalone page. Owned here so a
     new screen inherits the gutter instead of inventing its own literal. */
  --ui-space-page-x: var(--ui-space-6);
  --ui-space-page-y: var(--ui-space-5);
  --ui-space-page-stack: var(--ui-space-5);

  /* --- 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-4);

  --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-subtle);
  --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-8);

  /* --- 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-control);
  --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-md);
  --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 18px 44px -22px rgba(20, 20, 19, 0.5);
  --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(20, 20, 19, 0.46);
  --ui-modal-secondary-backdrop-opacity: 0.3;
  --ui-overlay-bg: rgba(250, 249, 245, 0.82);
  --ui-overlay-strong-bg: rgba(20, 20, 19, 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;
}