/*
 * VirgilTrack tokens mapped onto Radzen (B-05). Linked straight after <RadzenTheme> in App.razor.
 *
 * Radzen's neutral 'standard' theme gives the structure (outlined inputs, no ripple, sentence-case buttons); this
 * file replaces its colours, font, sizes and radii with the vt tokens, for light and dark, so Radzen dialogs, side
 * panels, inputs, date pickers, the HTML editor and grids look like the rest of VirgilTrack and follow the theme.
 * The selectors are one step more specific than Radzen's :root, so the link order can't undo them.
 *
 * Dark mode keeps the light theme's rules (one stylesheet, instant switching), so the --rz-base-* scale keeps its
 * light-theme meaning in dark mode as well: 50 is the surface, 900 the text.
 */

/* ── Light values ── */
html:root, [data-bs-theme=light] {
  --rz-base-50: var(--vt-white);
  --rz-base-100: var(--vt-paper);
  --rz-base-200: var(--vt-gray-100);
  --rz-base-300: var(--vt-gray-200);
  --rz-base-400: var(--vt-gray-300);
  --rz-base-500: #97A0B1;
  --rz-base-600: var(--vt-gray-500);
  --rz-base-700: var(--vt-gray-600);
  --rz-base-800: var(--vt-gray-700);
  --rz-base-900: var(--vt-ink);
  --rz-base: var(--vt-gray-200);
  --rz-base-light: var(--vt-gray-100);
  --rz-base-lighter: var(--vt-paper);
  --rz-base-dark: var(--vt-gray-600);
  --rz-base-darker: var(--vt-ink);
  --rz-on-base: var(--vt-ink);
  --rz-on-base-light: var(--vt-ink);
  --rz-on-base-lighter: var(--vt-ink);
  --rz-on-base-dark: var(--vt-white);
  --rz-on-base-darker: var(--vt-white);
  --rz-on-success: var(--vt-white);
  --rz-on-danger: var(--vt-white);
  --rz-dialog-mask-background-color: var(--vt-gray-900);
  --rz-tooltip-background-color: var(--vt-gray-900);
  --rz-tooltip-color: var(--vt-white);
}

/* ── Dark values ── */
html[data-bs-theme=dark], [data-bs-theme=dark] {
  --rz-base-50: var(--vt-surface);
  --rz-base-100: var(--vt-surface-muted);
  --rz-base-200: var(--vt-border);
  --rz-base-300: var(--vt-border-strong);
  --rz-base-400: #4A5A75;
  --rz-base-500: #6B7A92;
  --rz-base-600: var(--vt-text-subtle);
  --rz-base-700: var(--vt-text-muted);
  --rz-base-800: var(--vt-gray-300);
  --rz-base-900: var(--vt-text);
  --rz-base: var(--vt-border-strong);
  --rz-base-light: var(--vt-border);
  --rz-base-lighter: var(--vt-surface-muted);
  --rz-base-dark: var(--vt-text-muted);
  --rz-base-darker: var(--vt-text);
  --rz-on-base: var(--vt-text);
  --rz-on-base-light: var(--vt-text);
  --rz-on-base-lighter: var(--vt-text);
  --rz-on-base-dark: var(--vt-surface);
  --rz-on-base-darker: var(--vt-surface);
  --rz-on-success: var(--vt-brand-950);   /* white on #2FBF6F is 2.39:1 */
  --rz-on-danger: var(--vt-brand-950);    /* white on #F2557A is 3.30:1 */
  --rz-dialog-mask-background-color: #000000;
  --rz-tooltip-background-color: var(--vt-border-strong);
  --rz-tooltip-color: var(--vt-text);
  --rz-shadow-1: 0 1px 2px rgb(0 0 0 / .3), 0 1px 3px rgb(0 0 0 / .35);
  --rz-shadow-2: var(--vt-shadow);
  --rz-shadow-3: var(--vt-shadow);
  --rz-shadow-4: var(--vt-shadow-lg);
  --rz-shadow-5: var(--vt-shadow-lg);
  --rz-shadow-6: var(--vt-shadow-lg);
  --rz-sidebar-background-color: var(--vt-surface);
  color-scheme: dark;
}

/* ── Values that follow the theme through the vt tokens ── */
html:root, [data-bs-theme] {
  /* Brand and status: solid, -light, -lighter (soft background) and -dark/-darker (the AA text colour) */
  --rz-primary: var(--vt-primary);
  --rz-primary-light: color-mix(in srgb, var(--vt-primary) 75%, var(--vt-surface));
  --rz-primary-lighter: var(--vt-primary-soft);
  --rz-primary-dark: var(--vt-primary-hover);
  --rz-primary-darker: var(--vt-primary-hover);
  --rz-on-primary: var(--vt-on-primary);
  --rz-on-primary-light: var(--vt-on-primary);
  --rz-on-primary-lighter: var(--vt-primary-hover);
  --rz-on-primary-dark: var(--vt-on-primary);
  --rz-on-primary-darker: var(--vt-on-primary);
  /* Secondary is neutral (Radzen's pink and violet are retired) */
  --rz-secondary: var(--vt-neutral-text);
  --rz-secondary-light: color-mix(in srgb, var(--vt-neutral-text) 75%, var(--vt-surface));
  --rz-secondary-lighter: var(--vt-neutral-soft);
  --rz-secondary-dark: var(--vt-text);
  --rz-secondary-darker: var(--vt-text);
  --rz-on-secondary: var(--vt-surface);
  --rz-on-secondary-light: var(--vt-surface);
  --rz-on-secondary-lighter: var(--vt-neutral-text);
  --rz-on-secondary-dark: var(--vt-surface);
  --rz-on-secondary-darker: var(--vt-surface);
  --rz-info: var(--vt-info);
  --rz-info-light: color-mix(in srgb, var(--vt-info) 75%, var(--vt-surface));
  --rz-info-lighter: var(--vt-info-soft);
  --rz-info-dark: var(--vt-info-text);
  --rz-info-darker: var(--vt-info-text);
  --rz-on-info: var(--vt-on-primary);
  --rz-on-info-light: var(--vt-on-primary);
  --rz-on-info-lighter: var(--vt-info-text);
  --rz-on-info-dark: var(--vt-surface);
  --rz-on-info-darker: var(--vt-surface);
  --rz-success: var(--vt-success);
  --rz-success-light: color-mix(in srgb, var(--vt-success) 75%, var(--vt-surface));
  --rz-success-lighter: var(--vt-success-soft);
  --rz-success-dark: var(--vt-success-text);
  --rz-success-darker: var(--vt-success-text);
  --rz-on-success-light: var(--vt-ink);
  --rz-on-success-lighter: var(--vt-success-text);
  --rz-on-success-dark: var(--vt-surface);
  --rz-on-success-darker: var(--vt-surface);
  --rz-warning: var(--vt-warning);
  --rz-warning-light: color-mix(in srgb, var(--vt-warning) 75%, var(--vt-surface));
  --rz-warning-lighter: var(--vt-warning-soft);
  --rz-warning-dark: var(--vt-warning-text);
  --rz-warning-darker: var(--vt-warning-text);
  --rz-on-warning: var(--vt-ink);         /* white on #E09412 is 2.50:1 */
  --rz-on-warning-light: var(--vt-ink);
  --rz-on-warning-lighter: var(--vt-warning-text);
  --rz-on-warning-dark: var(--vt-surface);
  --rz-on-warning-darker: var(--vt-surface);
  --rz-danger: var(--vt-danger);
  --rz-danger-light: color-mix(in srgb, var(--vt-danger) 75%, var(--vt-surface));
  --rz-danger-lighter: var(--vt-danger-soft);
  --rz-danger-dark: var(--vt-danger-text);
  --rz-danger-darker: var(--vt-danger-text);
  --rz-on-danger-light: var(--vt-ink);
  --rz-on-danger-lighter: var(--vt-danger-text);
  --rz-on-danger-dark: var(--vt-surface);
  --rz-on-danger-darker: var(--vt-surface);
  /* Notifications carry text, so success uses the deep green (B-02) */
  --rz-notification-success-background-color: var(--vt-success-text);
  --rz-notification-success-color: var(--vt-surface);
  --rz-notification-success-icon-color: var(--vt-surface);

  /* Text and surfaces */
  --rz-text-title-color: var(--vt-text);
  --rz-text-color: var(--vt-text);
  --rz-text-secondary-color: var(--vt-text-muted);
  --rz-text-tertiary-color: var(--vt-text-subtle);
  --rz-link-color: var(--vt-link);
  --rz-link-hover-color: var(--vt-primary-hover);
  --rz-base-background-color: var(--vt-surface);
  --rz-body-background-color: var(--vt-bg);
  --rz-dialog-background-color: var(--vt-surface);
  --rz-dialog-title-background-color: var(--vt-surface);
  --rz-panel-background-color: var(--vt-surface);
  --rz-card-background-color: var(--vt-surface);
  --rz-input-background-color: var(--vt-surface);
  --rz-input-hover-background-color: var(--vt-surface);
  --rz-input-focus-background-color: var(--vt-surface);
  --rz-editor-content-background-color: var(--vt-surface);
  --rz-datepicker-panel-background-color: var(--vt-surface);
  --rz-datepicker-header-background-color: var(--vt-surface);
  --rz-dropdown-open-background-color: var(--vt-surface);
  --rz-grid-background-color: var(--vt-surface);
  --rz-grid-stripe-odd-background-color: var(--vt-surface);
  --rz-grid-stripe-background-color: var(--bs-gray-100);
  --rz-grid-selected-background-color: var(--vt-primary-soft);
  --rz-slider-handle-background-color: var(--vt-surface);
  --rz-slider-disabled-handle-background-color: var(--vt-surface);
  --rz-chip-background-color: var(--vt-neutral-soft);   /* the same pair as .badge-light */
  --rz-chip-color: var(--vt-neutral-text);
  --rz-button-base-background-color: var(--vt-surface-muted);
  --rz-button-base-color: var(--vt-text);
  --rz-input-border: var(--rz-border-width) solid var(--vt-border-strong);
  --rz-input-border-block-end: var(--rz-border-width) solid var(--vt-border-strong);
  --rz-input-hover-border: var(--rz-border-width) solid var(--vt-text-subtle);
  --rz-input-focus-border: var(--rz-border-width) solid var(--vt-primary);
  --rz-input-focus-shadow: var(--vt-focus-ring);
  --rz-outline-color: var(--vt-primary);

  /* Type: the VirgilTrack body font at 14 px, sentence case, nothing below 12 px (11 px overlines) */
  --rz-text-font-family: var(--vt-font-body);
  --rz-body-font-size: var(--vt-text-md);
  --rz-body-line-height: var(--vt-leading-normal);
  --rz-input-font-size-xs: var(--vt-text-xs);
  --rz-input-font-size-lg: var(--vt-text-lg);
  --rz-text-caption-font-size: var(--vt-text-xs);
  --rz-text-overline-font-size: 11px;
  --rz-badge-text-transform: none;
  --rz-datepicker-calendar-header-text-transform: none;
  --rz-scheduler-today-button-text-transform: none;
  --rz-scheduler-header-text-transform: none;
  --rz-text-h1-font-size: var(--vt-text-3xl);
  --rz-text-h2-font-size: var(--vt-text-2xl);
  --rz-text-h3-font-size: var(--vt-text-xl);
  --rz-text-h4-font-size: var(--vt-text-lg);
  --rz-text-h5-font-size: var(--vt-text-lg);
  --rz-text-h6-font-size: var(--vt-text-md);
  --rz-dialog-title-font-size: var(--vt-text-xl);
  --rz-dialog-title-font-weight: 600;
  --rz-dialog-title-letter-spacing: normal;

  /* Shape and depth */
  --rz-border-radius: var(--vt-radius-sm);
  --rz-button-border-radius: var(--vt-radius-sm);
  --rz-card-border-radius: var(--vt-radius);
  --rz-panel-border-radius: var(--vt-radius);
  --rz-dialog-border-radius: var(--vt-radius-lg);
  --rz-dialog-shadow: var(--vt-shadow-lg);
}

/* Buttons: 14 px, medium weight, sentence case */
.rz-button {
  font-size: var(--vt-text-md);
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
}
.rz-button.rz-button-sm { font-size: var(--vt-text-sm); }
.rz-button.rz-button-lg { font-size: var(--vt-text-lg); }
/* Solid success buttons and badges carry text: the deep green (light) or the mint (dark) with the matching text */
.rz-button.rz-success, .rz-badge-success { --rz-success: var(--vt-success-text); --rz-on-success: var(--vt-surface); }

/* Titles in the display font */
.rz-dialog-title, .rz-text-h1, .rz-text-h2, .rz-text-h3, .rz-text-h4, .rz-text-display-h1, .rz-text-display-h2,
.rz-text-display-h3, .rz-text-display-h4, .rz-text-display-h5, .rz-text-display-h6 {
  font-family: var(--vt-font-display);
}

/* Dark mode: the light theme's text utilities point at the light end of the scale, so point them at the tokens */
[data-bs-theme=dark] .rz-text-title-color { color: var(--vt-text) !important; }
[data-bs-theme=dark] .rz-text-color { color: var(--vt-text) !important; }
[data-bs-theme=dark] .rz-text-secondary-color { color: var(--vt-text-muted) !important; }
[data-bs-theme=dark] .rz-text-tertiary-color { color: var(--vt-text-subtle) !important; }