/*
|--------------------------------------------------------------------------
| Tetology — Module 0
|--------------------------------------------------------------------------
|
| File:
|   variables.css
|
| Purpose:
|   Global design tokens used only by Module 0.
|
|--------------------------------------------------------------------------
*/

:root {
    /*
|--------------------------------------------------------------------------
| Font families
|--------------------------------------------------------------------------
*/

--font-family-primary:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    "Noto Sans Bengali",
    "Hind Siliguri",
    sans-serif;

--font-family-system:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;

--font-family-bengali:
    "Noto Sans Bengali",
    "Hind Siliguri",
    sans-serif;

    /*
    |--------------------------------------------------------------------------
    | Font sizes
    |--------------------------------------------------------------------------
    */

    --font-size-2xs: 0.75rem;
    --font-size-xs: 0.8125rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-md: 1.0625rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    --font-size-5xl: 3rem;
    --font-size-6xl: 3.75rem;

    /*
    |--------------------------------------------------------------------------
    | Font weights
    |--------------------------------------------------------------------------
    */

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /*
    |--------------------------------------------------------------------------
    | Line heights
    |--------------------------------------------------------------------------
    */

    --line-height-tight: 1.2;
    --line-height-snug: 1.35;
    --line-height-normal: 1.6;
    --line-height-relaxed: 1.75;

    /*
    |--------------------------------------------------------------------------
    | Letter spacing
    |--------------------------------------------------------------------------
    */

    --letter-spacing-tight: -0.02em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.02em;

    /*
    |--------------------------------------------------------------------------
    | Spacing scale
    |--------------------------------------------------------------------------
    */

    --space-0: 0;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 1.75rem;
    --space-8: 2rem;
    --space-9: 2.25rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-14: 3.5rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    /*
    |--------------------------------------------------------------------------
    | Border radius
    |--------------------------------------------------------------------------
    */

    --radius-xs: 0.375rem;
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.25rem;
    --radius-2xl: 1.5rem;
    --radius-pill: 999px;

    /*
    |--------------------------------------------------------------------------
    | Border widths
    |--------------------------------------------------------------------------
    */

    --border-width-thin: 1px;
    --border-width-medium: 2px;

    /*
    |--------------------------------------------------------------------------
    | Layout
    |--------------------------------------------------------------------------
    */

    --container-width: 75rem;
    --container-padding: 1rem;

    --header-height: 4.5rem;

    --content-width-narrow: 46rem;
    --content-width-medium: 58rem;

    /*
    |--------------------------------------------------------------------------
    | Z-index layers
    |--------------------------------------------------------------------------
    */

    --z-index-base: 1;
    --z-index-header: 100;
    --z-index-dropdown: 300;
    --z-index-modal: 500;
    --z-index-toast: 700;
    --z-index-skip-link: 1000;

    /*
    |--------------------------------------------------------------------------
    | Motion
    |--------------------------------------------------------------------------
    */

    --transition-fast: 140ms ease;
    --transition-normal: 220ms ease;
    --transition-slow: 320ms ease;

    /*
    |--------------------------------------------------------------------------
    | Light theme colors
    |--------------------------------------------------------------------------
    */

    --color-page-bg: #f7f9fc;
    --color-surface: #ffffff;
    --color-surface-soft: #f1f5f9;
    --color-surface-elevated: #ffffff;

    --color-text: #172033;
    --color-text-secondary: #4b5870;
    --color-text-muted: #6b778c;
    --color-text-inverse: #ffffff;

    --color-border: #dbe3ee;
    --color-border-strong: #bcc8d8;

    --color-primary: #1d4ed8;
    --color-primary-hover: #1e40af;
    --color-primary-active: #1e3a8a;
    --color-primary-soft: #e8efff;

    --color-accent: #d6a700;
    --color-accent-soft: #fff8d8;

    --color-success: #15803d;
    --color-warning: #b45309;
    --color-danger: #b91c1c;
    --color-info: #0369a1;

    --color-focus: #2563eb;
    
    --color-dark-surface: #0f172a;
    --color-dark-surface-soft: #111827;
    --color-dark-surface-accent: #172554;

    --color-dark-text: #ffffff;
    --color-dark-text-secondary: #e2e8f0;
    
    
    
    /*
    |--------------------------------------------------------------------------
    | Dark surface colors
    |--------------------------------------------------------------------------
    */

    --color-dark-surface: #0f172a;
    --color-dark-surface-soft: #111827;
    --color-dark-surface-accent: #172554;

    --color-dark-text: #ffffff;
    --color-dark-text-secondary: #e2e8f0;

    /*
    |--------------------------------------------------------------------------
    | Shadows
    |--------------------------------------------------------------------------
    */

    --shadow-xs:
        0 1px 2px rgba(15, 23, 42, 0.04);

    --shadow-sm:
        0 2px 6px rgba(15, 23, 42, 0.06);

    --shadow-md:
        0 8px 24px rgba(15, 23, 42, 0.08);

    --shadow-lg:
        0 18px 45px rgba(15, 23, 42, 0.12);

    /*
    |--------------------------------------------------------------------------
    | Gradients
    |--------------------------------------------------------------------------
    */

    --gradient-page:
        linear-gradient(
            180deg,
            #f8fbff 0%,
            #f5f8fc 100%
        );

    --gradient-primary:
        linear-gradient(
            135deg,
            #2563eb 0%,
            #1d4ed8 55%,
            #1e40af 100%
        );

    --gradient-accent:
        linear-gradient(
            135deg,
            #fffdf2 0%,
            #fff6cc 100%
        );

    /*
    |--------------------------------------------------------------------------
    | Form and control sizes
    |--------------------------------------------------------------------------
    */

    --control-height-sm: 2.25rem;
    --control-height-md: 2.75rem;
    --control-height-lg: 3.125rem;

    --touch-target-min: 2.75rem;
}

/*
|--------------------------------------------------------------------------
| Wider viewport adjustments
|--------------------------------------------------------------------------
*/

@media (min-width: 48rem) {
    :root {
        --container-padding: 1.5rem;
        --header-height: 5rem;
    }
}

@media (min-width: 75rem) {
    :root {
        --container-padding: 2rem;
    }
}