/* ==========================================================================
   Design Tokens - InLinea - Agencja Interaktywna
   Modern / Bold / Creative Agency
   Deep charcoal + vibrant orange accent + clean whites
   Typography: Inter (geometric sans) + Space Grotesk (display)
   Border-radius: 8-16px (modern, soft)
   ========================================================================== */

/* Google Fonts - Space Grotesk (display headings) + Inter (body) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  /* =======================================================================
     PALETA KOLOROW
     Deep charcoal + vibrant orange/coral.
     Czyste biale tla, ciemne karty, bold akcenty.
     Nowoczesna, odwazna, kreatywna agencja.
     ======================================================================= */

  /* Charcoal - deep dark base */
  --color-dark-900: #2b3661;         /* deepest - full dark bg */
  --color-dark-800: #1f2847;         /* dark sections */
  --color-dark-700: #243052;         /* card bg on dark */
  --color-dark-600: #344170;         /* elevated dark */
  --color-dark-500: #455280;         /* muted dark */
  --color-dark-400: #5a6a96;         /* lighter dark */
  --color-dark-300: #7888ac;         /* border on dark */
  --color-dark-200: #9aa8c6;         /* muted text */
  --color-dark-100: #c4cede;         /* subtle text */
  --color-dark-50: #e8ecf4;          /* lightest */

  /* Orange/Coral - vibrant accent */
  --color-accent-900: #7c2d12;
  --color-accent-800: #9a3412;
  --color-accent-700: #c2410c;
  --color-accent-600: #ea580c;
  --color-accent-500: #f97316;       /* main accent - CTA, highlights */
  --color-accent-400: #fb923c;
  --color-accent-300: #fdba74;
  --color-accent-200: #fed7aa;
  --color-accent-100: #ffedd5;
  --color-accent-50: #fff7ed;

  /* Clean whites and grays */
  --color-white: #ffffff;
  --color-gray-50: #fafafa;
  --color-gray-100: #f5f5f5;
  --color-gray-200: #e5e5e5;
  --color-gray-300: #d4d4d4;
  --color-gray-400: #a3a3a3;
  --color-gray-500: #737373;
  --color-gray-600: #525252;
  --color-gray-700: #404040;
  --color-gray-800: #262626;
  --color-gray-900: #171717;

  /* Text colors */
  --color-text-primary: #171717;
  --color-text-secondary: #525252;
  --color-text-muted: #737373;
  --color-text-inverse: #ffffff;
  --color-text-heading: #1f2847;
  --color-text-link: var(--color-accent-600);
  --color-text-link-hover: var(--color-accent-700);

  /* Background */
  --color-bg-primary: var(--color-white);
  --color-bg-secondary: var(--color-gray-50);
  --color-bg-dark: var(--color-dark-900);
  --color-bg-dark-elevated: var(--color-dark-700);
  --color-bg-card: var(--color-white);

  /* Overlay variants - composed from existing palette colors */
  --color-overlay-dark-strong: color-mix(in srgb, var(--color-dark-800) 92%, transparent);
  --color-overlay-dark-medium: color-mix(in srgb, var(--color-dark-800) 60%, transparent);
  --color-overlay-dark-soft: color-mix(in srgb, var(--color-dark-800) 40%, transparent);

  /* Borders */
  --color-border: #e5e5e5;
  --color-border-light: #f0f0f0;
  --color-border-dark: #d4d4d4;

  /* Buttons */
  --color-btn-primary-bg: var(--color-accent-500);
  --color-btn-primary-text: var(--color-white);
  --color-btn-primary-hover: var(--color-accent-600);

  --color-btn-dark-bg: var(--color-dark-900);
  --color-btn-dark-text: var(--color-white);
  --color-btn-dark-hover: var(--color-dark-800);

  /* Semantic colors */
  --color-success: #16a34a;
  --color-success-bg: #f0fdf4;
  --color-error: #dc2626;
  --color-error-bg: #fef2f2;

  /* Focus */
  --color-border-focus: var(--color-accent-500);
  --shadow-focus: 0 0 0 3px rgba(249, 115, 22, 0.3);

  /* Overlay utilities — semi-transparent, używane w header i hero */
  --color-nav-dark-bg: rgba(255, 255, 255, 0.1);
  --color-nav-dark-border: rgba(255, 255, 255, 0.2);
  --color-hero-glow: rgba(249, 115, 22, 0.15);
  --color-hero-glow-soft: rgba(249, 115, 22, 0.08);
  --color-overlay-dark-soft: rgba(43, 54, 97, 0.3);
  --color-overlay-dark-medium: rgba(43, 54, 97, 0.5);
  --color-overlay-dark-strong: rgba(43, 54, 97, 0.92);

  /* =======================================================================
     TYPOGRAFIA
     Space Grotesk - naglowki, display (geometric, bold)
     Inter - body, UI (neutral, readable)
     Rozmiar bazowy: 16px
     ======================================================================= */

  --font-family-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-heading: 'Space Grotesk', 'Inter', -apple-system, sans-serif;

  /* Font sizes */
  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-md: 1.125rem;   /* 18px */
  --font-size-lg: 1.25rem;    /* 20px */
  --font-size-xl: 1.5rem;     /* 24px */
  --font-size-2xl: 2rem;      /* 32px */
  --font-size-3xl: 2.5rem;    /* 40px */
  --font-size-4xl: 3rem;      /* 48px */
  --font-size-5xl: 3.75rem;   /* 60px */
  --font-size-6xl: 4.5rem;    /* 72px */

  /* Font weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Line heights */
  --line-height-tight: 1.1;
  --line-height-snug: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.7;

  /* Letter spacing */
  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.05em;
  --letter-spacing-wider: 0.1em;

  /* =======================================================================
     SPACING
     ======================================================================= */

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* =======================================================================
     BORDER-RADIUS - modern, soft
     ======================================================================= */

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  --radius-btn: 8px;
  --radius-card: 16px;
  --radius-input: 8px;

  /* =======================================================================
     BOX-SHADOW
     ======================================================================= */

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.10);
  --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.12);
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.06);
  --shadow-card-hover: 0 16px 40px rgba(0, 0, 0, 0.12);

  /* =======================================================================
     TRANSITIONS
     ======================================================================= */

  --transition-fast: 150ms ease;
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* =======================================================================
     LAYOUT
     ======================================================================= */

  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1200px;
  --container-max: 1400px;

  --z-dropdown: 50;
  --z-sticky: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-toast: 400;
}