/**
 * META
 * @file: code/styles/host/global-styles.css
 * @role: style
 * @does: Globalne style CSS i CSS Variables (Design Tokens z Figmy) dla strony hostującej
 * @depends_on: Google Fonts (Figtree)
 * @used_by: widget-container.html
 * @api: brak
 * @notes: Style dla strony głównej (poza Shadow DOM). Wersja Shadow DOM: styles/shadow/global-styles.js
 */

/* ============================================
   Global Styles - Medfile WordPress Plugin
   Based on Figma Design System
   ============================================ */

/* ============================================
   CSS Variables (Design Tokens)
   ============================================ */

:host {
  /* Colors */
  --color-primary: #8ce1ff;
  /* Przewodni */
  --color-primary-15: #8ce1ff;
  /* Przewodni 15% */
  --color-secondary: #3b3f73;
  /* Uzupełniający */
  --color-link: #1aa0cf;
  /* Linki */
  --color-white: #ffffff;
  /* Biały */
  --color-neutral-10: #ffffff;
  /* Neutral/10 */

  /* Typography - Font Family */
  --font-family:
    'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
    sans-serif;

  /* Typography - H1 */
  --font-h1-size: 32px;
  --font-h1-weight-regular: 400;
  --font-h1-weight-bold: 600;
  --font-h1-line-height: 1.2;
  --font-h1-letter-spacing: 0;

  /* Typography - H2 */
  --font-h2-size: 29px;
  --font-h2-weight-regular: 400;
  --font-h2-weight-bold: 600;
  --font-h2-line-height: 1.2;
  --font-h2-letter-spacing: 0;

  /* Typography - H3 */
  --font-h3-size: 26px;
  --font-h3-weight-regular: 400;
  --font-h3-weight-bold: 600;
  --font-h3-line-height: 1.2;
  --font-h3-letter-spacing: 0;

  /* Typography - H4 */
  --font-h4-size: 23px;
  --font-h4-weight-regular: 400;
  --font-h4-weight-bold: 600;
  --font-h4-line-height: 1.2;
  --font-h4-letter-spacing: 0;

  /* Typography - H5 */
  --font-h5-size: 20px;
  --font-h5-weight-regular: 400;
  --font-h5-weight-bold: 600;
  --font-h5-line-height: 1.2;
  --font-h5-letter-spacing: 0;

  /* Typography - H6 */
  --font-h6-size: 18px;
  --font-h6-weight-regular: 400;
  --font-h6-weight-bold: 600;
  --font-h6-line-height: 1.2;
  --font-h6-letter-spacing: 0;

  /* Typography - Body */
  --font-body-size: 16px;
  --font-body-weight-regular: 400;
  --font-body-weight-bold: 600;
  --font-body-line-height-regular: 1.4;
  --font-body-line-height-bold: 1.2;
  --font-body-letter-spacing: 0;

  /* Typography - Podpis (Caption) */
  --font-podpis-size: 12px;
  --font-podpis-weight-regular: 400;
  --font-podpis-weight-bold: 600;
  --font-podpis-line-height: 1.3;
  --font-podpis-letter-spacing: 0;
}

/* ============================================
   Base Styles
   ============================================ */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ============================================
   Typography Styles
   ============================================ */

/* H1 Styles */
h1,
.h1 {
  font-family: var(--font-family);
  font-size: var(--font-h1-size);
  font-weight: var(--font-h1-weight-regular);
  line-height: var(--font-h1-line-height);
  letter-spacing: var(--font-h1-letter-spacing);
  color: inherit;
}

h1 strong,
.h1-bold,
h1.bold {
  font-weight: var(--font-h1-weight-bold);
}

/* H2 Styles */
h2,
.h2 {
  font-family: var(--font-family);
  font-size: var(--font-h2-size);
  font-weight: var(--font-h2-weight-regular);
  line-height: var(--font-h2-line-height);
  letter-spacing: var(--font-h2-letter-spacing);
  color: inherit;
}

h2 strong,
.h2-bold,
h2.bold {
  font-weight: var(--font-h2-weight-bold);
}

/* H3 Styles */
h3,
.h3 {
  font-family: var(--font-family);
  font-size: var(--font-h3-size);
  font-weight: var(--font-h3-weight-regular);
  line-height: var(--font-h3-line-height);
  letter-spacing: var(--font-h3-letter-spacing);
  color: inherit;
}

h3 strong,
.h3-bold,
h3.bold {
  font-weight: var(--font-h3-weight-bold);
}

/* H4 Styles */
h4,
.h4 {
  font-family: var(--font-family);
  font-size: var(--font-h4-size);
  font-weight: var(--font-h4-weight-regular);
  line-height: var(--font-h4-line-height);
  letter-spacing: var(--font-h4-letter-spacing);
  color: inherit;
}

h4 strong,
.h4-bold,
h4.bold {
  font-weight: var(--font-h4-weight-bold);
}

/* H5 Styles */
h5,
.h5 {
  font-family: var(--font-family);
  font-size: var(--font-h5-size);
  font-weight: var(--font-h5-weight-regular);
  line-height: var(--font-h5-line-height);
  letter-spacing: var(--font-h5-letter-spacing);
  color: inherit;
}

h5 strong,
.h5-bold,
h5.bold {
  font-weight: var(--font-h5-weight-bold);
}

/* H6 Styles */
h6,
.h6 {
  font-family: var(--font-family);
  font-size: var(--font-h6-size);
  font-weight: var(--font-h6-weight-regular);
  line-height: var(--font-h6-line-height);
  letter-spacing: var(--font-h6-letter-spacing);
  color: inherit;
}

h6 strong,
.h6-bold,
h6.bold {
  font-weight: var(--font-h6-weight-bold);
}

/* Body Styles */
body,
p,
.body {
  font-family: var(--font-family);
  font-size: var(--font-body-size);
  font-weight: var(--font-body-weight-regular);
  line-height: var(--font-body-line-height-regular);
  letter-spacing: var(--font-body-letter-spacing);
  color: inherit;
}

body strong,
p strong,
.body-bold,
body.bold,
p.bold {
  font-weight: var(--font-body-weight-bold);
  line-height: var(--font-body-line-height-bold);
}

/* Podpis (Caption) Styles */
.podpis,
.caption {
  font-family: var(--font-family);
  font-size: var(--font-podpis-size);
  font-weight: var(--font-podpis-weight-regular);
  line-height: var(--font-podpis-line-height);
  letter-spacing: var(--font-podpis-letter-spacing);
  color: inherit;
}

.podpis strong,
.podpis-bold,
.caption-bold,
.podpis.bold,
.caption.bold {
  font-weight: var(--font-podpis-weight-bold);
}

/* ============================================
   Utility Classes
   ============================================ */

/* Color Utilities */
.text-primary {
  color: var(--color-primary);
}

.text-secondary {
  color: var(--color-secondary);
}

.text-link {
  color: var(--color-link);
}

.text-white {
  color: var(--color-white);
}

.bg-primary {
  background-color: var(--color-primary);
}

.bg-secondary {
  background-color: var(--color-secondary);
}

.bg-white {
  background-color: var(--color-white);
}

/* Link Styles */
a {
  color: var(--color-link);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

a:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ============================================
   Reset & Normalize (Shadow DOM specific)
   ============================================ */

/* Ensure consistent rendering in Shadow DOM */
:host {
  display: block;
  font-family: var(--font-family);
  color: inherit;
}

/* Prevent style leakage from parent page */
:host * {
  font-family: inherit;
}