/* ═══════════════════════════════════════════════════
   IRAWO STAR — DESIGN TOKENS
═══════════════════════════════════════════════════ */
:root {
  /* Brand colours */
  --c-primary:      #1565C0;
  --c-primary-dim:  rgba(21, 101, 192, 0.12);
  --c-dark-blue:    #1D2F8A;
  --c-silver:       #5a6475;
  --c-dark-silver:  #6b7280;
  --c-accent:       #E31B23;
  --c-white:        #0d0d0d;

  /* Backgrounds */
  --c-bg:           #F9F9F9;
  --c-bg-2:         #F0F0F2;
  --c-bg-3:         #EAEAF4;

  /* Glass */
  --c-glass-bg:     rgba(0, 0, 0, 0.03);
  --c-glass-border: rgba(0, 0, 0, 0.08);
  --c-glass-hover:  rgba(0, 0, 0, 0.05);

  /* Text */
  --c-text:         rgba(13, 13, 13, 0.88);
  --c-text-dim:     rgba(13, 13, 13, 0.55);
  --c-text-muted:   rgba(13, 13, 13, 0.35);

  /* Typography */
  --font-body:      'Space Grotesk', system-ui, sans-serif;
  --font-display:   'Space Grotesk', system-ui, sans-serif;

  /* Type scale */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  2rem;
  --text-4xl:  2.75rem;
  --text-5xl:  3.75rem;
  --text-6xl:  5rem;
  --text-7xl:  6.5rem;

  /* Spacing scale */
  --sp-1:   0.25rem;
  --sp-2:   0.5rem;
  --sp-3:   0.75rem;
  --sp-4:   1rem;
  --sp-6:   1.5rem;
  --sp-8:   2rem;
  --sp-12:  3rem;
  --sp-16:  4rem;
  --sp-24:  6rem;
  --sp-32:  8rem;
  --sp-48: 12rem;

  /* Border radius */
  --r-sm:   6px;
  --r-md:   12px;
  --r-lg:   20px;
  --r-xl:   32px;
  --r-full: 9999px;

  /* Shadows */
  --shadow-glow:    0 0 40px rgba(21, 101, 192, 0.15);
  --shadow-glow-sm: 0 0 20px rgba(21, 101, 192, 0.10);
  --shadow-card:    0 8px 32px rgba(0, 0, 0, 0.10);
  --shadow-deep:    0 24px 64px rgba(0, 0, 0, 0.15);

  /* Transitions */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:   cubic-bezier(0.4, 0, 1, 1);
  --ease-io:   cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:  0.2s;
  --dur-base:  0.4s;
  --dur-slow:  0.8s;

  /* Layout */
  --container:    1280px;
  --nav-h:        80px;
  --section-py:   var(--sp-32);
}

@media (max-width: 1024px) {
  :root {
    --text-7xl: 5rem;
    --text-6xl: 4rem;
    --text-5xl: 3rem;
    --section-py: var(--sp-24);
  }
}

@media (max-width: 768px) {
  :root {
    --text-7xl: 3.5rem;
    --text-6xl: 3rem;
    --text-5xl: 2.5rem;
    --text-4xl: 2rem;
    --section-py: var(--sp-16);
    --nav-h: 64px;
  }
}