/* ============================================
   CSS VARIABLES - Design Tokens
   Centralized color system and design tokens
   ============================================ */

   :root {
    /* ============================================
       1. BASE COLORS
       ============================================ */
    --bg: #ffffff;
    --card: #f5f5f5;
    --text: #000000;
    --muted: #575757;

  /* ============================================
     2. BRAND COLORS - Orange/Gold
     ============================================ */
  /* Primary Brand H&C Blue */
  --brand-blue: #1a43bf;
  /* Primary Brand Orange */
  --brand-orange: #ff7918;
  --brand-orange-light: #ff8c42;
  --brand-orange-lighter: #ff9a3c;
  --brand-orange-dark: #e66a0f;
  --brand-orange-darker: #fe6215;

    /* Brand Gold (Premium) */
    --brand-gold: #fe6215;
    --brand-gold-light: rgba(251, 150, 34, 0.98);
    --brand-gold-solid: #fe6215;

    /* Legacy Brand Variables (for backward compatibility) */
    --brand: #cccccc;
    --brand-2: var(--brand-orange);
    --brand-soft: #fef3c7;

    /* ============================================
       3. DARK THEME COLORS
       ============================================ */
    --dark-base: #020617;
    --dark-alt: #00072c;
    --dark-elevated: #0a0f1f;
    --dark-soft: #0f172a;
    --dark-light: #1e293b;
    --dark-card: #111111;
    --dark-card-alt: #1A1A1A;

    /* Legacy Premium Dark (for backward compatibility) */
    --premium-dark: var(--dark-alt);
    --premium-dark-alt: var(--dark-elevated);

    /* ============================================
       4. TEXT COLORS
       ============================================ */
    --text-white: #ffffff;
    --text-light: #f9fafb;
    --text-muted: rgba(255, 255, 255, 0.8);
    --text-soft: rgba(255, 255, 255, 0.6);
    --text-secondary: rgba(255, 255, 255, 0.8);

    /* Legacy Premium Text (for backward compatibility) */
    --premium-text-primary: var(--text-white);
    --premium-text-secondary: var(--text-muted);
    --premium-text-light: var(--text-soft);

    /* ============================================
       5. GRADIENTS
       ============================================ */
    /* Orange Gradients */
    --gradient-orange: linear-gradient(135deg, var(--brand-orange), var(--brand-orange-light));
    --gradient-orange-reverse: linear-gradient(135deg, var(--brand-orange-light), var(--brand-orange));
    --gradient-orange-horizontal: linear-gradient(90deg, var(--brand-orange), var(--brand-orange-light));
    --gradient-orange-vertical: linear-gradient(to bottom, var(--brand-orange-light), var(--brand-orange));

    /* Gold Gradients */
    --gradient-gold: linear-gradient(to bottom, var(--brand-gold-light), var(--brand-gold));
    --gradient-gold-reverse: linear-gradient(to bottom, var(--brand-gold), var(--brand-gold-light));

  /* Dark Background Gradients */
  --bg-gradient-dark: radial-gradient(circle at top left, rgba(45, 122, 255, 0.18), transparent 60%),
                       radial-gradient(circle at bottom right, rgba(10, 32, 233, 0.18), transparent 65%),
                       linear-gradient(to bottom, var(--dark-base), var(--dark-base) 30%, var(--dark-base) 100%);

  /* H&C BLUE-BRAND FOR PREMIUM SERVICES --VERSION B-- */
  --bg-premium-services: radial-gradient(circle at top left, var(--brand-blue), transparent 60%),
  radial-gradient(circle at bottom right, var(--brand-blue), transparent 65%),
  linear-gradient(to bottom, var(--brand-blue), var(--brand-blue) 30%, var(--brand-blue) 100%)
  /* ============================================
     6. BORDERS
     ============================================ */
  --stroke: #cccccc;
  --stroke-strong: #d1d5db;
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-strong: rgba(255, 121, 24, 0.3);

    /* Legacy Premium Border (for backward compatibility) */
    --premium-border: var(--border-subtle);
    --premium-border-strong: var(--border-strong);

    /* ============================================
       7. SHADOWS
       ============================================ */
    --shadow-soft: 0 10px 40px rgba(15, 23, 42, 0.08);
    --shadow-strong: 0 20px 70px rgba(15, 23, 42, 0.18);
    --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 16px 64px rgba(0, 0, 0, 0.4);
    --shadow-glow: 0 0 40px rgba(255, 121, 24, 0.3);

    /* Legacy Premium Shadows (for backward compatibility) */
    --premium-shadow-sm: var(--shadow-sm);
    --premium-shadow-md: var(--shadow-md);
    --premium-shadow-lg: var(--shadow-lg);
    --premium-shadow-glow: var(--shadow-glow);

    /* ============================================
       8. SPACING & SIZING
       ============================================ */
    --radius: 18px;
    --radius-lg: 18px;
    --radius-md: 14px;
    --radius-sm: 12px;
    --radius-xl: 24px;
    --radius-pill: 999px;
    --maxw: 1200px;

    /* ============================================
       9. TRANSITIONS
       ============================================ */
    --transition-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --transition-fast: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);

    /* Legacy Premium Transitions (for backward compatibility) */
    --premium-transition: var(--transition-base);
    --premium-transition-slow: var(--transition-slow);

    /* ============================================
       10. ABOUT PAGE COLORS
       ============================================ */
    --about-bg-body: #ffffff;
    --about-bg-elevated: #0c1016;
    --about-bg-elevated-alt: #101722;
    --about-border-subtle: rgba(255, 255, 255, 0.06);
    --about-accent: #f6c453;
    --about-accent-soft: rgba(246, 196, 83, 0.12);
    --about-accent-strong: #f0a91c;
    --about-text-main: #f2f4f7;
    --about-text-muted: #9ea4b3;
    --about-text-soft: #7e8491;
    --about-radius-lg: 18px;
    --about-radius-xl: 24px;
    --about-radius-pill: 999px;
    --about-shadow-soft: 0 22px 40px rgba(0, 0, 0, 0.55);
    --about-font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --about-container-width: 1120px;

    /* ============================================
       11. SHOWROOM PAGE COLORS
     ============================================ */
    --showroom-primary: var(--brand-blue);
    --showroom-primary-dark: var(--brand-blue);
    --showroom-primary-light: var(--brand-blue);
    --showroom-dark: var(--dark-base);
    --showroom-dark-alt: var(--dark-soft);
    --showroom-dark-light: var(--dark-light);
    --showroom-text: var(--text-white);
    --showroom-text-secondary: var(--text-muted);
    --showroom-text-light: var(--text-soft);
    --showroom-border: var(--border-subtle);
    --showroom-shadow-sm: var(--shadow-sm);
    --showroom-shadow-md: var(--shadow-md);
    --showroom-shadow-lg: var(--shadow-lg);
    --showroom-shadow-glow: var(--shadow-glow);
    --showroom-transition: var(--transition-base);
    --showroom-transition-fast: var(--transition-fast);
  }