/* variables.css — All CSS custom properties for DeployToMarket */

:root {
  /* Colors */
  --color-primary: #0097b2;
  --color-primary-dark: #007a94;
  --color-bg-black: #000000;
  --color-bg-dark: #0a0a0a;
  --color-bg-light: #f7f7f7;
  --color-text-white: #ffffff;
  --color-text-muted: #b0b0b0;
  --color-text-dark-heading: #111111;
  --color-text-dark-body: #444444;
  --color-text-disabled: #666666;
  --color-border-subtle: #1a1a1a;

  /* Typography */
  --font-heading: 'Plus Jakarta Sans', sans-serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Type Scale */
  --text-hero: clamp(48px, 6vw, 80px);
  --text-h1-page: clamp(40px, 5vw, 64px);
  --text-h2: clamp(32px, 4vw, 48px);
  --text-h3: 24px;
  --text-body-large: 20px;
  --text-body: 16px;
  --text-body-small: 14px;
  --text-label: 12px;
  --text-stat: clamp(40px, 5vw, 56px);

  /* Spacing Scale */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 32px;
  --space-lg: 64px;
  --space-xl: 120px;

  /* Section padding */
  --section-padding: var(--space-xl);

  /* Container */
  --container: 1200px;
  --container-padding: var(--space-md);
  --container-narrow: 720px;

  /* Component */
  --gap-card: 32px;
  --border-subtle: 1px solid var(--color-border-subtle);
  --border-teal: 1px solid var(--color-primary);
  --transition-base: 0.2s ease;

  /* Breakpoints (reference only, use in media queries):
   * mobile:  < 768px
   * tablet:  768px
   * desktop: 1024px
   * wide:    1440px
   */
}

@media (max-width: 1023px) {
  :root {
    --section-padding: 80px;
  }
}

@media (max-width: 767px) {
  :root {
    --section-padding: 60px;
    --container-padding: var(--space-sm);
  }
}