/* Font Settings */
@font-face {
    font-family: 'Vazir';
    src: url('../fonts/Vazir.woff2') format('woff2 supports variations'),
         url('../fonts/Vazir.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* -------------------- Base (Light) Theme -------------------- */
:root {
    /* Typography */
    --font-primary: 'Vazir', Calibri, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

    /* Font Sizes */
    --font-size-h1: 24px;
    --font-size-h2: 22px;
    --font-size-h3: 20px;
    --font-size-h4: 18px;
    --font-size-h5: 16px;
    --font-size-h6: 14px;
    --font-size-body: 14px;
    --font-size-small: 12px;

    /* Line Heights */
    --line-height-tight: 18px;
    --line-height-base: 22px;
    --line-height-loose: 26px;

    /* Font Weights */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Spacing */
    --spacing-2xs: 4px;
    --spacing-xs: 8px;
    --spacing-sm: 12px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;

    /* Radius & Borders */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;

    --border-width-hairline: 1px;
    --border-width: 2px;

    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 8px 16px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 16px 32px rgba(0, 0, 0, 0.18);

    /* Z-Index Layers */
    --z-base: 1;
    --z-sticky: 5;
    --z-dropdown: 10;
    --z-modal: 100;
    --z-toast: 1000;

    /* Motion Durations */
    --duration-fast: 150ms;
    --duration-base: 250ms;
    --duration-slow: 400ms;

    /* Easing */
    --easing-standard: cubic-bezier(0.2, 0, 0, 1);

    /* Layout Breakpoints */
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1200px;

    --bp-mobile-max: 767px;
    --bp-tablet-min: 768px;
    --bp-tablet-max: 1023px;
    --bp-desktop-min: 1024px;

    /* Light Theme Colors */
    --color-bg: #ffffff;
    /* Background */
    --color-surface: #f7f7f9;
    /* Surface */
    --color-text: #222222;
    /* Text Color */
    --color-text-muted: #666666;
    /* Muted Text */

    /* Primary/Secondary Colors */
    --color-primary: #3a49f9;
    --color-primary-contrast: #ffffff;
    --color-primary-hover: #2e39c9;

    --color-secondary: #8fa6ff;
    --color-secondary-contrast: #0f1b5a;
    --color-secondary-bg: #e5e8ff;
    --color-secondary-hover: #c4c9ff;

    /* Borders */
    --color-border: #cccccc;

    /* State Colors */
    --color-success-bg: #e0f1df;
    --color-success-text: #2a7a2a;

    --color-warning-bg: #fff4d9;
    --color-warning-text: #a66e00;

    --color-error-bg: #fce4e4;
    --color-error-text: #d93025;

    --color-info-bg: #e4e9fc;
    --color-info-text: #1a4bbb;

    /* Links */
    --color-link: var(--color-primary);
    --color-link-hover: var(--color-primary-hover);

    /* Disabled State */
    --color-disabled: #bfbfbf;

    /* Input Fields */
    --input-bg: #ffffff;
    --input-border: #cccccc;
    --input-border-focus: var(--color-primary);
    --input-text: #222222;
    --input-placeholder: #999999;
    --input-label: #666666;
    --input-label-focus: var(--color-primary);

    /* New Variables */
    --header-height: 64px;
    --logo-height: 40px;
    --sidebar-width: 240px;
    --sidebar-toggle-size: 40px;
}

/* -------------------- Dark Theme -------------------- */
[data-theme="dark"] {
    /* Dark Theme Colors */
    --color-bg: #0f0f10;
    /* Background */
    --color-surface: #17171a;
    /* Surface */
    --color-text: #e4e4e4;
    /* Text Color */
    --color-text-muted: #a0a0a0;
    /* Muted Text */

    /* Primary/Secondary Colors */
    --color-primary: #7db0ff;
    --color-primary-contrast: #0b1220;
    --color-primary-hover: #a3c0ff;

    --color-secondary: #8fa6ff;
    --color-secondary-contrast: #0b1220;
    --color-secondary-bg: #2b2f45;
    --color-secondary-hover: #3a3f62;

    /* Neutrals/Borders */
    --color-neutral-50: #1b1c20;
    --color-neutral-100: #222327;
    --color-neutral-200: #2b2c32;
    --color-neutral-300: #353741;
    --color-neutral-400: #4b4d5a;
    --color-neutral-500: #6c6f7e;
    --color-neutral-600: #8b8f9f;

    --color-border: #444444;

    /* State Colors */
    --color-success-bg: #244022;
    --color-success-text: #9ae29a;

    --color-warning-bg: #4b420e;
    --color-warning-text: #f7e059;

    --color-error-bg: #5a1a1a;
    --color-error-text: #ff7a7a;

    --color-info-bg: #1b2a4b;
    --color-info-text: #7db0ff;

    /* Links */
    --color-link: var(--color-primary);
    --color-link-hover: var(--color-primary-hover);

    /* Disabled State */
    --color-disabled: #666666;

    /* Input Fields */
    --input-bg: #121212;
    --input-border: #444444;
    --input-border-focus: var(--color-primary);
    --input-text: #e4e4e4;
    --input-placeholder: #777777;
    --input-label: #cccccc;
    --input-label-focus: var(--color-primary);
}