/**
 * shared-design-tokens.css
 *
 * Hexagon Place Brand Design Tokens
 * Based on hexagonplace-app-next reference design system
 *
 * This file contains the core design tokens used across all Hexagon Place
 * web properties to maintain visual consistency.
 */

:root {
  /* ============================================
     Brand Accent Colors - Gray Theme
     ============================================ */
  --hp-accent-primary: #d4d4d4;           /* neutral-300 - primary brand color */
  --hp-accent-primary-hover: #e5e5e5;     /* neutral-200 - hover state */
  --hp-accent-primary-dark: #a3a3a3;      /* neutral-400 - pressed/active state */
  --hp-accent-primary-light: #f5f5f5;     /* neutral-100 - subtle highlights */
  --hp-accent-primary-glow: rgba(212, 212, 212, 0.6);  /* glow effects */

  /* ============================================
     Background Colors - Dark Theme
     ============================================ */
  --hp-bg-primary: #0a0a0a;               /* neutral-900 - main background */
  --hp-bg-secondary: #171717;             /* neutral-900 - secondary surfaces */
  --hp-bg-card: #1a1a1a;                  /* neutral-850 - card backgrounds */
  --hp-bg-elevated: #262626;              /* neutral-800 - elevated surfaces */

  /* ============================================
     Foreground/Text Colors
     ============================================ */
  --hp-fg-primary: #fafafa;               /* neutral-50 - primary text */
  --hp-fg-secondary: #e5e5e5;             /* neutral-200 - secondary text */
  --hp-fg-muted: #a3a3a3;                 /* neutral-400 - muted text */
  --hp-fg-disabled: #737373;              /* neutral-500 - disabled text */

  /* ============================================
     Border Colors
     ============================================ */
  --hp-border-light: #f5f5f5;             /* neutral-100 - light theme borders */
  --hp-border-dark: #262626;              /* neutral-800 - dark theme borders */
  --hp-border-subtle: rgba(255, 255, 255, 0.1);  /* subtle dark borders */

  /* ============================================
     Semantic Colors
     ============================================ */
  --hp-success: #22c55e;                  /* green-500 */
  --hp-success-bg: rgba(34, 197, 94, 0.1);

  --hp-warning: #f59e0b;                  /* amber-500 */
  --hp-warning-bg: rgba(245, 158, 11, 0.1);

  --hp-error: #ef4444;                    /* red-500 */
  --hp-error-bg: rgba(239, 68, 68, 0.1);

  --hp-info: #3b82f6;                     /* blue-500 */
  --hp-info-bg: rgba(59, 130, 246, 0.1);

  /* ============================================
     Gradients
     ============================================ */
  --hp-gradient-primary: linear-gradient(135deg, #d4d4d4 0%, #a3a3a3 100%);
  --hp-gradient-secondary: linear-gradient(135deg, #18181b 0%, #27272a 100%);
  --hp-gradient-hero: linear-gradient(135deg, #0a0a0a 0%, #171717 50%, #0a0a0a 100%);

  /* ============================================
     Effects & Shadows
     ============================================ */
  --hp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --hp-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --hp-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --hp-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);

  --hp-shadow-accent: 0 8px 24px rgba(212, 212, 212, 0.3);
  --hp-shadow-accent-lg: 0 12px 32px rgba(212, 212, 212, 0.4);

  /* ============================================
     Typography
     ============================================ */
  --hp-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                  Helvetica, Arial, sans-serif, 'Apple Color Emoji',
                  'Segoe UI Emoji', 'Segoe UI Symbol';
  --hp-font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono',
                  Consolas, 'Courier New', monospace;

  /* ============================================
     Spacing & Sizing (optional)
     ============================================ */
  --hp-radius-sm: 0.375rem;               /* 6px */
  --hp-radius-md: 0.5rem;                 /* 8px */
  --hp-radius-lg: 0.75rem;                /* 12px */
  --hp-radius-xl: 1rem;                   /* 16px */
  --hp-radius-full: 9999px;               /* fully rounded */

  /* ============================================
     Transitions
     ============================================ */
  --hp-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --hp-transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --hp-transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   Light Theme Overrides (Optional)
   ============================================ */
@media (prefers-color-scheme: light) {
  :root {
    --hp-bg-primary: #ffffff;
    --hp-bg-secondary: #fafafa;
    --hp-bg-card: #f5f5f5;
    --hp-bg-elevated: #e5e5e5;

    --hp-fg-primary: #171717;
    --hp-fg-secondary: #404040;
    --hp-fg-muted: #737373;
    --hp-fg-disabled: #a3a3a3;

    --hp-border-dark: var(--hp-border-light);
  }
}