/* ============================================
   INSPIRE AGENCY — Design Tokens
   variables.css
   ============================================ */

:root {
  /* --- LIGHT MODE --- */
  --color-bg:             #ffffff;
  --color-bg-secondary:   #f5f5f7;
  --color-surface:        #fafafa;
  --color-border:         #d2d2d7;
  --color-text-primary:   #1d1d1f;
  --color-text-secondary: #6e6e73;
  --color-text-tertiary:  #a1a1a6;
  --color-accent:         #0a0a0a;
  --color-accent-hover:   #333333;

  /* --- DARK MODE OVERRIDES (applied via [data-theme="dark"]) --- */

  /* --- SPACING SCALE --- */
  --space-xs:   8px;
  --space-sm:   16px;
  --space-md:   32px;
  --space-lg:   64px;
  --space-xl:   96px;
  --space-2xl:  160px;

  /* --- TYPOGRAPHY --- */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-size-xs:   12px;
  --font-size-sm:   14px;
  --font-size-base: 17px;
  --font-size-md:   21px;
  --font-size-lg:   28px;
  --font-size-xl:   40px;
  --font-size-2xl:  56px;
  --font-size-3xl:  80px;
  --font-size-4xl:  96px;

  /* --- RADIUS --- */
  --radius-sm:  8px;
  --radius-md:  16px;
  --radius-lg:  24px;

  /* --- BORDERS --- */
  --border-thin: 1px solid var(--color-border);
  --border-rule: 1px solid var(--color-border);

  /* --- TRANSITIONS --- */
  --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast:  200ms;
  --duration-base:  400ms;
  --duration-slow:  700ms;

  /* --- NAV --- */
  --nav-height: 52px;
  --nav-bg-light: rgba(255, 255, 255, 0.72);
  --nav-bg-dark:  rgba(0, 0, 0, 0.72);

  /* --- CONTAINER --- */
  --container-max:   1200px;
  --container-pad:   var(--space-md);
}

[data-theme="dark"] {
  --color-bg:             #000000;
  --color-bg-secondary:   #111111;
  --color-surface:        #1c1c1e;
  --color-border:         #2c2c2e;
  --color-text-primary:   #f5f5f7;
  --color-text-secondary: #a1a1a6;
  --color-text-tertiary:  #636366;
  --color-accent:         #f5f5f7;
  --color-accent-hover:   #e0e0e0;
}

@media (max-width: 768px) {
  :root {
    --space-sm: 14px;
    --space-md: 20px;
    --space-lg: 36px;
    --space-xl: 56px;
    --space-2xl: 80px;
    --font-size-base: 16px;
    --font-size-md: 18px;
    --font-size-lg: 24px;
    --font-size-xl: 32px;
    --font-size-2xl: 40px;
    --nav-height: 48px;
    --container-pad: 20px;
  }
}

@media (max-width: 480px) {
  :root {
    --space-md: 18px;
    --space-lg: 28px;
    --space-xl: 44px;
    --space-2xl: 64px;
    --container-pad: 16px;
  }
}