/* ========================================
   Imagify Design System Tokens
   Extracted from Figma - Imagify.ai
   Applied to Kamelion - AI Brand Assistant
   ======================================== */

:root {
    /* ========== BACKGROUND COLORS ========== */
    --color-bg-primary: #000000;
    --color-bg-sidebar: linear-gradient(197deg, rgba(12, 14, 18, 0.95) 3%, rgba(23, 28, 36, 0.9) 14%, rgba(12, 14, 18, 0.95) 57%);
    --color-bg-card: linear-gradient(197.05deg, rgba(255, 255, 255, 0.16) 17.507%, rgba(255, 255, 255, 0.1) 82.358%);
    --color-bg-card-alt: linear-gradient(211.25deg, rgba(255, 255, 255, 0.16) 17.507%, rgba(255, 255, 255, 0.1) 82.358%);
    --color-bg-input: #000000;
    --color-bg-button-secondary: rgba(255, 255, 255, 0.01);
    --color-bg-overlay: rgba(0, 0, 0, 0.7);
    --color-bg-hover: rgba(255, 255, 255, 0.08);

    /* ========== ACCENT COLORS ========== */
    --color-active: #4ade80;
    --color-active-bg: rgba(74, 222, 128, 0.15);
    --color-success: #4ade80;
    --color-success-bg: rgba(74, 222, 128, 0.15);
    --color-error: #ef4444;
    --color-error-bg: rgba(239, 68, 68, 0.15);
    --color-warning: #fbbf24;
    --color-warning-bg: rgba(251, 191, 36, 0.15);

    /* CRM Dashboard Accent Colors (NetSuite-inspired) */
    --color-accent-yellow: #E4FF00;
    --color-accent-yellow-dark: #C8E600;
    --color-accent-orange: #FF8C42;
    --color-accent-coral: #FF6B5B;
    --color-accent-blue: #4A90D9;
    --color-surface-light: #F5F5F0;
    --color-surface-card-light: #FFFFFF;
    --color-text-dark: #1A1A1A;
    --color-text-dark-secondary: #666666;

    /* ========== TEXT COLORS ========== */
    --color-text-primary: #ffffff;
    --color-text-secondary: rgba(255, 255, 255, 0.8);
    --color-text-muted: rgba(255, 255, 255, 0.7);
    --color-text-label: rgba(255, 255, 255, 0.6);
    --color-text-disabled: rgba(255, 255, 255, 0.4);
    --color-text-inverse: #000000;

    /* ========== BORDER COLORS ========== */
    --color-border-card: rgba(255, 255, 255, 0.14);
    --color-border-button: rgba(255, 255, 255, 0.2);
    --color-border-input: rgba(255, 255, 255, 0.3);
    --color-border-active: rgba(74, 222, 128, 0.5);

    /* ========== BUTTON COLORS ========== */
    --color-button-primary-bg: #ffffff;
    --color-button-primary-text: #000000;
    --color-button-secondary-bg: rgba(255, 255, 255, 0.01);
    --color-button-secondary-border: rgba(255, 255, 255, 0.2);

    /* ========== GRADIENTS ========== */
    --gradient-card: linear-gradient(197.05deg, rgba(255, 255, 255, 0.16) 17.507%, rgba(255, 255, 255, 0.1) 82.358%);
    --gradient-card-hover: linear-gradient(197.05deg, rgba(255, 255, 255, 0.2) 17.507%, rgba(255, 255, 255, 0.14) 82.358%);
    --gradient-sidebar: linear-gradient(197deg, rgba(12, 14, 18, 0.98) 3%, rgba(23, 28, 36, 0.95) 14%, rgba(12, 14, 18, 0.98) 57%);
    --gradient-profile: linear-gradient(86.41deg, rgba(255, 255, 255, 0.114) 0.123%, rgba(255, 255, 255, 0.07) 99.192%);

    /* Green aurora/glow decorative gradients */
    --gradient-glow-green: radial-gradient(ellipse at top right, rgba(74, 222, 128, 0.15) 0%, transparent 50%);
    --gradient-glow-green-left: radial-gradient(ellipse at top left, rgba(74, 222, 128, 0.1) 0%, transparent 40%);

    /* ========== TYPOGRAPHY ========== */
    --font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Font Sizes - Extended from Figma */
    --font-size-xs: 13px;
    --font-size-sm: 14px;
    --font-size-base: 15px;
    --font-size-md: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-size-2xl: 22px;
    --font-size-3xl: 24px;
    --font-size-4xl: 26px;
    --font-size-5xl: 29px;
    --font-size-hero: 32px;

    /* Letter Spacing */
    --letter-spacing-tight: -0.5px;
    --letter-spacing-tighter: -1px;
    --letter-spacing-wide: 1px;

    /* Line Heights */
    --line-height-none: 1;
    --line-height-tight: 1.26;
    --line-height-normal: 1.5;

    /* ========== SPACING ========== */
    --spacing-xs: 4px;
    --spacing-sm: 6px;
    --spacing-md: 8px;
    --spacing-lg: 10px;
    --spacing-xl: 12px;
    --spacing-2xl: 16px;
    --spacing-3xl: 18px;
    --spacing-4xl: 20px;
    --spacing-5xl: 24px;
    --spacing-6xl: 28px;
    --spacing-7xl: 32px;
    --spacing-8xl: 40px;
    --spacing-9xl: 48px;

    /* ========== BORDER RADIUS ========== */
    --border-radius-sm: 6px;
    --border-radius-md: 8px;
    --border-radius-input: 10px;
    --border-radius-lg: 12px;
    --border-radius-xl: 16px;
    --border-radius-full: 40px;

    /* ========== SHADOWS ========== */
    --shadow-sm: 0px 1px 2px rgba(0, 0, 0, 0.1);
    --shadow-md: 0px 2px 4px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0px 4px 8px rgba(0, 0, 0, 0.2);
    --shadow-inset: inset 0px 0px 6.667px 0px rgba(255, 255, 255, 0.1);
    --shadow-glow-green: 0 0 60px rgba(74, 222, 128, 0.2);

    /* ========== BLUR EFFECTS ========== */
    --blur-none: 0px;
    --blur-sm: 8px;
    --blur-md: 16.667px;
    --blur-lg: 50px;
    --blur-xl: 125px;

    /* ========== TRANSITIONS ========== */
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;
    --transition-easing: cubic-bezier(0.4, 0, 0.2, 1);

    /* ========== LAYOUT ========== */
    --sidebar-width: 256px;
    --sidebar-padding: 14px;
    --sidebar-padding-x: 30px;
    --header-height: 80px;
    --menu-item-height: 40px;
    --menu-item-width: 224px;
    --icon-size: 24px;
    --icon-offset: 10px;
    --text-offset: 46px;

    /* Content widths */
    --content-max-width: 1090px;
    --content-padding: 310px;
    --content-gap: 40px;

    /* Gallery */
    --gallery-columns: 4;
    --gallery-gap: 18px;
    --gallery-image-width: 259px;
    --gallery-image-height: 300px;
    --gallery-image-radius: 12px;

    /* Feature Cards */
    --feature-card-width: 259px;
    --feature-card-height: 200px;
    --feature-card-gap: 18px;

    /* Modal */
    --modal-width: 1048px;
    --modal-height: 593px;
    --modal-image-width: 420px;

    /* Auth/Login Layout */
    --auth-split-gap: 120px;
    --auth-form-width: 400px;
    --auth-content-width: 595px;

    /* ========== FLOATING SIDEBAR ========== */
    --sidebar-width-collapsed: 72px;
    --sidebar-width-expanded: 256px;
    --sidebar-margin: 20px;
    --sidebar-border-radius: 24px;
    --sidebar-bg: rgba(12, 14, 18, 0.75);
    --sidebar-border: rgba(255, 255, 255, 0.08);
    --sidebar-border-hover: rgba(255, 255, 255, 0.15);

    /* ========== DYNAMIC LAYOUT VARIABLES ========== */
    /* Dynamic main wrapper calculation */
    --main-wrapper-offset-expanded: calc(var(--sidebar-margin) + var(--sidebar-width-expanded));
    --main-wrapper-offset-collapsed: calc(var(--sidebar-margin) + var(--sidebar-width-collapsed));
    --main-wrapper-offset: var(--main-wrapper-offset-expanded);

    /* Responsive breakpoints */
    --layout-breakpoint-lg: 1200px;
    --layout-breakpoint-md: 900px;
    --layout-breakpoint-sm: 768px;
    --layout-breakpoint-xs: 480px;

    /* Shimmer Effect */
    --shimmer-color: rgba(255, 255, 255, 0.05);
    --shimmer-highlight: rgba(74, 222, 128, 0.4);
    --shimmer-speed: 2s;
}