/**
 * Co.Lab 創思共享 - CSS Variables
 * Modern Consultative Design v2.0.0
 * Dark Mode with Co.Lab Brand Colors
 */

:root {
  /* ===== Co.Lab Brand Colors (Primary) ===== */
  --charcoal: #2B2B2B;           /* 霧黑 - Primary text, dark sections */
  --brick-orange: #D56A3E;       /* 磚紅橘 - Primary accent, CTAs */
  --champagne-gold: #D9B25F;     /* 香檳金 - Secondary accent, highlights */
  --blue-gray: #546E7A;          /* 藍灰色 - Wall color, environment base */

  /* ===== Dark Mode Neutrals ===== */
  --dark: #1A1A1A;               /* Background base */
  --dark-charcoal: #222222;      /* Section backgrounds */
  --light-gray: #B0B0B0;         /* Secondary text */
  --off-white: #F8F9FA;          /* Light sections (if any) */
  --white: #FFFFFF;              /* Pure white text */

  /* ===== Derived Colors ===== */
  --deep-orange: #C4582E;        /* Darker orange for gradients */
  --light-gold: #E5C580;         /* Lighter gold for gradients */

  /* ===== Legacy Color Aliases (for compatibility) ===== */
  --color-primary-text: var(--white);
  --color-secondary: var(--champagne-gold);
  --color-accent: var(--brick-orange);
  --color-white: var(--white);
  --color-off-white: var(--off-white);

  --text-primary: var(--white);
  --text-secondary: var(--light-gray);
  --text-tertiary: #888888;
  --text-inverse: var(--charcoal);

  --bg-primary: var(--dark);
  --bg-secondary: var(--dark-charcoal);
  --bg-tertiary: var(--charcoal);
  --bg-dark: var(--charcoal);

  /* ===== Glow Effects ===== */
  --glow-orange: 0 0 40px rgba(213, 106, 62, 0.4);
  --glow-gold: 0 0 40px rgba(217, 178, 95, 0.4);

  /* ===== Semantic Colors ===== */
  --color-success: #4CAF50;
  --color-warning: #FF9800;
  --color-error: #F44336;
  --color-info: #3498DB;

  /* ===== Border Colors (Dark Mode) ===== */
  --border-light: rgba(255, 255, 255, 0.1);
  --border-medium: rgba(255, 255, 255, 0.2);
  --border-dark: rgba(255, 255, 255, 0.3);

  /* ===== Spacing Scale (8px Grid) ===== */
  --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-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-30: 120px;
  --space-32: 128px;

  /* ===== Border Radius ===== */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-full: 9999px;   /* Pill radius */

  /* ===== Typography ===== */
  /* Modern Consultative Font Stack */
  --font-heading-en: 'Outfit', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-heading-tc: 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', system-ui, -apple-system, sans-serif;
  --font-body: 'Sora', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Legacy alias */
  --font-family: var(--font-body);
  --font-family-heading: var(--font-heading-en);

  /* Font Sizes - Mobile First */
  --font-h1: 2.625rem;    /* 42px - Hero title mobile */
  --font-h2: 2.25rem;     /* 36px - Section title mobile */
  --font-h3: 1.5rem;      /* 24px - Service title mobile */
  --font-h4: 1.125rem;    /* 18px */
  --font-body-large: 1.0625rem;  /* 17px */
  --font-body: 1rem;      /* 16px */
  --font-small: 0.9375rem; /* 15px */
  --font-caption: 0.75rem; /* 12px */
  --font-tiny: 0.6875rem;  /* 11px - Section tags */

  /* Font Weights */
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-black: 900;      /* For hero/section titles */

  /* Line Heights */
  --line-height-tight: 1.1;
  --line-height-normal: 1.3;
  --line-height-relaxed: 1.7;
  --line-height-loose: 1.8;

  /* Letter Spacing */
  --letter-spacing-tight: -2px;     /* Hero title */
  --letter-spacing-normal: -1px;    /* Section titles */
  --letter-spacing-wide: 1px;       /* Nav menu */
  --letter-spacing-wider: 2px;      /* Section tags */

  /* ===== Shadows (Dark Mode) ===== */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.6);

  /* ===== Transitions ===== */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
  --ease-smooth: cubic-bezier(0.68, -0.55, 0.265, 1.55);  /* Bouncy */

  /* ===== Z-Index Scale ===== */
  --z-base: 0;
  --z-dropdown: 10;
  --z-sticky: 50;
  --z-fixed: 90;
  --z-modal: 100;
  --z-tooltip: 110;
  --z-max: 9999;          /* For fixed overlays */

  /* ===== Container Widths ===== */
  --container-xs: 100%;
  --container-sm: 100%;
  --container-md: 720px;
  --container-lg: 960px;
  --container-xl: 1200px;
  --container-xxl: 1400px;  /* Modern consultative max-width */
}

/* ===== Desktop Font Sizes ===== */
@media (min-width: 768px) {
  :root {
    --font-h1: 4.5rem;        /* 72px - Hero title desktop */
    --font-h2: 3.25rem;       /* 52px - Section title desktop */
    --font-h3: 1.75rem;       /* 28px - Service title desktop */
    --font-h4: 1.25rem;       /* 20px */
    --font-body-large: 1.25rem;  /* 20px */
    --font-body: 1rem;        /* 16px */
    --font-small: 0.9375rem;  /* 15px */
    --font-tiny: 0.6875rem;   /* 11px */
  }
}

/* ===== Large Desktop ===== */
@media (min-width: 1024px) {
  :root {
    /* Maintain desktop sizes, add any 1024+ specific overrides here */
  }
}