/* ============================================================
   KAMSOFT Design System — CSS Tokens
   Extracted from kamsoft.pl · June 2026
   ============================================================ */

@import url('../fonts/montserrat.css');

:root {
  /* ── Color: Brand ── */
  --color-brand:           #1d8bd0;
  --color-brand-dark:      #002855;
  --color-primary-100:     #e8f1fb;
  --color-primary-200:     #b3cef0;
  --color-primary-300:     #7eabe5;
  --color-primary-400:     #4988da;
  --color-primary-500:     #2b6cb0;   /* palette1 – CTA buttons */
  --color-primary-600:     #215387;   /* palette2 – hover states */
  --color-primary-700:     #16437c;   /* palette3 – headings */
  --color-primary-800:     #002855;   /* brand-dark – deep navy */
  --color-primary-900:     #001a3a;

  /* ── Color: Gray / Neutral ── */
  --color-gray-50:         #f7f9fc;
  --color-gray-100:        #edf1f7;
  --color-gray-200:        #e2e8f0;
  --color-gray-300:        #cbd5e0;   /* global-gray-400 */
  --color-gray-400:        #a0aec0;   /* global-gray-500 */
  --color-gray-500:        #718096;   /* palette6 */
  --color-gray-600:        #5a6b84;   /* body text */
  --color-gray-700:        #4a5568;   /* palette5 */
  --color-gray-800:        #2d3748;   /* palette4 */
  --color-gray-900:        #1a202c;

  /* ── Color: Semantic ── */
  --color-success:         #13612e;
  --color-success-light:   #d4edda;
  --color-error:           #b82105;
  --color-error-light:     #fde8e3;
  --color-warning:         #f7630c;
  --color-warning-light:   #fdebd8;
  --color-amber:           #f5a524;
  --color-amber-light:     #fef3d8;

  /* ── Color: Surface ── */
  --color-bg:              #ffffff;
  --color-bg-subtle:       #f7f9fc;
  --color-bg-muted:        #edf1f7;
  --color-surface:         #ffffff;
  --color-surface-raised:  #ffffff;
  --color-footer-bg:       #0a0a0a;

  /* ── Color: Text ── */
  --color-text:            #5a6b84;
  --color-text-strong:     #2d3748;
  --color-text-muted:      #6b7b95;
  --color-text-inverse:    #ffffff;
  --color-text-heading:    #16437c;
  --color-text-link:       #2b6cb0;
  --color-text-link-hover: #215387;

  /* ── Color: Border ── */
  --color-border:          rgba(0, 40, 85, 0.15);
  --color-border-strong:   rgba(0, 40, 85, 0.30);
  --color-border-focus:    #2b6cb0;

  /* ── Typography: Family ── */
  --font-family-base:      'Montserrat', sans-serif;
  --font-family-heading:   'Montserrat', sans-serif;
  --font-family-mono:      'Courier New', monospace;

  /* ── Typography: Size (fluid) ── */
  --font-size-xs:          clamp(0.75rem,  0.68rem + 0.217vw, 0.813rem);
  --font-size-sm:          clamp(0.8rem,   0.73rem  + 0.217vw, 0.9rem);
  --font-size-base:        0.9375rem;   /* 15px */
  --font-size-md:          clamp(1.1rem,  0.995rem  + 0.326vw, 1.25rem);
  --font-size-lg:          clamp(1.25rem, 1.15rem   + 0.326vw, 1.5rem);
  --font-size-xl:          clamp(1.75rem, 1.576rem  + 0.543vw, 2rem);
  --font-size-2xl:         clamp(2rem,    1.6rem    + 1vw,     2.5rem);
  --font-size-3xl:         clamp(2.25rem, 1.728rem  + 1.63vw,  3rem);
  --font-size-4xl:         clamp(2.5rem,  1.456rem  + 3.26vw,  4rem);
  --font-size-hero:        clamp(2.75rem, 0.489rem  + 7.065vw, 6rem);

  /* ── Typography: Weight ── */
  --font-weight-normal:    400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;

  /* ── Typography: Line Height ── */
  --line-height-tight:     1.2;
  --line-height-snug:      1.35;
  --line-height-base:      1.6;
  --line-height-relaxed:   1.75;

  /* ── Typography: Letter Spacing ── */
  --letter-spacing-tight:  -0.01em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide:   0.05em;
  --letter-spacing-wider:  0.1em;
  --letter-spacing-caps:   0.12em;

  /* ── Spacing ── */
  --space-1:    0.25rem;   /*  4px */
  --space-2:    0.5rem;    /*  8px */
  --space-3:    0.75rem;   /* 12px */
  --space-4:    1rem;      /* 16px */
  --space-5:    1.25rem;   /* 20px */
  --space-6:    1.5rem;    /* 24px */
  --space-8:    2rem;      /* 32px */
  --space-10:   2.5rem;    /* 40px */
  --space-12:   3rem;      /* 48px */
  --space-14:   3.5rem;    /* 56px */
  --space-16:   4rem;      /* 64px */
  --space-20:   5rem;      /* 80px */
  --space-24:   6rem;      /* 96px */

  /* ── Border Radius ── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ── Shadow ── */
  --shadow-xs:  0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-sm:  0 2px 6px rgba(0, 0, 0, 0.10);
  --shadow-md:  0 8px 22px rgba(0, 0, 0, 0.15);
  --shadow-lg:  0 16px 40px rgba(0, 0, 0, 0.18);
  --shadow-xl:  0 24px 60px rgba(0, 0, 0, 0.22);

  /* ── Layout ── */
  --layout-content-width:  1290px;
  --layout-wide-width:     1520px;
  --layout-narrow-width:   842px;
  --layout-edge-padding:   1.5rem;

  /* ── Motion ── */
  --duration-fast:    120ms;
  --duration-base:    200ms;
  --duration-slow:    350ms;
  --ease-default:     cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:          cubic-bezier(0.4, 0, 1, 1);
  --ease-out:         cubic-bezier(0, 0, 0.2, 1);

  /* ── Z-Index ── */
  --z-below:   -1;
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
}

/* ── Dark mode ── */
html[data-theme="dark"] {
  --color-primary-100:     #132a45;
  --color-primary-200:     #1a3a5c;
  --color-primary-300:     #2a5580;
  --color-primary-400:     #3d72a8;
  --color-primary-500:     #4d8fd4;
  --color-primary-600:     #6aa3de;
  --color-primary-700:     #8bb8e8;
  --color-primary-800:     #0a1e38;
  --color-primary-900:     #060f1c;

  --color-gray-50:         #121820;
  --color-gray-100:        #1a2332;
  --color-gray-200:        #243044;
  --color-gray-300:        #334155;
  --color-gray-400:        #64748b;
  --color-gray-500:        #94a3b8;
  --color-gray-600:        #b8c5d6;
  --color-gray-700:        #cbd5e1;
  --color-gray-800:        #e2e8f0;
  --color-gray-900:        #f1f5f9;

  --color-success-light:   #142e1f;
  --color-error-light:     #2e1410;
  --color-warning-light:   #2e1a08;
  --color-amber-light:     #2e2410;

  --color-bg:              #0d1117;
  --color-bg-subtle:       #121820;
  --color-bg-muted:        #1a2332;
  --color-surface:         #161d27;
  --color-surface-raised:  #1e2736;
  --color-footer-bg:       #060a10;

  --color-text:            #a8b5c9;
  --color-text-strong:     #e2e8f0;
  --color-text-muted:      #7a8ba3;
  --color-text-heading:    #b3cef0;
  --color-text-link:       #7eabe5;
  --color-text-link-hover: #b3cef0;

  --color-border:          rgba(255, 255, 255, 0.10);
  --color-border-strong:   rgba(255, 255, 255, 0.18);
  --color-border-focus:    #4d8fd4;

  --shadow-xs:  0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-sm:  0 2px 6px rgba(0, 0, 0, 0.40);
  --shadow-md:  0 8px 22px rgba(0, 0, 0, 0.50);
  --shadow-lg:  0 16px 40px rgba(0, 0, 0, 0.55);
  --shadow-xl:  0 24px 60px rgba(0, 0, 0, 0.60);

  color-scheme: dark;
}

html[data-theme="light"] {
  color-scheme: light;
}