/**
 * Businfo UI Foundation — Design tokens
 * Version 4.4.0
 *
 * The variables in this file are the single visual source of truth for the
 * public site, customer workspace and partner workspace. Legacy variable
 * names are mapped to these values so existing templates keep working while
 * later releases migrate page CSS gradually.
 */
:root {
    color-scheme: light;

    /* Brand and semantic colour */
    --bi-color-primary: #2563eb;
    --bi-color-primary-hover: #1d4ed8;
    --bi-color-primary-active: #1e40af;
    --bi-color-primary-soft: #eff6ff;
    --bi-color-primary-border: #bfdbfe;
    --bi-color-success: #15803d;
    --bi-color-success-soft: #f0fdf4;
    --bi-color-warning: #b45309;
    --bi-color-warning-soft: #fffbeb;
    --bi-color-danger: #b91c1c;
    --bi-color-danger-hover: #991b1b;
    --bi-color-danger-soft: #fef2f2;
    --bi-color-info: #0369a1;
    --bi-color-info-soft: #f0f9ff;

    /* Surfaces and text */
    --bi-surface-canvas: #f6f8fc;
    --bi-surface-default: #ffffff;
    --bi-surface-subtle: #f8fafc;
    --bi-surface-raised: #ffffff;
    --bi-surface-inverse: #0f172a;
    --bi-text-primary: #0f172a;
    --bi-text-secondary: #475569;
    --bi-text-muted: #64748b;
    --bi-text-inverse: #ffffff;
    --bi-border-default: #e2e8f0;
    --bi-border-strong: #cbd5e1;
    --bi-border-focus: #2563eb;

    /* Typography */
    --bi-font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --bi-font-size-xs: 0.75rem;
    --bi-font-size-sm: 0.875rem;
    --bi-font-size-md: 1rem;
    --bi-font-size-lg: 1.125rem;
    --bi-font-size-xl: 1.25rem;
    --bi-font-size-2xl: clamp(1.5rem, 1.25rem + 0.75vw, 2rem);
    --bi-font-size-3xl: clamp(1.875rem, 1.5rem + 1.2vw, 2.75rem);
    --bi-line-height-tight: 1.25;
    --bi-line-height-normal: 1.55;
    --bi-line-height-relaxed: 1.7;
    --bi-font-weight-medium: 500;
    --bi-font-weight-semibold: 600;
    --bi-font-weight-bold: 700;

    /* 4px spacing scale */
    --bi-space-0: 0;
    --bi-space-1: 0.25rem;
    --bi-space-2: 0.5rem;
    --bi-space-3: 0.75rem;
    --bi-space-4: 1rem;
    --bi-space-5: 1.25rem;
    --bi-space-6: 1.5rem;
    --bi-space-7: 1.75rem;
    --bi-space-8: 2rem;
    --bi-space-10: 2.5rem;
    --bi-space-12: 3rem;
    --bi-space-16: 4rem;
    --bi-space-20: 5rem;

    /* Sizing */
    --bi-control-height-sm: 2.25rem;
    --bi-control-height: 2.75rem;
    --bi-control-height-lg: 3rem;
    --bi-touch-target: 2.75rem;
    --bi-icon-size-sm: 1rem;
    --bi-icon-size: 1.25rem;
    --bi-icon-size-lg: 1.5rem;

    /* Radius and elevation */
    --bi-radius-xs: 0.375rem;
    --bi-radius-sm: 0.5rem;
    --bi-radius-md: 0.75rem;
    --bi-radius-lg: 1.125rem;
    --bi-radius-xl: 1.5rem;
    --bi-radius-pill: 999px;
    --bi-shadow-xs: 0 1px 2px rgb(15 23 42 / 0.05);
    --bi-shadow-sm: 0 4px 14px rgb(15 23 42 / 0.07);
    --bi-shadow-md: 0 12px 32px rgb(15 23 42 / 0.10);
    --bi-shadow-lg: 0 24px 64px rgb(15 23 42 / 0.14);
    --bi-focus-ring: 0 0 0 3px rgb(37 99 235 / 0.24);

    /* Motion */
    --bi-duration-fast: 120ms;
    --bi-duration-normal: 200ms;
    --bi-duration-slow: 320ms;
    --bi-ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --bi-ease-emphasized: cubic-bezier(0.2, 0, 0, 1.2);

    /* Grid and page widths */
    --bi-page-max: 90rem;
    --bi-content-max: 75rem;
    --bi-form-max: 52rem;
    --bi-reading-max: 46rem;
    --bi-grid-columns: 12;
    --bi-grid-gutter: var(--bi-space-4);
    --bi-page-gutter: var(--bi-space-4);

    /* Safe-area and application inset API */
    --bi-safe-top: env(safe-area-inset-top, 0px);
    --bi-safe-right: env(safe-area-inset-right, 0px);
    --bi-safe-bottom: env(safe-area-inset-bottom, 0px);
    --bi-safe-left: env(safe-area-inset-left, 0px);
    --bi-ui-top-inset: 0px;
    --bi-ui-bottom-inset: 0px;
    --bi-keyboard-inset: 0px;
    --bi-app-top-inset: max(var(--bi-safe-top), var(--bi-ui-top-inset));
    --bi-app-bottom-inset: calc(max(var(--bi-safe-bottom), var(--bi-ui-bottom-inset)) + var(--bi-keyboard-inset));
    --bi-scroll-offset-top: calc(var(--bi-app-top-inset) + var(--bi-space-4));
    --bi-scroll-offset-bottom: calc(var(--bi-app-bottom-inset) + var(--bi-space-6));

    /* 4.7.0 unified account shell */
    --bi-account-sidebar-width: 17rem;
    --bi-account-rail-width: 5.5rem;
    --bi-account-topbar-height: 4.25rem;
    --bi-account-bottom-nav-height: 4.5rem;
    --bi-account-content-max: 82.5rem;
    --bi-account-reading-max: 48rem;
    --bi-account-panel-padding: clamp(1rem, 1.5vw, 1.5rem);
    --bi-account-page-gap: clamp(1rem, 2vw, 1.5rem);
    --bi-account-sidebar-bg: #0f172a;
    --bi-account-sidebar-bg-customer: #13213a;
    --bi-account-sidebar-text: #cbd5e1;
    --bi-account-sidebar-muted: #94a3b8;
    --bi-account-sidebar-label: #7c8da3;
    --bi-account-sidebar-hover: rgb(255 255 255 / 0.08);
    --bi-account-sidebar-border: rgb(255 255 255 / 0.10);
    --bi-account-sidebar-active: rgb(37 99 235 / 0.28);
    --bi-account-sidebar-accent: #60a5fa;
    --bi-account-overlay: rgb(15 23 42 / 0.58);
    --bi-account-topbar-bg: rgb(255 255 255 / 0.96);
    --bi-account-bottom-bg: rgb(255 255 255 / 0.97);
    --bi-account-hero-start: #0f2f5f;
    --bi-account-hero-end: #1d4ed8;
    --bi-account-hero-text: #dbeafe;
    --bi-account-hero-kicker: #bfdbfe;
    --bi-account-card-border: var(--bi-border-default);
    --bi-account-card-bg: var(--bi-surface-default);
    --bi-account-card-radius: var(--bi-radius-lg);
    --bi-account-card-shadow: var(--bi-shadow-sm);
    --bi-account-control-bg: var(--bi-surface-default);
    --bi-account-control-hover: var(--bi-surface-subtle);
    --bi-account-current-border: #86efac;
    --bi-account-current-bg: var(--bi-color-success-soft);
    --bi-account-warning-border: #fbbf24;
    --bi-account-warning-strong: #92400e;
    --bi-account-danger-border: #fecaca;
    --bi-account-danger-bg: #fff7f7;
    --bi-account-code-bg: #0f172a;
    --bi-account-code-text: #dbeafe;
    --bi-account-scrim-blur: 2px;
    --bi-account-focus-offset: 3px;
    --bi-account-z-topbar: 1070;
    --bi-account-z-bottom: 1070;
    --bi-account-z-sidebar: 1090;

    /* Legacy token compatibility */
    --businfo-primary: var(--bi-color-primary);
    --businfo-primary-soft: var(--bi-color-primary-soft);
    --businfo-success: var(--bi-color-success);
    --businfo-warning: var(--bi-color-warning);
    --businfo-danger: var(--bi-color-danger);
    --businfo-app-bg: var(--bi-surface-canvas);
    --businfo-canvas: var(--bi-surface-canvas);
    --businfo-surface: var(--bi-surface-default);
    --businfo-surface-soft: var(--bi-surface-subtle);
    --businfo-text: var(--bi-text-primary);
    --businfo-muted: var(--bi-text-muted);
    --businfo-border: var(--bi-border-default);
    --businfo-radius-sm: var(--bi-radius-sm);
    --businfo-radius-md: var(--bi-radius-md);
    --businfo-radius-lg: var(--bi-radius-lg);
    --businfo-shadow-sm: var(--bi-shadow-sm);
    --businfo-shadow-lg: var(--bi-shadow-lg);
    --businfo-safe-bottom: var(--bi-safe-bottom);

    --trip-primary: var(--bi-color-primary);
    --trip-primary-dark: var(--bi-color-primary-active);
    --trip-primary-soft: var(--bi-color-primary-soft);
    --trip-success: var(--bi-color-success);
    --trip-success-soft: var(--bi-color-success-soft);
    --trip-warning: var(--bi-color-warning);
    --trip-danger: var(--bi-color-danger);
    --trip-danger-soft: var(--bi-color-danger-soft);
    --trip-bg: var(--bi-surface-canvas);
    --trip-surface: var(--bi-surface-default);
    --trip-surface-soft: var(--bi-surface-subtle);
    --trip-text: var(--bi-text-primary);
    --trip-muted: var(--bi-text-muted);
    --trip-border: var(--bi-border-default);
    --trip-border-strong: var(--bi-border-strong);
    --trip-radius-sm: var(--bi-radius-sm);
    --trip-radius-md: var(--bi-radius-md);
    --trip-radius-lg: var(--bi-radius-lg);
    --trip-shadow-sm: var(--bi-shadow-sm);
    --trip-shadow-md: var(--bi-shadow-md);
    --trip-app-primary: var(--bi-color-primary);
    --trip-app-primary-soft: var(--bi-color-primary-soft);
    --trip-app-success: var(--bi-color-success);
    --trip-app-danger: var(--bi-color-danger);
    --trip-app-text: var(--bi-text-primary);
    --trip-app-muted: var(--bi-text-muted);
    --trip-app-border: var(--bi-border-default);

    --loc-brand: var(--bi-color-primary);
    --loc-brand-dark: var(--bi-color-primary-active);
    --loc-accent: var(--bi-color-info);
    --loc-bg: var(--bi-surface-canvas);
    --loc-card: var(--bi-surface-default);
    --loc-text: var(--bi-text-primary);
    --loc-muted: var(--bi-text-muted);
    --loc-line: var(--bi-border-default);
    --loc-radius: var(--bi-radius-lg);
    --bi-muted: var(--bi-text-muted);
    --bi-border: var(--bi-border-default);
}

/* Medium: 768–1023 */
@media (min-width: 768px) {
    :root {
        --bi-grid-gutter: var(--bi-space-5);
        --bi-page-gutter: var(--bi-space-6);
    }
}

/* Expanded: 1024–1439 */
@media (min-width: 1024px) {
    :root {
        --bi-grid-gutter: var(--bi-space-6);
        --bi-page-gutter: var(--bi-space-8);
    }
}

/* Large: 1440+ */
@media (min-width: 1440px) {
    :root {
        --bi-grid-gutter: var(--bi-space-8);
        --bi-page-gutter: var(--bi-space-10);
    }
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --bi-duration-fast: 0ms;
        --bi-duration-normal: 0ms;
        --bi-duration-slow: 0ms;
    }
}

/*
 * Legacy page-token bridge. These selectors intentionally have greater
 * specificity than the page-level variable declarations shipped before 4.4.0.
 * They standardise colour, radius and elevation without rewriting business UI.
 */
.bi-component-page :where(
    .vendor-app-navigation,
    .vendor-app-main,
    .vendor-saas-page,
    .vendor-profile-page,
    .businfo-route-page
) {
    --businfo-app-bg: var(--bi-surface-canvas);
    --businfo-canvas: var(--bi-surface-canvas);
    --businfo-surface: var(--bi-surface-default);
    --businfo-surface-soft: var(--bi-surface-subtle);
    --businfo-border: var(--bi-border-default);
    --businfo-text: var(--bi-text-primary);
    --businfo-muted: var(--bi-text-muted);
    --businfo-primary: var(--bi-color-primary);
    --businfo-primary-soft: var(--bi-color-primary-soft);
    --businfo-success: var(--bi-color-success);
    --businfo-warning: var(--bi-color-warning);
    --businfo-danger: var(--bi-color-danger);
    --businfo-radius-sm: var(--bi-radius-sm);
    --businfo-radius-md: var(--bi-radius-md);
    --businfo-radius-lg: var(--bi-radius-lg);
    --businfo-shadow-sm: var(--bi-shadow-sm);
    --businfo-shadow-lg: var(--bi-shadow-lg);
}

.bi-component-page .businfo-location-page {
    --loc-bg: var(--bi-surface-canvas);
    --loc-card: var(--bi-surface-default);
    --loc-text: var(--bi-text-primary);
    --loc-muted: var(--bi-text-muted);
    --loc-line: var(--bi-border-default);
    --loc-brand: var(--bi-color-primary);
    --loc-brand-dark: var(--bi-color-primary-active);
    --loc-accent: var(--bi-color-warning);
    --loc-radius: var(--bi-radius-lg);
}

.bi-component-page .trip-app-shell {
    --trip-app-primary: var(--bi-color-primary);
    --trip-app-primary-soft: var(--bi-color-primary-soft);
    --trip-app-border: var(--bi-border-default);
    --trip-app-text: var(--bi-text-primary);
    --trip-app-muted: var(--bi-text-muted);
    --trip-app-success: var(--bi-color-success);
    --trip-app-danger: var(--bi-color-danger);
}

.bi-component-page :where(.trip-app-shell, .saas-container) {
    --trip-primary: var(--bi-color-primary);
    --trip-primary-dark: var(--bi-color-primary-active);
    --trip-primary-soft: var(--bi-color-primary-soft);
    --trip-success: var(--bi-color-success);
    --trip-success-soft: var(--bi-color-success-soft);
    --trip-warning: var(--bi-color-warning);
    --trip-danger: var(--bi-color-danger);
    --trip-danger-soft: var(--bi-color-danger-soft);
    --trip-bg: var(--bi-surface-canvas);
    --trip-surface: var(--bi-surface-default);
    --trip-surface-soft: var(--bi-surface-subtle);
    --trip-text: var(--bi-text-primary);
    --trip-muted: var(--bi-text-muted);
    --trip-border: var(--bi-border-default);
    --trip-border-strong: var(--bi-border-strong);
    --trip-radius-sm: var(--bi-radius-sm);
    --trip-radius-md: var(--bi-radius-md);
    --trip-radius-lg: var(--bi-radius-lg);
    --trip-shadow-sm: var(--bi-shadow-sm);
    --trip-shadow-md: var(--bi-shadow-md);
}