/* ===================================
   SelectQR Design System Variables
   Dark Neomorphism Theme
   =================================== */

:root {
  /* ===== Color Palette ===== */
  /* Base backgrounds - extracted from dark icon aesthetic */
  --color-bg-base: #1a1a1a;          /* Main dark background */
  --color-bg-dark: #0f0f0f;          /* Darker sections/footer */
  --color-bg-light: #252525;         /* Lighter variant */
  --color-surface: #1e1e1e;          /* Cards and elevated surfaces */
  --color-surface-raised: #232323;   /* Raised elements */
  --color-surface-pressed: #181818;  /* Pressed/inset elements */

  /* Accent colors */
  --color-primary: #4a9eff;          /* Blue for primary actions/links */
  --color-primary-hover: #6bb0ff;    /* Hover state */
  --color-primary-active: #3a8eef;   /* Active state */
  --color-accent: #00d9ff;           /* Cyan highlight/accent */
  --color-accent-hover: #00f0ff;     /* Accent hover */

  /* Text colors */
  --color-text-primary: #e8e8e8;     /* Main text - high contrast */
  --color-text-secondary: #a0a0a0;   /* Secondary text */
  --color-text-muted: #707070;       /* Muted/disabled text */
  --color-text-inverse: #1a1a1a;     /* Text on light backgrounds */

  /* QR pattern colors (inspired by icon) */
  --color-qr-dark: #0a0a0a;          /* QR squares */
  --color-qr-medium: #2a2a2a;        /* QR background pattern */

  /* Semantic colors */
  --color-success: #00ff88;          /* Success states */
  --color-warning: #ffaa00;          /* Warning states */
  --color-error: #ff5555;            /* Error states */
  --color-info: #00d9ff;             /* Info states (uses accent) */

  /* ===== Neomorphic Shadows ===== */
  --shadow-light: rgba(255, 255, 255, 0.05);    /* Light highlight */
  --shadow-dark: rgba(0, 0, 0, 0.7);            /* Dark shadow */

  /* Raised/Convex - appears to lift from surface */
  --shadow-raised:
    6px 6px 12px var(--shadow-dark),
    -6px -6px 12px var(--shadow-light);

  --shadow-raised-hover:
    8px 8px 16px var(--shadow-dark),
    -8px -8px 16px var(--shadow-light);

  --shadow-raised-large:
    10px 10px 20px var(--shadow-dark),
    -10px -10px 20px var(--shadow-light);

  /* Pressed/Concave - appears to sink into surface */
  --shadow-pressed:
    inset 4px 4px 8px var(--shadow-dark),
    inset -4px -4px 8px var(--shadow-light);

  --shadow-pressed-deep:
    inset 6px 6px 12px var(--shadow-dark),
    inset -6px -6px 12px var(--shadow-light);

  /* Flat - subtle depth */
  --shadow-flat:
    3px 3px 6px var(--shadow-dark),
    -3px -3px 6px var(--shadow-light);

  /* Special shadows */
  --shadow-glow-primary: 0 0 20px rgba(74, 158, 255, 0.3);
  --shadow-glow-accent: 0 0 20px rgba(0, 217, 255, 0.3);

  /* ===== Border Highlights ===== */
  --border-highlight: 1px solid rgba(255, 255, 255, 0.08);
  --border-lowlight: 1px solid rgba(0, 0, 0, 0.4);
  --border-subtle: 1px solid rgba(255, 255, 255, 0.03);

  /* ===== Spacing Scale ===== */
  --space-xs: 0.5rem;      /* 8px */
  --space-sm: 1rem;        /* 16px */
  --space-md: 1.5rem;      /* 24px */
  --space-lg: 2.5rem;      /* 40px */
  --space-xl: 4rem;        /* 64px */
  --space-2xl: 6rem;       /* 96px */
  --space-3xl: 8rem;       /* 128px */

  /* Container */
  --container-max-width: 1200px;
  --container-padding: var(--space-md);

  /* ===== Border Radius ===== */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-full: 9999px;

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

  /* Font sizes - using fluid scaling */
  --font-size-xs: 0.75rem;        /* 12px */
  --font-size-sm: 0.875rem;       /* 14px */
  --font-size-base: 1rem;         /* 16px */
  --font-size-lg: 1.125rem;       /* 18px */
  --font-size-xl: 1.25rem;        /* 20px */
  --font-size-2xl: 1.5rem;        /* 24px */
  --font-size-3xl: 2rem;          /* 32px */
  --font-size-4xl: 2.5rem;        /* 40px */
  --font-size-5xl: 3rem;          /* 48px */
  --font-size-6xl: 4rem;          /* 64px */

  /* Fluid font sizes for headings (responsive) */
  --font-size-h1: clamp(2.5rem, 5vw + 1rem, 4rem);    /* 40-64px */
  --font-size-h2: clamp(2rem, 4vw + 1rem, 3rem);      /* 32-48px */
  --font-size-h3: clamp(1.5rem, 3vw + 0.5rem, 2rem);  /* 24-32px */
  --font-size-h4: clamp(1.25rem, 2vw + 0.5rem, 1.5rem); /* 20-24px */

  /* Font weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Line heights */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.6;
  --line-height-loose: 1.8;

  /* Letter spacing */
  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.02em;
  --letter-spacing-wider: 0.05em;

  /* ===== Transitions & Animations ===== */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;
  --transition-slower: 500ms ease;

  /* Easing curves */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* ===== Z-index Scale ===== */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-tooltip: 600;
  --z-skip-link: 1000;

  /* ===== Breakpoints (for reference in JS) ===== */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;

  /* ===== Miscellaneous ===== */
  --opacity-disabled: 0.6;
  --opacity-hover: 0.8;

  /* Blur effects */
  --blur-sm: 4px;
  --blur-md: 8px;
  --blur-lg: 16px;

  /* Max widths */
  --max-width-prose: 65ch;
  --max-width-screen-sm: 640px;
  --max-width-screen-md: 768px;
  --max-width-screen-lg: 1024px;
  --max-width-screen-xl: 1280px;
}

/* ===== Dark Mode Adjustments ===== */
/* Currently using dark theme by default */
/* Future: Add light theme variables under @media (prefers-color-scheme: light) */

/* ===== Accessibility - Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-base: 0ms;
    --transition-slow: 0ms;
    --transition-slower: 0ms;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===== Print Styles ===== */
@media print {
  :root {
    --color-bg-base: #ffffff;
    --color-bg-dark: #f5f5f5;
    --color-surface: #fafafa;
    --color-text-primary: #000000;
    --color-text-secondary: #333333;
  }
}