/*
 * Voipano design foundations
 * Canonical primitives and semantic tokens shared by public, authentication,
 * customer, and administration surfaces.
 */

:root {
    color-scheme: light;

    /* Brand primitives — do not change without a brand review. */
    --vp-brand-cream: #fef7ea;
    --vp-brand-mint: #d9eed3;
    --vp-brand-gold: #ffac1a;
    --vp-brand-jade: #20af7b;
    --vp-brand-teal-900: #03483b;
    --vp-brand-teal-700: #046d57;
    --vp-brand-teal-600: #078365;
    --vp-brand-teal-500: #20af7b;
    --vp-brand-teal-100: #d9eed3;
    --vp-brand-teal-50: #eff9f4;

    /* Typography. */
    --vp-font-family-sans: "Vazirmatn", "Vazir", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --vp-font-family-mono: ui-monospace, "SFMono-Regular", "Cascadia Code", "Roboto Mono", Consolas, monospace;

    --vp-font-size-2xs: 0.75rem;
    --vp-font-size-xs: 0.8125rem;
    --vp-font-size-sm: 0.875rem;
    --vp-font-size-md: 0.9375rem;
    --vp-font-size-lg: 1rem;
    --vp-font-size-xl: 1.125rem;
    --vp-font-size-2xl: 1.25rem;
    --vp-font-size-3xl: 1.5rem;
    --vp-font-size-4xl: 1.875rem;
    --vp-font-size-5xl: 2.375rem;
    --vp-font-size-6xl: 3rem;
    --vp-font-size-7xl: 3.75rem;

    --vp-font-weight-regular: 400;
    --vp-font-weight-medium: 500;
    --vp-font-weight-semibold: 600;
    --vp-font-weight-bold: 700;
    --vp-font-weight-extrabold: 800;
    --vp-font-weight-black: 900;

    --vp-line-height-none: 1;
    --vp-line-height-tight: 1.35;
    --vp-line-height-heading: 1.45;
    --vp-line-height-ui: 1.6;
    --vp-line-height-body: 1.8;
    --vp-line-height-relaxed: 2;

    --vp-letter-spacing-tight: -0.015em;
    --vp-letter-spacing-normal: 0;
    --vp-letter-spacing-wide: 0.035em;

    /* Four-pixel spacing system. */
    --vp-space-0: 0;
    --vp-space-half: 0.125rem;
    --vp-space-1: 0.25rem;
    --vp-space-2: 0.5rem;
    --vp-space-3: 0.75rem;
    --vp-space-4: 1rem;
    --vp-space-5: 1.25rem;
    --vp-space-6: 1.5rem;
    --vp-space-7: 2rem;
    --vp-space-8: 2.5rem;
    --vp-space-9: 3rem;
    --vp-space-10: 4rem;
    --vp-space-11: 5rem;
    --vp-space-12: 6rem;

    /* Component sizing. */
    --vp-control-height-xs: 2rem;
    --vp-control-height-sm: 2.25rem;
    --vp-control-height-md: 2.5rem;
    --vp-control-height-lg: 2.75rem;
    --vp-control-height-xl: 3rem;
    --vp-control-height-2xl: 3.5rem;
    --vp-icon-size-sm: 1rem;
    --vp-icon-size-md: 1.25rem;
    --vp-icon-size-lg: 1.5rem;
    --vp-touch-target: 2.75rem;

    /* Form and interaction sizing. */
    --vp-control-padding-inline: 0.875rem;
    --vp-control-padding-block: 0.625rem;
    --vp-control-gap: 0.625rem;
    --vp-field-gap: 0.5rem;
    --vp-form-row-gap: 1.25rem;
    --vp-form-section-gap: 2rem;
    --vp-control-border-width: 1px;
    --vp-control-icon-area: 2.75rem;
    --vp-checkbox-size: 1.125rem;
    --vp-switch-width: 2.5rem;
    --vp-switch-height: 1.375rem;

    /* Table sizing and density. */
    --vp-table-header-height: 2.75rem;
    --vp-table-row-height-compact: 2.5rem;
    --vp-table-row-height-standard: 3.25rem;
    --vp-table-row-height-comfortable: 4rem;
    --vp-table-cell-padding-inline: 1rem;
    --vp-table-cell-padding-compact: 0.5rem;
    --vp-table-cell-padding-standard: 0.75rem;
    --vp-table-cell-padding-comfortable: 1rem;
    --vp-table-selection-column-width: 2.75rem;
    --vp-table-actions-column-width: 9rem;
    --vp-table-min-width-sm: 36rem;
    --vp-table-min-width-md: 42rem;
    --vp-table-min-width-lg: 52rem;
    --vp-table-min-width-xl: 58rem;
    --vp-table-default-min-width: var(--vp-table-min-width-md);
    --vp-table-max-height-sm: 20rem;
    --vp-table-max-height-md: 28rem;
    --vp-table-max-height-lg: 36rem;

    /* Radius system. */
    --vp-radius-xs: 0.375rem;
    --vp-radius-sm: 0.5rem;
    --vp-radius-md: 0.75rem;
    --vp-radius-lg: 1rem;
    --vp-radius-xl: 1.25rem;
    --vp-radius-2xl: 1.5rem;
    --vp-radius-full: 999px;

    /* Neutral and semantic color roles. */
    --vp-color-canvas: #f6faf8;
    --vp-color-canvas-warm: var(--vp-brand-cream);
    --vp-color-surface: #ffffff;
    --vp-color-surface-raised: rgba(255, 255, 255, 0.96);
    --vp-color-surface-glass: rgba(255, 255, 255, 0.88);
    --vp-color-surface-subtle: #f1f7f4;
    --vp-color-surface-selected: var(--vp-brand-teal-50);

    --vp-color-text-strong: #0c2e28;
    --vp-color-text: #12342f;
    --vp-color-text-subtle: #587168;
    --vp-color-text-disabled: #82958e;
    --vp-color-text-inverse: #ffffff;
    --vp-color-text-on-accent: #163a31;

    --vp-color-border-subtle: rgba(4, 109, 87, 0.1);
    --vp-color-border: rgba(4, 109, 87, 0.16);
    --vp-color-border-strong: rgba(4, 109, 87, 0.28);
    --vp-color-divider: rgba(4, 109, 87, 0.12);

    --vp-color-primary: var(--vp-brand-teal-700);
    --vp-color-primary-hover: var(--vp-brand-teal-900);
    --vp-color-primary-soft: var(--vp-brand-teal-50);
    --vp-color-accent: var(--vp-brand-gold);
    --vp-color-focus: var(--vp-brand-jade);
    --vp-color-control: var(--vp-color-surface);
    --vp-color-control-hover: #fbfefd;
    --vp-color-control-disabled: #eef4f1;
    --vp-color-control-readonly: #f4f8f6;
    --vp-color-placeholder: #71877f;
    --vp-color-table-header: var(--vp-color-surface-subtle);
    --vp-color-table-row-hover: #fbfefd;
    --vp-color-table-row-selected: var(--vp-color-primary-soft);
    --vp-color-table-divider: var(--vp-color-divider);
    --vp-color-table-skeleton-shine: rgba(255, 255, 255, 0.82);

    --vp-color-success: #067647;
    --vp-color-success-soft: #ecfdf3;
    --vp-color-warning: #8a5100;
    --vp-color-warning-soft: #fff7e6;
    --vp-color-danger: #b42318;
    --vp-color-danger-soft: #fff1f0;
    --vp-color-info: #175cd3;
    --vp-color-info-soft: #eff8ff;

    /* Elevation — tinted subtly with the core brand instead of neutral black. */
    --vp-shadow-xs: 0 1px 2px rgba(4, 72, 59, 0.05);
    --vp-shadow-sm: 0 4px 12px rgba(4, 72, 59, 0.07);
    --vp-shadow-md: 0 12px 28px rgba(4, 72, 59, 0.1);
    --vp-shadow-lg: 0 24px 48px rgba(4, 72, 59, 0.14);
    --vp-shadow-xl: 0 32px 72px rgba(4, 72, 59, 0.18);
    --vp-shadow-focus: 0 0 0 4px rgba(32, 175, 123, 0.18);
    --vp-shadow-control: 0 1px 2px rgba(4, 72, 59, 0.04), 0 1px 1px rgba(4, 72, 59, 0.03);
    --vp-shadow-control-hover: 0 3px 10px rgba(4, 72, 59, 0.07);
    --vp-shadow-danger-focus: 0 0 0 4px rgba(180, 35, 24, 0.14);
    --vp-shadow-success-focus: 0 0 0 4px rgba(6, 118, 71, 0.14);
    --vp-shadow-table-sticky: 0 8px 18px -16px rgba(4, 72, 59, 0.42);

    /* Motion. */
    --vp-duration-instant: 80ms;
    --vp-duration-fast: 150ms;
    --vp-duration-normal: 220ms;
    --vp-duration-slow: 320ms;
    --vp-ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --vp-ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);

    /* Layout and layering. */
    --vp-content-public: 73.75rem;
    /* Panel canvases fill the available shell; reading and form widths stay bounded below. */
    --vp-content-app: 100%;
    --vp-content-standard: 100%;
    --vp-content-reading: 43.75rem;
    --vp-content-form: 52rem;
    --vp-reading-width: 43.75rem;
    --vp-shell-sidebar-width: 16.5rem;
    --vp-shell-sidebar-collapsed-width: 5rem;
    --vp-shell-header-height: 4rem;
    --vp-shell-gutter: clamp(var(--vp-space-4), 2.2vw, var(--vp-space-7));
    --vp-shell-gutter-mobile: var(--vp-space-3);
    --vp-shell-section-gap: clamp(var(--vp-space-5), 2vw, var(--vp-space-7));
    --vp-grid-gap: clamp(var(--vp-space-4), 1.4vw, var(--vp-space-6));
    --vp-grid-columns: 12;
    --vp-z-base: 1;
    --vp-z-sticky: 90;
    --vp-z-dropdown: 100;
    --vp-z-overlay: 900;
    --vp-z-modal: 1000;
    --vp-z-toast: 1100;

    /*
     * Framework compatibility.
     * Bootstrap-based legacy screens inherit the same semantic foundation
     * without defining a second palette or typography scale.
     */
    --bs-body-font-family: var(--vp-font-family-sans);
    --bs-body-font-size: var(--vp-font-size-md);
    --bs-body-line-height: var(--vp-line-height-body);
    --bs-body-color: var(--vp-color-text);
    --bs-body-bg: var(--vp-color-canvas);
    --bs-primary: var(--vp-color-primary);
    --bs-primary-rgb: 4, 109, 87;
    --bs-success: var(--vp-color-success);
    --bs-success-rgb: 6, 118, 71;
    --bs-warning: var(--vp-color-warning);
    --bs-warning-rgb: 138, 81, 0;
    --bs-danger: var(--vp-color-danger);
    --bs-danger-rgb: 180, 35, 24;
    --bs-info: var(--vp-color-info);
    --bs-info-rgb: 23, 92, 211;
    --bs-border-color: var(--vp-color-border);
    --bs-border-radius: var(--vp-radius-md);
    --bs-border-radius-sm: var(--vp-radius-sm);
    --bs-border-radius-lg: var(--vp-radius-lg);
}

/* Shared type roles. These are opt-in so legacy screens can migrate safely. */
.vp-display,
.vp-heading-xl,
.vp-heading-lg,
.vp-heading-md,
.vp-heading-sm {
    margin-block: 0;
    color: var(--vp-color-text-strong);
    font-family: var(--vp-font-family-sans);
    letter-spacing: var(--vp-letter-spacing-tight);
}

.vp-display {
    font-size: clamp(var(--vp-font-size-4xl), 5vw, var(--vp-font-size-7xl));
    font-weight: var(--vp-font-weight-black);
    line-height: var(--vp-line-height-tight);
}

.vp-heading-xl {
    font-size: clamp(var(--vp-font-size-3xl), 3vw, var(--vp-font-size-5xl));
    font-weight: var(--vp-font-weight-black);
    line-height: var(--vp-line-height-heading);
}

.vp-heading-lg {
    font-size: clamp(var(--vp-font-size-2xl), 2vw, var(--vp-font-size-4xl));
    font-weight: var(--vp-font-weight-extrabold);
    line-height: var(--vp-line-height-heading);
}

.vp-heading-md {
    font-size: var(--vp-font-size-2xl);
    font-weight: var(--vp-font-weight-extrabold);
    line-height: var(--vp-line-height-heading);
}

.vp-heading-sm {
    font-size: var(--vp-font-size-xl);
    font-weight: var(--vp-font-weight-bold);
    line-height: var(--vp-line-height-ui);
}

.vp-body,
.vp-body-sm,
.vp-caption,
.vp-overline {
    margin-block: 0;
    font-family: var(--vp-font-family-sans);
}

.vp-body {
    color: var(--vp-color-text);
    font-size: var(--vp-font-size-lg);
    line-height: var(--vp-line-height-body);
}

.vp-body-sm {
    color: var(--vp-color-text-subtle);
    font-size: var(--vp-font-size-md);
    line-height: var(--vp-line-height-body);
}

.vp-caption {
    color: var(--vp-color-text-subtle);
    font-size: var(--vp-font-size-xs);
    font-weight: var(--vp-font-weight-medium);
    line-height: var(--vp-line-height-ui);
}

.vp-overline {
    color: var(--vp-color-primary);
    font-size: var(--vp-font-size-2xs);
    font-weight: var(--vp-font-weight-extrabold);
    line-height: var(--vp-line-height-ui);
    letter-spacing: var(--vp-letter-spacing-wide);
}

.vp-numeric,
.ltr,
[dir="ltr"] {
    font-variant-numeric: tabular-nums lining-nums;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --vp-duration-instant: 0.01ms;
        --vp-duration-fast: 0.01ms;
        --vp-duration-normal: 0.01ms;
        --vp-duration-slow: 0.01ms;
    }
}