/*
|--------------------------------------------------------------------------
| ZAWARO THEME SYSTEM — CANONICAL TOKEN LAYER
|--------------------------------------------------------------------------
|
| Task: P4-ZTS-0002
|
| Approved theme families:
|   - professional-neutral
|   - evergreen
|   - violet-dawn
|
| Approved appearances:
|   - daylight
|   - moonlight
|   - automatic
|
| This file contains tokens only.
| It does not define page layouts or component selectors.
|
*/

/* -------------------------------------------------------------------------
   Shared structural tokens
   ------------------------------------------------------------------------- */

:root {
    --z-font-sans:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --z-font-serif:
        Georgia,
        "Times New Roman",
        serif;

    --z-font-mono:
        "Cascadia Code",
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        monospace;

    --z-font-size-xs: 0.75rem;
    --z-font-size-sm: 0.875rem;
    --z-font-size-md: 1rem;
    --z-font-size-lg: 1.125rem;
    --z-font-size-xl: 1.25rem;
    --z-font-size-2xl: 1.5rem;
    --z-font-size-3xl: 1.875rem;
    --z-font-size-4xl: 2.25rem;

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

    --z-line-height-tight: 1.2;
    --z-line-height-normal: 1.5;
    --z-line-height-relaxed: 1.7;

    --z-space-0: 0;
    --z-space-1: 0.25rem;
    --z-space-2: 0.5rem;
    --z-space-3: 0.75rem;
    --z-space-4: 1rem;
    --z-space-5: 1.25rem;
    --z-space-6: 1.5rem;
    --z-space-8: 2rem;
    --z-space-10: 2.5rem;
    --z-space-12: 3rem;
    --z-space-16: 4rem;
    --z-space-20: 5rem;

    --z-radius-sm: 0.5rem;
    --z-radius-md: 0.75rem;
    --z-radius-lg: 1rem;
    --z-radius-xl: 1.5rem;
    --z-radius-pill: 999rem;

    --z-border-width: 1px;
    --z-border-width-strong: 2px;

    --z-shadow-sm:
        0 4px 14px rgba(15, 23, 42, 0.08);

    --z-shadow-md:
        0 14px 34px rgba(15, 23, 42, 0.12);

    --z-shadow-lg:
        0 24px 60px rgba(15, 23, 42, 0.18);

    --z-transition-fast: 160ms ease;
    --z-transition-normal: 240ms ease;
    --z-transition-slow: 360ms ease;

    --z-zindex-dropdown: 1000;
    --z-zindex-sticky: 1020;
    --z-zindex-fixed: 1030;
    --z-zindex-modal: 1050;
    --z-zindex-toast: 1080;

    --z-content-width-sm: 40rem;
    --z-content-width-md: 64rem;
    --z-content-width-lg: 80rem;
    --z-content-width-xl: 96rem;
}

/* -------------------------------------------------------------------------
   Theme family: Professional Neutral
   ------------------------------------------------------------------------- */

[data-zawaro-theme="professional-neutral"] {
    --z-primary: #3F3F46;
    --z-primary-hover: #27272A;
    --z-primary-active: #18181B;
    --z-primary-contrast: #FFFFFF;
    --z-primary-soft: #F4F4F5;

    --z-accent: #52525B;
    --z-accent-hover: #3F3F46;
    --z-accent-soft: #E4E4E7;

    --z-success: #15803D;
    --z-success-soft: #DCFCE7;
    --z-warning: #B45309;
    --z-warning-soft: #FEF3C7;
    --z-danger: #B91C1C;
    --z-danger-soft: #FEE2E2;
    --z-info: #1D4ED8;
    --z-info-soft: #DBEAFE;

    --z-focus-ring:
        0 0 0 3px rgba(82, 82, 91, 0.24);
}

/* -------------------------------------------------------------------------
   Theme family: Evergreen
   ------------------------------------------------------------------------- */

[data-zawaro-theme="evergreen"] {
    --z-primary: #047857;
    --z-primary-hover: #065F46;
    --z-primary-active: #064E3B;
    --z-primary-contrast: #FFFFFF;
    --z-primary-soft: #D1FAE5;

    --z-accent: #0F766E;
    --z-accent-hover: #115E59;
    --z-accent-soft: #CCFBF1;

    --z-success: #15803D;
    --z-success-soft: #DCFCE7;
    --z-warning: #B45309;
    --z-warning-soft: #FEF3C7;
    --z-danger: #B91C1C;
    --z-danger-soft: #FEE2E2;
    --z-info: #0369A1;
    --z-info-soft: #E0F2FE;

    --z-focus-ring:
        0 0 0 3px rgba(16, 185, 129, 0.24);
}

/* -------------------------------------------------------------------------
   Theme family: Slate Blue
   ------------------------------------------------------------------------- */

[data-zawaro-theme="slate-blue"] {
    --z-primary: #2563A6;
    --z-primary-hover: #1E4F86;
    --z-primary-active: #173D68;
    --z-primary-contrast: #FFFFFF;
    --z-primary-soft: #E7F0FA;

    --z-accent: #4C78A8;
    --z-accent-hover: #365F8D;
    --z-accent-soft: #EAF1F8;

    --z-success: #15803D;
    --z-success-soft: #DCFCE7;
    --z-warning: #B45309;
    --z-warning-soft: #FEF3C7;
    --z-danger: #B91C1C;
    --z-danger-soft: #FEE2E2;
    --z-info: #2563A6;
    --z-info-soft: #DBEAFE;

    --z-focus-ring:
        0 0 0 3px rgba(37, 99, 166, 0.26);
}
/* -------------------------------------------------------------------------
   Appearance: Daylight
   ------------------------------------------------------------------------- */

[data-zawaro-appearance="daylight"] {
    --z-page-bg: #F3F4F6;
    --z-surface: #FFFFFF;
    --z-surface-raised: #FFFFFF;
    --z-surface-muted: #F8FAFC;
    --z-surface-soft: #F4F4F5;
    --z-surface-overlay: rgba(255, 255, 255, 0.94);

    --z-text: #18181B;
    --z-text-strong: #09090B;
    --z-text-muted: #62605B;
    --z-text-soft: #71717A;
    --z-text-disabled: #A1A1AA;
    --z-text-inverse: #FFFFFF;

    --z-border: #E4E4E7;
    --z-border-strong: #D1D5DB;
    --z-divider: #E5E7EB;

    --z-input-bg: #FFFFFF;
    --z-input-text: #18181B;
    --z-input-placeholder: #A1A1AA;
    --z-input-border: #D4D4D8;

    --z-table-header-bg: #F4F4F5;
    --z-table-row-hover: #FAFAFA;
    --z-table-stripe: #FCFCFC;

    --z-backdrop: rgba(15, 23, 42, 0.45);

    color-scheme: light;
}

/* -------------------------------------------------------------------------
   Appearance: Moonlight
   ------------------------------------------------------------------------- */

[data-zawaro-appearance="moonlight"] {
    --z-page-bg: #111113;
    --z-surface: #1B1B1E;
    --z-surface-raised: #222226;
    --z-surface-muted: #27272A;
    --z-surface-soft: #2E2E33;
    --z-surface-overlay: rgba(27, 27, 30, 0.94);

    --z-text: #F4F4F5;
    --z-text-strong: #FFFFFF;
    --z-text-muted: #D4D4D8;
    --z-text-soft: #A1A1AA;
    --z-text-disabled: #71717A;
    --z-text-inverse: #18181B;

    --z-border: #34343A;
    --z-border-strong: #4A4A52;
    --z-divider: #3F3F46;

    --z-input-bg: #222226;
    --z-input-text: #F4F4F5;
    --z-input-placeholder: #A1A1AA;
    --z-input-border: #4A4A52;

    --z-table-header-bg: #27272A;
    --z-table-row-hover: #242428;
    --z-table-stripe: #1F1F23;

    --z-backdrop: rgba(0, 0, 0, 0.68);

    --z-shadow-sm:
        0 4px 14px rgba(0, 0, 0, 0.28);

    --z-shadow-md:
        0 14px 34px rgba(0, 0, 0, 0.36);

    --z-shadow-lg:
        0 24px 60px rgba(0, 0, 0, 0.46);

    color-scheme: dark;
}

/* -------------------------------------------------------------------------
   Appearance: Automatic
   ------------------------------------------------------------------------- */

@media (prefers-color-scheme: light) {
    [data-zawaro-appearance="automatic"] {
        --z-page-bg: #F3F4F6;
        --z-surface: #FFFFFF;
        --z-surface-raised: #FFFFFF;
        --z-surface-muted: #F8FAFC;
        --z-surface-soft: #F4F4F5;
        --z-surface-overlay: rgba(255, 255, 255, 0.94);

        --z-text: #18181B;
        --z-text-strong: #09090B;
        --z-text-muted: #62605B;
        --z-text-soft: #71717A;
        --z-text-disabled: #A1A1AA;
        --z-text-inverse: #FFFFFF;

        --z-border: #E4E4E7;
        --z-border-strong: #D1D5DB;
        --z-divider: #E5E7EB;

        --z-input-bg: #FFFFFF;
        --z-input-text: #18181B;
        --z-input-placeholder: #A1A1AA;
        --z-input-border: #D4D4D8;

        --z-table-header-bg: #F4F4F5;
        --z-table-row-hover: #FAFAFA;
        --z-table-stripe: #FCFCFC;

        --z-backdrop: rgba(15, 23, 42, 0.45);

        color-scheme: light;
    }
}

@media (prefers-color-scheme: dark) {
    [data-zawaro-appearance="automatic"] {
        --z-page-bg: #111113;
        --z-surface: #1B1B1E;
        --z-surface-raised: #222226;
        --z-surface-muted: #27272A;
        --z-surface-soft: #2E2E33;
        --z-surface-overlay: rgba(27, 27, 30, 0.94);

        --z-text: #F4F4F5;
        --z-text-strong: #FFFFFF;
        --z-text-muted: #D4D4D8;
        --z-text-soft: #A1A1AA;
        --z-text-disabled: #71717A;
        --z-text-inverse: #18181B;

        --z-border: #34343A;
        --z-border-strong: #4A4A52;
        --z-divider: #3F3F46;

        --z-input-bg: #222226;
        --z-input-text: #F4F4F5;
        --z-input-placeholder: #A1A1AA;
        --z-input-border: #4A4A52;

        --z-table-header-bg: #27272A;
        --z-table-row-hover: #242428;
        --z-table-stripe: #1F1F23;

        --z-backdrop: rgba(0, 0, 0, 0.68);

        --z-shadow-sm:
            0 4px 14px rgba(0, 0, 0, 0.28);

        --z-shadow-md:
            0 14px 34px rgba(0, 0, 0, 0.36);

        --z-shadow-lg:
            0 24px 60px rgba(0, 0, 0, 0.46);

        color-scheme: dark;
    }
}

/* -------------------------------------------------------------------------
   Accessibility and motion
   ------------------------------------------------------------------------- */

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