/**
 * WorkShift Design Tokens — Enterprise SaaS (Atlassian Design Language)
 * Flat, clean, structured, professional, calm
 */

:root {
    /* ── Spacing Scale (4px base) ── */
    --space-0: 0;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-24: 96px;

    /* ── Corner Radii (small, tidy) ── */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-full: 9999px;

    /* ── Typography ── */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    --text-caption: 0.75rem;   /* 12px */
    --text-body: 0.875rem;     /* 14px – default */
    --text-body-lg: 1rem;      /* 16px */
    --text-h3: 1.25rem;        /* 20px */
    --text-h2: 1.5rem;         /* 24px */
    --text-h1: 1.8125rem;      /* 29px */
    --text-hero: clamp(1.8125rem, 3vw + 1rem, 2.75rem);
    --leading-body: 1.5;
    --leading-heading: 1.25;

    /* ── Font Weights ── */
    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;

    /* ── Transitions ── */
    --transition-fast: 100ms ease;
    --transition-normal: 150ms ease;
    --transition-slow: 200ms ease;

    /* ── Layout Dimensions ── */
    --sidebar-width: 264px;
    --sidebar-collapsed: 64px;
    --topbar-height: 56px;
    --dock-height: 56px;

    /* ── Z-Index Scale ── */
    --z-base: 0;
    --z-dropdown: 10;
    --z-sticky: 20;
    --z-topbar: 30;
    --z-sidebar: 40;
    --z-backdrop: 50;
    --z-slideover: 60;
    --z-modal: 70;
    --z-toast: 80;
    --z-dock: 35;

    /* ── Elevation Shadows (floating layers only) ── */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 8px -2px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.06);
    --shadow-lg: 0 12px 24px -4px rgba(0,0,0,0.12), 0 4px 8px -2px rgba(0,0,0,0.08);
    --shadow-overlay: 0 8px 28px rgba(0,0,0,0.28);
}

/* =========================================================================
   DARK THEME (Default)
   ========================================================================= */
[data-theme="dark"] {
    --color-bg-page: #1D2125;
    --color-bg-surface: #22272B;
    --color-bg-surface-sunken: #161A1D;
    --color-bg-surface-raised: #282E33;
    --color-bg-surface-overlay: #2C333A;
    --color-bg-input: #22272B;
    --color-bg-disabled: #2C333A;
    --color-bg-hover: #2C333A;
    --color-bg-selected: rgba(87, 157, 255, 0.16);

    --color-text: #DEE4EA;
    --color-text-subtle: #9FADBC;
    --color-text-subtlest: #738496;
    --color-text-disabled: #5C6C7A;
    --color-text-inverse: #1D2125;

    --color-border: #38414A;
    --color-border-focused: #85B8FF;

    --color-brand: #579DFF;
    --color-brand-text: #1D2125;
    --color-brand-hover: #85B8FF;
    --color-brand-subtle: rgba(87, 157, 255, 0.16);

    --color-link: #579DFF;
    --color-link-hover: #85B8FF;

    /* Semantic */
    --color-success: #4BCE97;
    --color-success-bg: rgba(75, 206, 151, 0.16);
    --color-success-text: #BAF3DB;
    --color-success-border: #216E4E;

    --color-warning: #F5CD47;
    --color-warning-bg: rgba(245, 205, 71, 0.16);
    --color-warning-text: #F8E6A0;
    --color-warning-border: #7F5F01;

    --color-danger: #F87168;
    --color-danger-bg: rgba(248, 113, 104, 0.16);
    --color-danger-text: #FFD5D2;
    --color-danger-border: #AE2E24;

    --color-info: #579DFF;
    --color-info-bg: rgba(87, 157, 255, 0.16);
    --color-info-text: #CCE0FF;
    --color-info-border: #0055CC;

    --color-discovery: #9F8FEF;
    --color-discovery-bg: rgba(159, 143, 239, 0.16);
    --color-discovery-text: #DFD8FD;

    /* Blocker lozenges */
    --blocker-feedback-bg: rgba(245, 205, 71, 0.16);
    --blocker-feedback-text: #F8E6A0;
    --blocker-feedback-border: #7F5F01;

    --blocker-content-bg: rgba(159, 143, 239, 0.16);
    --blocker-content-text: #DFD8FD;
    --blocker-content-border: #5E4DB2;

    --blocker-payment-bg: rgba(75, 206, 151, 0.16);
    --blocker-payment-text: #BAF3DB;
    --blocker-payment-border: #216E4E;

    --blocker-scheduling-bg: rgba(87, 157, 255, 0.16);
    --blocker-scheduling-text: #CCE0FF;
    --blocker-scheduling-border: #0055CC;

    /* Sidebar/topbar */
    --color-bg-sidebar: #1D2125;
    --color-bg-topbar: #1D2125;
    --color-sidebar-border: #2C333A;
    --color-topbar-border: #2C333A;

    /* Scrollbar */
    --scrollbar-thumb: rgba(255,255,255,0.12);
    --scrollbar-thumb-hover: rgba(255,255,255,0.24);
}

/* =========================================================================
   LIGHT THEME
   ========================================================================= */
[data-theme="light"] {
    --color-bg-page: #FFFFFF;
    --color-bg-surface: #FFFFFF;
    --color-bg-surface-sunken: #F1F2F4;
    --color-bg-surface-raised: #FFFFFF;
    --color-bg-surface-overlay: #FFFFFF;
    --color-bg-input: #FFFFFF;
    --color-bg-disabled: #F1F2F4;
    --color-bg-hover: #F1F2F4;
    --color-bg-selected: rgba(12, 102, 228, 0.08);

    --color-text: #172B4D;
    --color-text-subtle: #44546F;
    --color-text-subtlest: #626F86;
    --color-text-disabled: #8993A5;
    --color-text-inverse: #FFFFFF;

    --color-border: #DCDFE4;
    --color-border-focused: #388BFF;

    --color-brand: #0C66E4;
    --color-brand-text: #FFFFFF;
    --color-brand-hover: #0055CC;
    --color-brand-subtle: rgba(12, 102, 228, 0.08);

    --color-link: #0C66E4;
    --color-link-hover: #0055CC;

    /* Semantic */
    --color-success: #22A06B;
    --color-success-bg: #DFFCF0;
    --color-success-text: #164B35;
    --color-success-border: #7EE2B8;

    --color-warning: #CF9F02;
    --color-warning-bg: #FFF7D6;
    --color-warning-text: #533F04;
    --color-warning-border: #F5CD47;

    --color-danger: #C9372C;
    --color-danger-bg: #FFECEB;
    --color-danger-text: #5D1F1A;
    --color-danger-border: #F87168;

    --color-info: #0C66E4;
    --color-info-bg: #E9F2FF;
    --color-info-text: #09326C;
    --color-info-border: #579DFF;

    --color-discovery: #6E5DC6;
    --color-discovery-bg: #F3F0FF;
    --color-discovery-text: #352C63;

    /* Blocker lozenges */
    --blocker-feedback-bg: #FFF7D6;
    --blocker-feedback-text: #533F04;
    --blocker-feedback-border: #F5CD47;

    --blocker-content-bg: #F3F0FF;
    --blocker-content-text: #352C63;
    --blocker-content-border: #B8ACF6;

    --blocker-payment-bg: #DFFCF0;
    --blocker-payment-text: #164B35;
    --blocker-payment-border: #7EE2B8;

    --blocker-scheduling-bg: #E9F2FF;
    --blocker-scheduling-text: #09326C;
    --blocker-scheduling-border: #579DFF;

    /* Sidebar/topbar */
    --color-bg-sidebar: #F7F8F9;
    --color-bg-topbar: #FFFFFF;
    --color-sidebar-border: #DCDFE4;
    --color-topbar-border: #DCDFE4;

    /* Scrollbar */
    --scrollbar-thumb: rgba(0,0,0,0.12);
    --scrollbar-thumb-hover: rgba(0,0,0,0.24);
}