/* 1URL.PL – tokeny designu (motyw jasny + ciemny) */
:root {
  color-scheme: light;

  /* Powierzchnie i tekst */
  --bg: #f8f9fc;
  --surface: #ffffff;
  --surface-2: #f1f3f9;
  --border: #e3e7f1;
  --text: #12162b;
  --text-muted: #5b6385;

  /* Marka */
  --primary: #4f46e5;
  --btn-bg: #4f46e5;
  --btn-bg-hover: #4338ca;
  --primary-soft: #eef0ff;
  --accent: #7c3aed;
  --brand-cyan: #0891b2;
  --grad-brand: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  --grad-hero: radial-gradient(60% 50% at 20% 0%, rgba(79, 70, 229, .14), transparent 70%),
               radial-gradient(50% 45% at 90% 10%, rgba(124, 58, 237, .12), transparent 70%);

  /* Statusy */
  --success: #15803d;  --success-soft: #e8f7ee;
  --warning: #b45309;  --warning-soft: #fff4e0;
  --danger:  #c42020;  --danger-soft:  #fdecec;

  /* Pełne kolory przycisków (zawsze biały tekst, kontrast AA w obu motywach) */
  --danger-solid: #c42020; --success-solid: #15803d; --warning-solid: #b45309;

  /* Cienie / promienie */
  --shadow-sm: 0 1px 2px rgba(18, 22, 43, .06), 0 1px 3px rgba(18, 22, 43, .05);
  --shadow-md: 0 4px 12px rgba(18, 22, 43, .07), 0 2px 4px rgba(18, 22, 43, .05);
  --shadow-lg: 0 18px 40px rgba(46, 38, 140, .14), 0 4px 10px rgba(18, 22, 43, .06);
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-full: 999px;

  /* Odstępy (skala 4 px) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px;

  /* Typografia */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-sm: .875rem; --fs-base: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.25rem;
  --fs-2xl: clamp(1.5rem, 1.2rem + 1.2vw, 1.75rem);
  --fs-3xl: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
  --fs-4xl: clamp(2.25rem, 1.5rem + 3.6vw, 3.5rem);

  --header-h: 68px;
  --container: 1180px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0b0e1a;
  --surface: #131830;
  --surface-2: #1a2040;
  --border: #262d52;
  --text: #eef0fb;
  --text-muted: #98a0c9;

  --primary: #818cf8;
  --btn-bg: #5558e8;
  --btn-bg-hover: #4a4dd6;
  --primary-soft: #1e2350;
  --accent: #a78bfa;
  --brand-cyan: #22d3ee;
  --grad-brand: linear-gradient(135deg, #5558e8 0%, #7c3aed 100%);
  --grad-hero: radial-gradient(60% 50% at 20% 0%, rgba(99, 102, 241, .25), transparent 70%),
               radial-gradient(50% 45% at 90% 10%, rgba(167, 139, 250, .18), transparent 70%);

  --success: #4ade80;  --success-soft: #12301f;
  --warning: #fbbf24;  --warning-soft: #33270c;
  --danger:  #f87171;  --danger-soft:  #3a1618;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, .45);
  --shadow-lg: 0 20px 48px rgba(0, 0, 0, .55);
}

/* Zgodnie z systemem, gdy użytkownik nie wybrał motywu ręcznie */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    color-scheme: dark;

    --bg: #0b0e1a;
    --surface: #131830;
    --surface-2: #1a2040;
    --border: #262d52;
    --text: #eef0fb;
    --text-muted: #98a0c9;

    --primary: #818cf8;
    --btn-bg: #5558e8;
    --btn-bg-hover: #4a4dd6;
    --primary-soft: #1e2350;
    --accent: #a78bfa;
    --brand-cyan: #22d3ee;
    --grad-brand: linear-gradient(135deg, #5558e8 0%, #7c3aed 100%);
    --grad-hero: radial-gradient(60% 50% at 20% 0%, rgba(99, 102, 241, .25), transparent 70%),
                 radial-gradient(50% 45% at 90% 10%, rgba(167, 139, 250, .18), transparent 70%);

    --success: #4ade80;  --success-soft: #12301f;
    --warning: #fbbf24;  --warning-soft: #33270c;
    --danger:  #f87171;  --danger-soft:  #3a1618;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 6px 16px rgba(0, 0, 0, .45);
    --shadow-lg: 0 20px 48px rgba(0, 0, 0, .55);
  }
}