/*src/Ovhok.Web/wwwroot/css/brand-tokens.css*/
@import "./component-colors.css";

/*
 * Ovhok runtime design tokens.
 * Tailwind's generated --color-* variables are preferred; literal values are
 * only fallbacks for pages rendered before the Tailwind bundle is rebuilt.
 */
:root {
  color-scheme: light;

  /* Brand primitives */
  --ov-brand-navy: var(--color-brand-navy, #00179b);
  --ov-brand-navy-hover: var(--color-brand-navy-hover, #001273);
  --ov-brand-navy-soft: var(--color-brand-navy-soft, #e9edff);

  --ov-brand-blue: var(--color-brand-blue, #0169fb);
  --ov-brand-blue-hover: var(--color-brand-blue-hover, #0057d2);
  --ov-brand-blue-soft: var(--color-brand-blue-soft, #eaf3ff);

  --ov-brand-orange: var(--color-brand-orange, #fe7d03);
  --ov-brand-orange-hover: var(--color-brand-orange-hover, #d95f00);
  --ov-brand-orange-soft: var(--color-brand-orange-soft, #fff0e4);

  --ov-brand-amber: var(--color-brand-amber, #fcb906);
  --ov-brand-amber-hover: var(--color-brand-amber-hover, #d99a00);
  --ov-brand-amber-soft: var(--color-brand-amber-soft, #fff7d6);

  /* Semantic roles */
  --ov-primary: var(--color-primary, var(--ov-brand-navy));
  --ov-primary-hover: var(--color-primary-hover, var(--ov-brand-navy-hover));
  --ov-primary-soft: var(--color-primary-soft, var(--ov-brand-navy-soft));
  --ov-on-primary: var(--color-on-primary, #ffffff);

  --ov-secondary: var(--color-secondary, var(--ov-brand-blue));
  --ov-secondary-hover: var(--color-secondary-hover, var(--ov-brand-blue-hover));
  --ov-secondary-soft: var(--color-secondary-soft, var(--ov-brand-blue-soft));
  --ov-on-secondary: var(--color-on-secondary, #ffffff);

  --ov-accent: var(--color-accent, var(--ov-brand-orange));
  --ov-accent-hover: var(--color-accent-hover, var(--ov-brand-orange-hover));
  --ov-accent-soft: var(--color-accent-soft, var(--ov-brand-orange-soft));
  --ov-on-accent: var(--color-on-accent, #0b1739);

  --ov-tertiary: var(--color-tertiary, var(--ov-brand-amber));
  --ov-tertiary-hover: var(--color-tertiary-hover, var(--ov-brand-amber-hover));
  --ov-tertiary-soft: var(--color-tertiary-soft, var(--ov-brand-amber-soft));
  --ov-on-tertiary: var(--color-on-tertiary, #0b1739);

  /* Neutral surfaces */
  --ov-background: var(--color-background, #f6f8fc);
  --ov-on-background: var(--color-on-background, #0b1739);
  --ov-surface: var(--color-surface, #ffffff);
  --ov-on-surface: var(--color-on-surface, #0b1739);
  --ov-surface-variant: var(--color-surface-variant, #eef2f8);
  --ov-on-surface-variant: var(--color-on-surface-variant, #5d6982);
  --ov-surface-lowest: var(--color-surface-container-lowest, #ffffff);
  --ov-surface-low: var(--color-surface-container-low, #f9fbff);
  --ov-surface-container: var(--color-surface-container, #eef2f8);
  --ov-surface-high: var(--color-surface-container-high, #e5eaf2);
  --ov-surface-highest: var(--color-surface-container-highest, #d7deea);
  --ov-inverse-surface: var(--color-inverse-surface, #17213d);
  --ov-inverse-on-surface: var(--color-inverse-on-surface, #f8faff);
  --ov-outline: var(--color-outline, #a9b5ca);
  --ov-outline-variant: var(--color-outline-variant, #d7deea);

  /* Feedback */
  --ov-success: var(--color-success, #067647);
  --ov-success-hover: var(--color-success-hover, #055f3a);
  --ov-success-soft: var(--color-success-soft, #e8f7f0);

  --ov-warning: var(--color-warning, #b54708);
  --ov-warning-hover: var(--color-warning-hover, #8f3606);
  --ov-warning-soft: var(--color-warning-soft, #fff4e5);

  --ov-danger: var(--color-error, #b42318);
  --ov-danger-hover: var(--color-error-hover, #8f1c13);
  --ov-danger-soft: var(--color-error-soft, #fff0ef);

  --ov-info: var(--color-info, #0169fb);
  --ov-info-hover: var(--color-info-hover, #0057d2);
  --ov-info-soft: var(--color-info-soft, #eaf3ff);

  /* Shared sizing and effects */
  --ov-radius-sm: 0.5rem;
  --ov-radius-md: 0.75rem;
  --ov-radius-lg: 0.875rem;
  --ov-radius-xl: 1rem;
  --ov-radius-2xl: 1.25rem;

  --ov-shadow-soft: 0 8px 24px rgb(11 23 57 / 0.06);
  --ov-shadow-card: 0 14px 38px rgb(11 23 57 / 0.08);
  --ov-shadow-float: 0 24px 65px rgb(7 23 68 / 0.16);

  --ov-focus-ring: 0 0 0 0.22rem rgb(1 105 251 / 0.18);

  --ov-transition-fast: 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --ov-transition-standard: 220ms cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Component-specific colour roles */
  --ov-nav-active-bg: var(--ov-primary-soft);
  --ov-nav-active-text: var(--ov-primary);
  --ov-nav-hover-bg: var(--ov-secondary-soft);

  --ov-link: var(--ov-secondary);
  --ov-link-hover: var(--ov-secondary-hover);

  --ov-button-primary-bg: var(--ov-primary);
  --ov-button-primary-hover: var(--ov-primary-hover);

  --ov-button-secondary-bg: var(--ov-secondary);
  --ov-button-secondary-hover: var(--ov-secondary-hover);

  --ov-button-accent-bg: var(--ov-accent);
  --ov-button-accent-hover: var(--ov-accent-hover);

  --ov-button-highlight-bg: var(--ov-tertiary);
  --ov-button-highlight-hover: var(--ov-tertiary-hover);

  --ov-card-bg: var(--ov-surface);
  --ov-card-border: var(--ov-outline-variant);
  --ov-card-muted-bg: var(--ov-surface-low);

  --ov-input-bg: var(--ov-surface);
  --ov-input-border: var(--ov-outline-variant);
  --ov-input-border-hover: var(--ov-outline);
  --ov-input-border-focus: var(--ov-secondary);

  --ov-table-header-bg: var(--ov-surface-container);
  --ov-table-row-hover: var(--ov-secondary-soft);

  /* Compatibility aliases used by existing files */
  --ovhok-primary: var(--ov-primary);
  --ovhok-on-primary: var(--ov-on-primary);
  --ovhok-secondary: var(--ov-secondary);
  --ovhok-on-secondary: var(--ov-on-secondary);
  --ovhok-tertiary: var(--ov-tertiary);
  --ovhok-on-tertiary: var(--ov-on-tertiary);
  --ovhok-surface: var(--ov-background);
  --ovhok-surface-container-low: var(--ov-surface-lowest);
  --ovhok-surface-container: var(--ov-surface-container);
  --ovhok-surface-container-high: var(--ov-surface-high);
  --ovhok-on-surface: var(--ov-on-surface);
  --ovhok-inverse-surface: var(--ov-inverse-surface);
  --ovhok-outline-variant: var(--ov-outline-variant);
  --ovhok-error: var(--ov-danger);
  --ovhok-focus: var(--ov-secondary);
  --ovhok-radius: var(--ov-radius-lg);

  /* Existing company-calendar aliases */
  --ov-navy: var(--ov-primary);
  --ov-blue: var(--ov-secondary);
  --ov-gold: var(--ov-tertiary);
  --ov-orange: var(--ov-accent);
  --ov-ink: var(--ov-on-surface);
  --ov-muted: var(--ov-on-surface-variant);
  --ov-line: var(--ov-outline-variant);
  --ov-soft: var(--ov-background);
  --ov-white: var(--ov-surface);

  /* Existing identity aliases */
  --identity-navy: var(--ov-inverse-surface);
  --identity-blue: var(--ov-primary);
  --identity-electric: var(--ov-secondary);
  --identity-orange: var(--ov-accent);
  --identity-amber: var(--ov-tertiary);
  --identity-ink: var(--ov-on-surface);
  --identity-muted: var(--ov-on-surface-variant);
  --identity-border: var(--ov-outline-variant);
  --identity-surface: var(--ov-surface);
  --identity-page: var(--ov-background);
  --identity-danger: var(--ov-danger);
  --identity-success: var(--ov-success);
  --identity-shadow: var(--ov-shadow-float);
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  min-height: 100%;
  background: var(--ov-background);
  color-scheme: light;
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ov-on-background);
  background: var(--ov-background);
  font-family: "Manrope", "Inter", ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

::selection {
  color: var(--ov-on-surface);
  background: color-mix(in srgb, var(--ov-secondary) 24%, transparent);
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ov-secondary) 42%, transparent);
  outline-offset: 2px;
}

:where(a) {
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: 0.18em;
}

:where(button, input, select, textarea) {
  font: inherit;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}