/* Roboto Font Face Declarations */
/* Using TTF files (WOFF2 can be added later for better performance) */

/* Variable fonts (modern browsers) */
@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto/Roboto-VariableFont_wdth,wght.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-stretch: 75% 100%;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto/Roboto-Italic-VariableFont_wdth,wght.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-stretch: 75% 100%;
    font-style: italic;
    font-display: swap;
}

/* Static fonts for better browser compatibility */
@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto/static/Roboto-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto/static/Roboto-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto/static/Roboto-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto/static/Roboto-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto/static/Roboto-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto/static/Roboto-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto/static/Roboto-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

:root {
    font-size: var(--ax-font-size-base);
}

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: "Roboto", sans-serif;
    background-color: var(--ax-white);
    line-height: var(--ax-lh-20);
    -webkit-text-size-adjust: 100%;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--ax-space-16);
    padding-right: var(--ax-space-16);
}

.body-regular {
    font-size: var(--ax-fs-16);
    font-weight: var(--ax-fw-400);
    line-height: var(--ax-lh-24);
    color: var(--ax-text-tertiary);
}

.body-bold {
    font-size: var(--ax-fs-16);
    font-weight: var(--ax-fw-700);
    line-height: var(--ax-lh-24);
    color: var(--ax-text-secondary);
}

.caption-regular {
    font-size: var(--ax-fs-12);
    font-weight: var(--ax-fw-400);
    line-height: var(--ax-lh-16);
    color: var(--ax-text-muted);
}

h1 {
    font-size: var(--ax-fs-22);
    line-height: var(--ax-lh-28);
    font-weight: var(--ax-fw-600);
    color: var(--ax-text-primary);
}

h2 {
    font-size: var(--ax-fs-20);
    line-height: var(--ax-lh-26);
    font-weight: var(--ax-fw-600);
    color: var(--ax-primary-text);
}

/* Success */
.ax-success-fg {
    color: var(--ax-success-fg);
}

.ax-success-bg {
    background-color: var(--ax-success-bg);
}

.ax-success-border {
    border-color: var(--ax-success-border);
}

/* Warning */
.ax-warning-fg {
    color: var(--ax-warning-fg);
}

.ax-warning-bg {
    background-color: var(--ax-warning-bg);
}

.ax-warning-border {
    border-color: var(--ax-warning-border);
}

/* Error */
.ax-error-fg {
    color: var(--ax-error-fg);
}

.ax-error-bg {
    background-color: var(--ax-error-bg);
}

.ax-error-border {
    border-color: var(--ax-error-border);
}

/* Info */
.ax-info-fg {
    color: var(--ax-info-fg);
}

.ax-info-bg {
    background-color: var(--ax-info-bg);
}

.ax-info-border {
    border-color: var(--ax-info-border);
}


/* ===================== */
/*       BUTTON UTILS    */
/* ===================== */

/* Primary */
.ax-btn-primary {
    background-color: var(--ax-button-primary);
}

.ax-btn-primary:hover {
    background-color: var(--ax-button-primary-hover);
}

.ax-btn-primary-toggle {
    background-color: var(--ax-button-primary-toggle);
}

.ax-btn-primary:focus {
    outline-color: var(--ax-button-primary-focus);
}

/* Secondary */
.ax-btn-secondary {
    background-color: var(--ax-button-secondary);
}

.ax-btn-secondary:hover {
    background-color: var(--ax-button-secondary-hover);
}

.ax-btn-secondary-toggle {
    background-color: var(--ax-button-secondary-toggle);
}


/* ===================== */
/*        TEXT UTILS     */
/* ===================== */

.ax-text-primary {
    color: var(--ax-text-primary);
}

.ax-text-secondary {
    color: var(--ax-text-secondary);
}

.ax-text-tertiary {
    color: var(--ax-text-tertiary);
}


.ax-text-inverse {
    color: var(--ax-text-inverse);
}

.ax-text-success {
    color: var(--ax-text-success);
}

.ax-text-warning {
    color: var(--ax-text-warning);
}

.ax-text-error {
    color: var(--ax-text-error);
}

.ax-text-info {
    color: var(--ax-text-info);
}


/* ===================== */
/*        INPUT UTILS    */
/* ===================== */

.ax-input-primary {
    border-color: var(--ax-input-primary);
}

.ax-input-border {
    border-color: var(--ax-input-border);
}

.ax-input-error {
    border-color: var(--ax-input-error);
}

.ax-input-active-text {
    color: var(--ax-input-active-text);
}

.ax-input-label-text {
    color: var(--ax-input-label-text);
}

.ax-input-icon {
    color: var(--ax-input-icon);
}

.ax-input-disabled-bg {
    background-color: var(--ax-input-disabled-bg);
}

.ax-input-disabled-text {
    color: var(--ax-input-disabled-text);
}


/* ===================== */
/*      BACKGROUND UTILS */
/* ===================== */

.ax-body-bg {
    background-color: var(--ax-body-bg);
}

.ax-full-bg {
    background-color: var(--ax-full-bg);
}