/* =================================================================
   image2model CSS Variables — Forest & Rose Theme
   ================================================================= */

:root {
    /* =================================================================
       Brand Colors - Forest & Rose Palette
       ================================================================= */
    --brand-forest-green: #5f8c6b;
    --brand-dusty-rose: #a8707e;
    --brand-warm-slate: #6b7c8d;
    --brand-dark-charcoal: #2d2a33;

    /* Legacy aliases (point to new values for backwards compat) */
    --brand-vibrant-red: #c25d5d;
    --brand-sky-blue: #5f8c6b;
    --brand-bright-cyan: #5f8c6b;
    --brand-sunset-orange: #d4913a;
    --brand-golden-yellow: #d4913a;

    /* =================================================================
       Brand Colors - Neutral Palette
       ================================================================= */
    --brand-white: #FFF;
    --brand-light-gray: #edf0ee;
    --brand-silver-gray: #BDC3C7;
    --brand-medium-gray: #95A5A6;
    --brand-dark-gray: #7F8C8D;
    --brand-black: #000;

    /* =================================================================
       Color Shade Variations (100-900 scale)
       ================================================================= */

    /* Green Shades (Forest) */
    --green-100: #e8f0ea;
    --green-200: #c5d9ca;
    --green-300: #a2c2aa;
    --green-400: #80ab8b;
    --green-500: #5f8c6b; /* Base Forest Green */
    --green-600: #4f7659;
    --green-700: #3f6048;
    --green-800: #304a37;
    --green-900: #203426;

    /* Rose Shades (Dusty Rose) */
    --rose-100: #f3e8eb;
    --rose-200: #e0c5cc;
    --rose-300: #cda2ad;
    --rose-400: #bb8994;
    --rose-500: #a8707e; /* Base Dusty Rose */
    --rose-600: #8e5e6a;
    --rose-700: #744d57;
    --rose-800: #5a3b43;
    --rose-900: #402a30;

    /* Slate Shades (Warm Slate) */
    --slate-100: #ebeef1;
    --slate-200: #c8ced5;
    --slate-300: #a5afb9;
    --slate-400: #8895a3;
    --slate-500: #6b7c8d; /* Base Warm Slate */
    --slate-600: #596877;
    --slate-700: #475561;
    --slate-800: #36414b;
    --slate-900: #242d35;

    /* Legacy shade aliases */
    --red-100: #f3e8eb;
    --red-200: #e0c5cc;
    --red-300: #d4a0a0;
    --red-400: #cc8080;
    --red-500: #c25d5d;
    --red-600: #a64e4e;
    --red-700: #8a4040;
    --red-800: #6e3232;
    --red-900: #522525;

    --blue-100: var(--green-100); /* stylelint-disable-line custom-property-empty-line-before */
    --blue-200: var(--green-200);
    --blue-300: var(--green-300);
    --blue-400: var(--green-400);
    --blue-500: var(--green-500);
    --blue-600: var(--green-600);
    --blue-700: var(--green-700);
    --blue-800: var(--green-800);
    --blue-900: var(--green-900);

    /* Yellow/Orange Shades (Warm Amber) */
    --yellow-100: #faf0e0;
    --yellow-200: #f2dbb5;
    --yellow-300: #e9c68a;
    --yellow-400: #dfab5f;
    --yellow-500: #d4913a;
    --yellow-600: #b47a30;
    --yellow-700: #946327;
    --yellow-800: #744d1e;
    --yellow-900: #543715;
    --orange-100: #faf0e0;
    --orange-200: #f2dbb5;
    --orange-300: #e9c68a;
    --orange-400: #dfab5f;
    --orange-500: #d4913a;
    --orange-600: #b47a30;
    --orange-700: #946327;
    --orange-800: #744d1e;
    --orange-900: #543715;

    /* Gray Shades - Updated for WCAG AA compliance */
    --gray-100: #FDFEFE;
    --gray-200: #FBFCFC;
    --gray-300: #F7F9F9;
    --gray-400: #edf0ee;
    --gray-500: #BDC3C7;
    --gray-600: #4a5568; /* Medium Gray - 7.0:1 contrast */
    --gray-700: #2d3748; /* Dark Gray - 10.9:1 contrast */
    --gray-800: #1a202c;
    --gray-900: #171923; /* Very Dark */

    /* =================================================================
       Semantic Color Variables — Forest & Rose
       ================================================================= */
    --color-primary: #5f8c6b;
    --color-secondary: #6d9d79;
    --color-accent: #a8707e;
    --color-success: #5f8c6b;
    --color-warning: #d4913a;
    --color-error: #c25d5d;
    --color-info: #6b7c8d;

    /* =================================================================
       Dark Mode Token Definitions
       ================================================================= */
    --dark-bg-primary: #1f2937;
    --dark-bg-secondary: #374151;
    --dark-bg-tertiary: #4b5563;
    --dark-bg-accent: rgb(95 140 107 / 10%);
    --dark-text-primary: #f9fafb;
    --dark-text-secondary: #e5e7eb;
    --dark-text-muted: #9ca3af;
    --dark-text-inverse: #1f2937;
    --dark-border-color: #4b5563;
    --dark-border-color-light: #6b7280;
    --dark-border-color-dark: #374151;
    --dark-accent-primary: var(--brand-forest-green);
    --dark-accent-secondary: var(--green-400);
    --dark-accent-hover: var(--green-400);
    --dark-accent-active: var(--green-600);

    /* =================================================================
       Compatibility Bridge for Deprecated Tokens
       ================================================================= */
    --color-white: var(--brand-white);
    --color-black: var(--brand-black);
    --color-blue-500-rgb: 95, 140, 107; /* rgb(--brand-forest-green) */
    --color-red-500-rgb: 194, 93, 93; /* rgb(--color-error) */
    --color-yellow-500-rgb: 212, 145, 58; /* rgb(--color-warning) */
    --color-green-500-rgb: 95, 140, 107; /* rgb(--brand-forest-green) */

    /* =================================================================
       Default Color Scheme - Light Theme
       WCAG AA Contrast Requirements:
       - Normal text (< 18pt): 4.5:1 minimum
       - Large text (>= 18pt or 14pt bold): 3:1 minimum
       ================================================================= */

    /* Alpha/overlay tokens (use via var(--*)) */
    --overlay-white-40: rgb(255 255 255 / 40%);
    --overlay-white-15: rgb(255 255 255 / 15%);
    --bg-primary: #f5f7f6;
    --bg-secondary: #edf0ee;
    --bg-tertiary: #e4e8e5;
    --bg-accent: rgb(95 140 107 / 8%);

    /* Text colors - All meet WCAG AA on white backgrounds */
    --text-primary: #1a202c;      /* Very dark - 16.1:1 contrast on white */
    --text-secondary: #2d3748;    /* Dark gray - 10.9:1 contrast on white */
    --text-muted: #4a5568;        /* Medium gray - 7.0:1 contrast on white */
    --text-inverse: #fff;

    /* Legacy support - map old values to new accessible ones */
    --text-subtle: #718096;       /* For decorative text only - 4.5:1 */
    --border-color: #d5dbd7;
    --border-color-light: #e4e8e5;
    --border-color-dark: #c5cbc7;

    /* Interactive Elements */
    --accent-primary: #5f8c6b;
    --accent-secondary: #6d9d79;
    --accent-hover: #4f7659;
    --accent-active: var(--green-700);


    /* =================================================================
       Gradient Presets — Forest & Rose
       ================================================================= */

    /* Primary gradients */
    --gradient-primary: linear-gradient(135deg, #2d2a33 0%, #3a3540 100%);
    --gradient-cool-ocean: linear-gradient(135deg, #2d2a33 0%, #3a3540 100%);
    --gradient-green-medium: linear-gradient(135deg, #5f8c6b 0%, #4f7659 100%);
    --gradient-green-light: linear-gradient(135deg, #6d9d79 0%, #5f8c6b 100%);
    --gradient-subtle: linear-gradient(135deg, #5f8c6b 0%, #4f7659 100%);

    /* Legacy gradient aliases */
    --gradient-blue-medium: var(--gradient-green-medium);
    --gradient-blue-light: var(--gradient-green-light);

    /* DEPRECATED - These now point to primary alternatives */
    --gradient-warm-sunset: var(--gradient-primary);
    --gradient-creative-burst: var(--gradient-cool-ocean);

    /* Text Gradients */
    --gradient-text-primary: linear-gradient(135deg, var(--brand-forest-green) 0%, var(--brand-dusty-rose) 100%);
    --gradient-text-secondary: linear-gradient(135deg, var(--brand-forest-green) 0%, var(--green-400) 100%);

    /* =================================================================
       Component-Specific Colors
       ================================================================= */

    /* Buttons — Forest & Rose */
    --btn-primary-bg: var(--brand-forest-green);
    --btn-primary-hover: var(--green-600);
    --btn-primary-active: var(--green-700);
    --btn-primary-text: #fff;
    --btn-secondary-bg: #2d2a33;
    --btn-secondary-hover: #3a3540;
    --btn-secondary-active: #1a1820;
    --btn-secondary-text: var(--brand-white);
    --btn-accent-bg: var(--brand-dusty-rose);
    --btn-accent-hover: var(--rose-600);
    --btn-accent-active: var(--rose-700);
    --btn-accent-text: #fff;

    /* Status Colors */
    --status-success-bg: rgb(95 140 107 / 10%);
    --status-success-border: #5f8c6b;
    --status-success-text: #4f7659;
    --status-warning-bg: rgb(212 145 58 / 10%);
    --status-warning-border: var(--color-warning);
    --status-warning-text: #b47a30;
    --status-error-bg: rgb(194 93 93 / 10%);
    --status-error-border: var(--color-error);
    --status-error-text: #a64e4e;
    --status-info-bg: rgb(107 124 141 / 10%);
    --status-info-border: var(--brand-warm-slate);
    --status-info-text: #596877;

    /* =================================================================
       Shadows (with forest color tints)
       ================================================================= */
    --shadow-sm: 0 1px 2px 0 rgb(45 42 51 / 5%);
    --shadow-md: 0 4px 6px -1px rgb(45 42 51 / 10%), 0 2px 4px -1px rgb(45 42 51 / 6%);
    --shadow-lg: 0 10px 15px -3px rgb(45 42 51 / 10%), 0 4px 6px -2px rgb(45 42 51 / 5%);
    --shadow-xl: 0 20px 25px -5px rgb(45 42 51 / 10%), 0 10px 10px -5px rgb(45 42 51 / 4%);
    --shadow-red: 0 4px 14px 0 rgb(194 93 93 / 30%);
    --shadow-green: 0 4px 14px 0 rgb(95 140 107 / 30%);
    --shadow-blue: var(--shadow-green);
    --shadow-yellow: 0 4px 14px 0 rgb(212 145 58 / 30%);

    /* Elevation-specific shadows for animations */
    --shadow-elevation-1: 0 10px 20px -5px rgb(45 42 51 / 10%), 0 20px 40px -10px rgb(45 42 51 / 20%);
    --shadow-elevation-2: 0 10px 30px -10px rgb(45 42 51 / 15%), 0 25px 50px -12px rgb(45 42 51 / 25%);
    --shadow-glow: 0 0 30px rgb(95 140 107 / 30%);

    /* =================================================================
       Spacing System (unchanged)
       ================================================================= */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;

    /* =================================================================
       Border Radius (unchanged)
       ================================================================= */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-full: 9999px;

    /* =================================================================
       Transitions and Animation Tokens
       ================================================================= */
    --transition-fast: 150ms ease-in-out;
    --transition-normal: 300ms ease-in-out;
    --transition-slow: 500ms ease-in-out;

    /* Animation Easing */
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);
    --ease-in-out-cubic: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* Animation Durations */
    --duration-short: 200ms;
    --duration-medium: 400ms;
    --duration-long: 600ms;
    --duration-xl: 800ms;

    /* Animation Delays */
    --delay-stagger: 100ms;

    /* =================================================================
       Typography System
       ================================================================= */

    /* Font Sizes */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;
    --text-6xl: 3.75rem;
    --text-7xl: 4.5rem;
    --text-8xl: 6rem;
    --text-9xl: 8rem;

    /* Font Weights */
    --font-light: 300;
    --font-regular: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;
    --font-black: 900;

    /* Font Families — Karla / Space Mono / Bebas Neue */
    --font-sans: 'Karla', -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif;
    --font-mono: 'Space Mono', 'Fira Code', 'Consolas', 'Monaco', 'Courier New', monospace;
    --font-display: 'Bebas Neue', 'Impact', 'Arial Black', sans-serif;
    --font-primary: var(--font-sans);

    /* Line Heights */
    --leading-none: 1;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --leading-loose: 2;
    --leading-extra: 2.25;

    /* Letter Spacing */
    --tracking-tighter: -0.05em;
    --tracking-tight: -0.025em;
    --tracking-normal: 0em;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
    --tracking-widest: 0.1em;

    /* Display Typography */
    --display-font-size: var(--text-4xl);
    --display-line-height: var(--leading-tight);
    --display-letter-spacing: var(--tracking-tight);
    --display-font-weight: var(--font-bold);

    /* Heading Typography */
    --h1-font-size: var(--text-3xl);
    --h1-line-height: var(--leading-tight);
    --h1-letter-spacing: var(--tracking-tight);
    --h1-font-weight: var(--font-bold);
    --h2-font-size: var(--text-2xl);
    --h2-line-height: var(--leading-snug);
    --h2-letter-spacing: var(--tracking-tight);
    --h2-font-weight: var(--font-semibold);
    --h3-font-size: var(--text-xl);
    --h3-line-height: var(--leading-snug);
    --h3-letter-spacing: var(--tracking-normal);
    --h3-font-weight: var(--font-semibold);
    --h4-font-size: var(--text-lg);
    --h4-line-height: var(--leading-snug);
    --h4-letter-spacing: var(--tracking-normal);
    --h4-font-weight: var(--font-medium);
    --h5-font-size: var(--text-base);
    --h5-line-height: var(--leading-normal);
    --h5-letter-spacing: var(--tracking-normal);
    --h5-font-weight: var(--font-medium);
    --h6-font-size: var(--text-sm);
    --h6-line-height: var(--leading-normal);
    --h6-letter-spacing: var(--tracking-normal);
    --h6-font-weight: var(--font-semibold);

    /* Body Typography */
    --body-font-size: var(--text-base);
    --body-line-height: var(--leading-normal);
    --body-letter-spacing: var(--tracking-normal);
    --body-font-weight: var(--font-regular);
    --body-lg-font-size: var(--text-lg);
    --body-lg-line-height: var(--leading-relaxed);
    --body-lg-letter-spacing: var(--tracking-normal);
    --body-sm-font-size: var(--text-sm);
    --body-sm-line-height: var(--leading-relaxed);
    --body-sm-letter-spacing: var(--tracking-normal);

    /* Caption Typography */
    --caption-font-size: var(--text-xs);
    --caption-line-height: var(--leading-normal);
    --caption-letter-spacing: var(--tracking-normal);
    --caption-font-weight: var(--font-medium);

    /* Code Typography */
    --code-font-size: var(--text-sm);
    --code-line-height: var(--leading-relaxed);
    --code-letter-spacing: var(--tracking-normal);
    --code-font-weight: var(--font-regular);

    /* =================================================================
       Additional Utility Tokens
       ================================================================= */

    /* Gradients */
    --gradient-tech-fusion: linear-gradient(135deg, var(--brand-forest-green), var(--brand-dusty-rose));
    --gradient-mountain-mist: linear-gradient(135deg, var(--brand-light-gray), var(--brand-white));

    /* Status Tokens */
    --success: #5f8c6b;
    --error: #c25d5d;
    --success-dark: #4f7659;

    /* Additional spacing */
    --spacing-3xl: 4rem;

    /* Interactive Tokens */
    --percentage: 0%; /* For progress/animation calculations */
    --i: 0; /* Animation iteration counter */
    --progress: 0; /* Progress value */
    --tilt-x: 0deg; /* 3D transform */
    --tilt-y: 0deg; /* 3D transform */
    --mouse-x: 50%; /* Mouse position */
    --mouse-y: 50%; /* Mouse position */
    --ripple-x: 0; /* Ripple effect */
    --ripple-y: 0; /* Ripple effect */
    --toggle-position: 0; /* Toggle switch position */
    --size: 1rem; /* Base size unit */
    --stroke-width: 2px; /* Icon stroke width */
    --circumference: 314.159; /* SVG circle circumference */

    /* RGB Values for Opacity */
    --current-bg-rgb: 245, 247, 246; /* Background RGB for transparency */
}

/* =================================================================
   Dark Mode Implementation
   ================================================================= */

/*
   DISABLED: System dark mode preference causes contrast issues because
   text colors change to light (for dark backgrounds) but component
   backgrounds remain white/light. This creates light text on light
   backgrounds with poor contrast.

   TODO: To properly implement dark mode, ensure all component backgrounds
   also switch to dark colors, not just text colors.
*/

/*
@media (prefers-color-scheme: dark) {
    :root {
        --bg-primary: var(--dark-bg-primary);
        --bg-secondary: var(--dark-bg-secondary);
        --bg-tertiary: var(--dark-bg-tertiary);
        --bg-accent: var(--dark-bg-accent);

        --text-primary: var(--dark-text-primary);
        --text-secondary: var(--dark-text-secondary);
        --text-muted: var(--dark-text-muted);
        --text-inverse: var(--dark-text-inverse);

        --border-color: var(--dark-border-color);
        --border-color-light: var(--dark-border-color-light);
        --border-color-dark: var(--dark-border-color-dark);

        --accent-primary: var(--dark-accent-primary);
        --accent-secondary: var(--dark-accent-secondary);
        --accent-hover: var(--dark-accent-hover);
        --accent-active: var(--dark-accent-active);
    }
}
*/

/* Forced Light Mode Class */
.light-mode {
    --bg-primary: var(--brand-white) !important;
    --bg-secondary: var(--gray-400) !important;
    --bg-tertiary: var(--gray-300) !important;
    --bg-accent: var(--green-100) !important;
    --text-primary: var(--gray-900) !important;
    --text-secondary: var(--gray-700) !important;
    --text-muted: var(--gray-600) !important;
    --text-inverse: var(--brand-white) !important;
    --border-color: var(--gray-500) !important;
    --border-color-light: var(--gray-400);
    --border-color-dark: var(--gray-600);
    --accent-primary: var(--brand-forest-green) !important;
    --accent-secondary: var(--brand-dusty-rose) !important;
    --accent-hover: var(--green-600) !important;
    --accent-active: var(--green-700) !important;
}

/* Forced Dark Mode Class */
.dark-mode {
    --bg-primary: var(--dark-bg-primary) !important;
    --bg-secondary: var(--dark-bg-secondary) !important;
    --bg-tertiary: var(--dark-bg-tertiary) !important;
    --bg-accent: var(--dark-bg-accent) !important;
    --text-primary: var(--dark-text-primary) !important;
    --text-secondary: var(--dark-text-secondary) !important;
    --text-muted: var(--dark-text-muted) !important;
    --text-inverse: var(--dark-text-inverse) !important;
    --border-color: var(--dark-border-color) !important;
    --border-color-light: var(--dark-border-color-light) !important;
    --border-color-dark: var(--dark-border-color-dark) !important;
    --accent-primary: var(--dark-accent-primary) !important;
    --accent-secondary: var(--dark-accent-secondary) !important;
    --accent-hover: var(--dark-accent-hover) !important;
    --accent-active: var(--dark-accent-active) !important;
}