/* ═══════════════════════════════════════════════════════════════
   say.work — Design Tokens
   All CSS custom properties in one place.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Primary (nawiązanie do x4) ─────────────────────────────── */
  --color-primary:        #1976D2;
  --color-primary-dark:   #1565C0;
  --color-primary-light:  #42A5F5;
  --color-primary-50:     #E3F2FD;
  --color-primary-100:    #BBDEFB;

  /* ── Accent ─────────────────────────────────────────────────── */
  --color-accent:         #3f64ff;
  --color-accent-light:   #6B8AFF;
  --color-accent-dark:    #2D4AD9;

  /* ── Neutrals ───────────────────────────────────────────────── */
  --color-text:           #1A1A2E;
  --color-text-secondary: #44546F;
  --color-text-muted:     #8993A4;
  --color-bg:             #FFFFFF;
  --color-bg-alt:         #F5F7FA;
  --color-bg-section:     #F0F4FF;
  --color-bg-dark:        #0F172A;
  --color-border:         #E6E9ED;
  --color-border-light:   #F0F2F5;

  /* ── Semantic ───────────────────────────────────────────────── */
  --color-success:        #2E7D32;
  --color-success-light:  #E8F5E9;
  --color-warning:        #F59E0B;
  --color-warning-light:  #FFF8E1;
  --color-error:          #EF4444;
  --color-error-light:    #FEF2F2;

  /* ── Gradients ──────────────────────────────────────────────── */
  --gradient-hero:        linear-gradient(135deg, #0F172A 0%, #1E293B 50%, #1976D2 100%);
  --gradient-primary:     linear-gradient(135deg, #1976D2 0%, #3f64ff 100%);
  --gradient-subtle:      linear-gradient(135deg, #F5F7FA 0%, #E8EDFA 100%);
  --gradient-card:        linear-gradient(180deg, #FFFFFF 0%, #F5F7FA 100%);
  --gradient-cta:         linear-gradient(135deg, #1976D2 0%, #3f64ff 50%, #42A5F5 100%);

  /* ── Typography ─────────────────────────────────────────────── */
  --font-family:          'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-size-hero:       clamp(2.5rem, 5vw, 3.75rem);
  --font-size-h1:         clamp(2rem, 4vw, 3rem);
  --font-size-h2:         clamp(1.5rem, 3vw, 2.25rem);
  --font-size-h3:         clamp(1.25rem, 2.5vw, 1.5rem);
  --font-size-h4:         clamp(1.1rem, 1.5vw, 1.25rem);
  --font-size-body:       clamp(1rem, 1.1vw, 1.0625rem);
  --font-size-body-lg:    clamp(1.0625rem, 1.3vw, 1.1875rem);
  --font-size-small:      clamp(0.8125rem, 0.9vw, 0.875rem);
  --font-size-xs:         0.75rem;

  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --font-weight-extrabold:800;

  --line-height-tight:    1.2;
  --line-height-normal:   1.6;
  --line-height-relaxed:  1.8;

  /* ── Spacing ────────────────────────────────────────────────── */
  --spacing-2xs:  0.25rem;   /*  4px */
  --spacing-xs:   0.5rem;    /*  8px */
  --spacing-sm:   1rem;      /* 16px */
  --spacing-md:   1.5rem;    /* 24px */
  --spacing-lg:   2rem;      /* 32px */
  --spacing-xl:   3rem;      /* 48px */
  --spacing-2xl:  4rem;      /* 64px */
  --spacing-3xl:  6rem;      /* 96px */
  --spacing-4xl:  8rem;      /* 128px */

  /* ── Layout ─────────────────────────────────────────────────── */
  --max-width:          1200px;
  --max-width-narrow:   800px;
  --max-width-wide:     1400px;
  --nav-height:         72px;

  /* ── Borders & Radius ───────────────────────────────────────── */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* ── Shadows ────────────────────────────────────────────────── */
  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg:   0 8px 30px rgba(0, 0, 0, 0.1);
  --shadow-xl:   0 16px 48px rgba(0, 0, 0, 0.12);
  --shadow-glow: 0 0 40px rgba(25, 118, 210, 0.15);

  /* ── Transitions ────────────────────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ═══════════════════════════════════════════════════════════════
   Dark Mode
   ═══════════════════════════════════════════════════════════════ */

[data-theme="dark"] {
  --color-text:           #E2E8F0;
  --color-text-secondary: #94A3B8;
  --color-text-muted:     #64748B;
  --color-bg:             #0F172A;
  --color-bg-alt:         #1E293B;
  --color-bg-section:     #162036;
  --color-bg-dark:        #020617;
  --color-border:         #1E293B;
  --color-border-light:   #253449;

  --color-primary-50:     #172554;
  --color-primary-100:    #1E3A5F;

  --gradient-hero:        linear-gradient(135deg, #020617 0%, #0F172A 50%, #1565C0 100%);
  --gradient-card:        linear-gradient(180deg, #1E293B 0%, #162036 100%);
  --gradient-subtle:      linear-gradient(135deg, #1E293B 0%, #162036 100%);

  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg:   0 8px 30px rgba(0, 0, 0, 0.5);
  --shadow-xl:   0 16px 48px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 40px rgba(25, 118, 210, 0.25);
}