/* Design Tokens - Wizora Brand System */

:root {
  /* ===== COLORS ===== */

  /* Brand Palette (V.1 - V.6) */
  --color-v1-beige: #F5EFE7;
  --color-v2-sky-blue: #4A9FDB;
  --color-v3-navy: #1E3A8A;
  --color-v4-yellow: #FFD966;
  --color-v5-coral: #FF7F50;
  --color-v6-teal: #004D4D;

  /* Semantic Colors */
  --color-background: #FFFFFF;
  --color-text-primary: #1a1a1a;
  --color-text-secondary: #666666;
  --color-text-light: #FFFFFF;

  /* ===== TYPOGRAPHY ===== */

  /* Font Families */
  --font-heading: 'Berkeley Mono', 'Courier New', monospace;
  --font-body: 'Instrument Sans', system-ui, -apple-system, sans-serif;

  /* Font Sizes - Desktop */
  --size-h1: 96px;
  --size-h2: 72px;
  --size-h3: 48px;
  --size-h4: 36px;
  --size-body: 24px;
  --size-small: 18px;
  --size-tiny: 14px;

  /* Line Heights */
  --line-height-tight: 1.2;
  --line-height-normal: 1.6;
  --line-height-relaxed: 1.8;

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

  /* ===== SPACING ===== */
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 40px;
  --spacing-xl: 56px;
  --spacing-2xl: 72px;
  --spacing-3xl: 96px;

  /* Section Padding */
  --section-padding-vertical: 80px;
  --section-padding-horizontal: 60px;

  /* ===== EFFECTS ===== */

  /* Glass Effect */
  --glass-bg: rgba(255, 255, 255, 0.15);
  --glass-bg-dark: rgba(0, 0, 0, 0.15);
  --glass-border: rgba(255, 255, 255, 0.2);
  --glass-blur: 20px;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.16);
  --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.1);

  /* ===== TRANSITIONS ===== */
  --transition-fast: 200ms ease;
  --transition-medium: 400ms ease;
  --transition-slow: 600ms ease;

  /* ===== LAYOUT ===== */
  --max-width: 1400px;
  --container-padding: var(--section-padding-horizontal);

  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* ===== GRADIENTS ===== */
  --gradient-hero: linear-gradient(135deg,
    #4A9FDB 0%,
    #FF7F50 25%,
    #FFD966 50%,
    #4A9FDB 75%,
    #004D4D 100%
  );

  --gradient-download: linear-gradient(135deg,
    #1E3A8A 0%,
    #004D4D 100%
  );

  --gradient-multi: linear-gradient(180deg,
    rgba(74, 159, 219, 0.8) 0%,
    rgba(255, 127, 80, 0.6) 25%,
    rgba(255, 217, 102, 0.6) 50%,
    rgba(74, 159, 219, 0.6) 75%,
    rgba(0, 77, 77, 0.8) 100%
  );
}

/* ===== RESPONSIVE BREAKPOINTS ===== */

/* Tablet (768px - 1023px) */
@media (max-width: 1023px) {
  :root {
    --size-h1: 72px;
    --size-h2: 56px;
    --size-h3: 40px;
    --size-body: 20px;
    --size-small: 16px;

    --section-padding-vertical: 80px;
    --section-padding-horizontal: 40px;
    --container-padding: 40px;
  }
}

/* Mobile (0 - 767px) */
@media (max-width: 767px) {
  :root {
    --size-h1: 48px;
    --size-h2: 36px;
    --size-h3: 28px;
    --size-h4: 24px;
    --size-body: 18px;
    --size-small: 16px;
    --size-tiny: 14px;

    --section-padding-vertical: 60px;
    --section-padding-horizontal: 20px;
    --container-padding: 20px;

    --spacing-lg: 32px;
    --spacing-xl: 48px;
    --spacing-2xl: 60px;
  }
}