/*
 * TECNOVA / NOVA / v1.0.0
 * Source of truth: tokens.json. Regenerate with python3 generate_css.py.
 * A theme is a semantic UI palette; brand-* remains the fixed identity palette.
 * Set data-theme on <html>, not on arbitrary nested containers.
 * This file does not reset layout, replace app components or load fonts.
 */

/* @tokens shared */
:root {
  --tn-brand-primary: #5B45E0;
  --tn-brand-lavender: #B7A5F4;
  --tn-brand-ink: #141326;
  --tn-brand-white: #FFFFFF;
  --tn-font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tn-font-heading: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tn-font-body-size: 1rem;
  --tn-font-label-size: 0.875rem;
  --tn-font-caption-size: 0.8125rem;
  --tn-font-h1-size: clamp(1.75rem, 2.4vw, 2.5rem);
  --tn-font-h2-size: 1.5rem;
  --tn-font-h3-size: 1.125rem;
  --tn-font-weight-regular: 400;
  --tn-font-weight-medium: 500;
  --tn-font-weight-semibold: 600;
  --tn-font-weight-bold: 700;
  --tn-line-body: 1.5;
  --tn-line-heading: 1.2;
  --tn-line-label: 1.4;
  --tn-space-1: 4px;
  --tn-space-2: 8px;
  --tn-space-3: 12px;
  --tn-space-4: 16px;
  --tn-space-6: 24px;
  --tn-space-8: 32px;
  --tn-space-12: 48px;
  --tn-space-16: 64px;
  --tn-radius-sm: 8px;
  --tn-radius-md: 12px;
  --tn-radius-lg: 16px;
  --tn-radius-xl: 24px;
  --tn-radius-pill: 9999px;
  --tn-border-width: 1px;
  --tn-focus-width: 3px;
  --tn-focus-offset: 3px;
  --tn-control-height: 44px;
  --tn-control-height-compact: 40px;
  --tn-motion-fast: 120ms;
  --tn-motion-normal: 180ms;
  --tn-motion-slow: 280ms;
  --tn-motion-ease: cubic-bezier(0.2, 0, 0, 1);
}

/* @tokens light */
:root,
:root[data-theme="light"] {
  color-scheme: light;
  --tn-bg: #F6F5FB;
  --tn-surface: #FFFFFF;
  --tn-surface-raised: #F0EDF9;
  --tn-text: #141326;
  --tn-text-muted: #625B73;
  --tn-brand-text: #5B45E0;
  --tn-border: #DED8EB;
  --tn-border-strong: #847D96;
  --tn-focus-ring: #5B45E0;
  --tn-action-primary: #5B45E0;
  --tn-action-primary-hover: #4932C6;
  --tn-on-primary: #FFFFFF;
  --tn-accent-bg: #B7A5F4;
  --tn-on-accent: #141326;
  --tn-success-text: #0F6848;
  --tn-success-bg: #EAF7F0;
  --tn-success-border: #16805B;
  --tn-warning-text: #7A4300;
  --tn-warning-bg: #FFF5E0;
  --tn-warning-border: #A56608;
  --tn-danger-text: #A32336;
  --tn-danger-bg: #FFF0F2;
  --tn-danger-border: #C33A4F;
  --tn-info-text: #15548B;
  --tn-info-bg: #EDF5FF;
  --tn-info-border: #3276B1;
  --tn-shadow-sm: 0 2px 8px rgba(20, 19, 38, 0.06);
  --tn-shadow-md: 0 12px 32px rgba(20, 19, 38, 0.10);
}

/* @tokens dark */
:root[data-theme="dark"] {
  color-scheme: dark;
  --tn-bg: #141326;
  --tn-surface: #1D1A33;
  --tn-surface-raised: #28233F;
  --tn-text: #F7F5FF;
  --tn-text-muted: #C0B8D5;
  --tn-brand-text: #B7A5F4;
  --tn-border: #3C3558;
  --tn-border-strong: #817991;
  --tn-focus-ring: #B7A5F4;
  --tn-action-primary: #735BEF;
  --tn-action-primary-hover: #725AED;
  --tn-on-primary: #FFFFFF;
  --tn-accent-bg: #B7A5F4;
  --tn-on-accent: #141326;
  --tn-success-text: #82E2B1;
  --tn-success-bg: #15342C;
  --tn-success-border: #43A67B;
  --tn-warning-text: #FFD181;
  --tn-warning-bg: #3F2E15;
  --tn-warning-border: #C58B38;
  --tn-danger-text: #FFA7B5;
  --tn-danger-bg: #421E2B;
  --tn-danger-border: #DB7086;
  --tn-info-text: #A3CFFF;
  --tn-info-bg: #172D47;
  --tn-info-border: #5C99D0;
  --tn-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.20);
  --tn-shadow-md: 0 12px 32px rgba(0, 0, 0, 0.32);
}

/* @tokens dark-system: same values, only without an explicit choice. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --tn-bg: #141326;
    --tn-surface: #1D1A33;
    --tn-surface-raised: #28233F;
    --tn-text: #F7F5FF;
    --tn-text-muted: #C0B8D5;
    --tn-brand-text: #B7A5F4;
    --tn-border: #3C3558;
    --tn-border-strong: #817991;
    --tn-focus-ring: #B7A5F4;
    --tn-action-primary: #735BEF;
    --tn-action-primary-hover: #725AED;
    --tn-on-primary: #FFFFFF;
    --tn-accent-bg: #B7A5F4;
    --tn-on-accent: #141326;
    --tn-success-text: #82E2B1;
    --tn-success-bg: #15342C;
    --tn-success-border: #43A67B;
    --tn-warning-text: #FFD181;
    --tn-warning-bg: #3F2E15;
    --tn-warning-border: #C58B38;
    --tn-danger-text: #FFA7B5;
    --tn-danger-bg: #421E2B;
    --tn-danger-border: #DB7086;
    --tn-info-text: #A3CFFF;
    --tn-info-bg: #172D47;
    --tn-info-border: #5C99D0;
    --tn-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.20);
    --tn-shadow-md: 0 12px 32px rgba(0, 0, 0, 0.32);
  }
}

/* Opt-in focus utility. Its offset must remain on the surrounding surface. */
.tn-focus-visible:focus-visible {
  outline: var(--tn-focus-width) solid var(--tn-focus-ring);
  outline-offset: var(--tn-focus-offset);
}

/* @tokens reduced-motion: components must consume the motion duration tokens. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --tn-motion-fast: 0ms;
    --tn-motion-normal: 0ms;
    --tn-motion-slow: 0ms;
  }
}

/* Preserve a visible system focus in forced-colors mode. */
@media (forced-colors: active) {
  .tn-focus-visible:focus-visible {
    outline-color: CanvasText;
  }
}