/* ============================================
   DEFAULT THEME - CSS VARIABLES
   Sober Gray Color Palette - No Gold
   ============================================ */

:root {
    /* === PRIMARY COLORS (from color palette) === */
    --dwcs-primary: #484C4D;
    --dwcs-secondary: #515151;
    --dwcs-accent: #515151;
    --dwcs-black: #35312E;
    --dwcs-dark: #363A3B;
    --dwcs-white: #ffffff;
    
    /* === GRAY SCALE === */
    --dwcs-gray-100: #F1F0E6;
    --dwcs-gray-200: #D8D6D1;
    --dwcs-gray-300: #D9D2CC;
    --dwcs-gray-400: #DCD5C5;
    --dwcs-gray-500: #808080;
    --dwcs-gray-600: #716F70;
    --dwcs-gray-700: #515151;
    --dwcs-gray-800: #363A3B;
    --dwcs-gray-900: #35312E;
    
    --dwcs-gold: #ffffff;

    /* === TITLE/TEXT GRAYS === */
    --dwcs-title-gray: #777878;
    --dwcs-dark-blue-1: #363A3B;
    --dwcs-dark-blue-2: #808080;
    
    /* === PAGE BACKGROUND === */
    --dwcs-page-bg: #D8D6D1;
    --dwcs-page-bg-alt: #F1F0E6;
    
    /* === HEADER (radial gradient) === */
    --dwcs-header-bg: radial-gradient(circle at 59% -50%, #808080 0%, #363A3B 100%);
    --dwcs-header-height: 90px;
    --dwcs-cover-bg: radial-gradient(circle at 50% 60%,#D0D8DA 1%, #35312E 70%, #2a2a2a 80%, #1a1a1a 100%);
    
    /* === DARK CONTAINER (Certificate/Specifications) === */
    --dwcs-container-bg: #35312E;
    --dwcs-container-bg-start: #55504e;
    --dwcs-container-bg-end: #232120;
    --dwcs-container-border: rgba(255, 255, 255, 0.1);
    
    /* === GLASSMORPHISM === */
    --dwcs-glass-bg: #4e5152;
    --dwcs-glass-border: rgba(255, 255, 255, 0.1);
    --dwcs-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    --dwcs-glass-blur: 20px;
    
    /* === TEXT COLORS === */
    --dwcs-text-primary: #35312E;
    --dwcs-text-secondary: #515151;
    --dwcs-text-muted: #716F70;
    --dwcs-text-light: #ffffff;
    --dwcs-text-light-muted: rgba(255, 255, 255, 0.7);
    --dwcs-text-light-subtle: rgba(255, 255, 255, 0.5);
    
    /* === STATUS COLORS === */
    --dwcs-success: #4a9c5d;
    --dwcs-success-bg: rgba(74, 156, 93, 0.1);
    --dwcs-warning: #a08040;
    --dwcs-warning-bg: rgba(160, 128, 64, 0.1);
    --dwcs-error: #a04040;
    --dwcs-error-bg: rgba(160, 64, 64, 0.1);
    --dwcs-info: #4a6c8c;
    --dwcs-info-bg: rgba(74, 108, 140, 0.1);
    
    /* === CLAIM BANNER (sober gray, no gold) === */
    --dwcs-claim-bg: linear-gradient(135deg, #716F70 0%, #515151 100%);
    --dwcs-claim-text: #ffffff;
    
    /* === TABS === */
    --dwcs-tab-bg: rgba(255, 255, 255, 0.1);
    --dwcs-tab-active-bg: #ffffff;
    --dwcs-tab-active-text: #1a1a1a;
    --dwcs-tab-text: rgba(255, 255, 255, 0.7);
    
    /* Letter spacing*/
    --dwcs-letter-spacing-xs: 0.3em;

    /* === SPACING === */
    --dwcs-spacing-xs: 0.25rem;
    --dwcs-spacing-sm: 0.5rem;
    --dwcs-spacing-md: 1rem;
    --dwcs-spacing-md2: 1.25rem;
    --dwcs-spacing-lg: 1.5rem;
    --dwcs-spacing-xl: 2rem;
    --dwcs-spacing-2xl: 3rem;
    --dwcs-spacing-3xl: 4rem;
    
    /* === TYPOGRAPHY === */
    --dwcs-font-primary: "Silka", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --dwcs-font-helvetica: "Silka", 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --dwcs-font-size-2xs: 0.65rem;
    --dwcs-font-size-xs: 0.75rem;
    --dwcs-font-size-sm: 0.875rem;
    --dwcs-font-size-base: 1rem;
    --dwcs-font-size-lg: 1.125rem;
    --dwcs-font-size-xl: 1.25rem;
    --dwcs-font-size-2xl: 1.5rem;
    --dwcs-font-size-3xl: 2rem;
    --dwcs-font-size-4xl: 2.5rem;
    
    /* === BORDERS === */
    --dwcs-radius-sm: 0.25rem;
    --dwcs-radius-md: 0.5rem;
    --dwcs-radius-lg: 0.75rem;
    --dwcs-radius-xl: 1rem;
    --dwcs-radius-2xl: 1.5rem;
    --dwcs-radius-3xl: 2rem;
    --dwcs-radius-full: 9999px;
    
    /* === TRANSITIONS === */
    --dwcs-transition-fast: 150ms ease;
    --dwcs-transition-normal: 250ms ease;
    --dwcs-transition-slow: 350ms ease;
    
    /* === LAYOUT === */
    --dwcs-content-max-width: 480px;
    --dwcs-container-max-width: 520px;
    --dwcs-container-max-width-l: 600px;
    
    /* === USER SECTION (Sober Black/White) === */
    --dwcs-user-bg: #ffffff;
    --dwcs-user-text: #1a1a1a;
    --dwcs-user-border: #e5e5e5;
    --dwcs-user-input-bg: #ffffff;
    --dwcs-user-input-border: #d4d4d4;
    --dwcs-user-input-focus: #1a1a1a;
    --dwcs-user-btn-bg: #1a1a1a;
    --dwcs-user-btn-text: #ffffff;
    --dwcs-user-btn-hover: #404040;
    
    /* === SLIDE PANEL === */
    --dwcs-panel-width: 320px;
    --dwcs-panel-bg: #ffffff;
    --dwcs-panel-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
}

/* Dark mode support (optional) */
@media (prefers-color-scheme: dark) {
    :root {
        --dwcs-user-bg: #1a1a1a;
        --dwcs-user-text: #ffffff;
        --dwcs-user-border: #404040;
        --dwcs-user-input-bg: #262626;
        --dwcs-user-input-border: #404040;
        --dwcs-user-input-focus: #ffffff;
        --dwcs-user-btn-bg: #ffffff;
        --dwcs-user-btn-text: #1a1a1a;
        --dwcs-user-btn-hover: #e5e5e5;
        --dwcs-panel-bg: #1a1a1a;
    }
}