/* ============================================================
   Słoneczne Osiedla — Design System
   CSS Custom Properties — Material Design 3 token set
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&family=Open+Sans:wght@400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap');

:root {
	/* ── Primary palette ── */
	--so-primary:                  #134235;
	--so-on-primary:               #ffffff;
	--so-primary-container:        #2d5a4c;
	--so-on-primary-container:     #a0cfbe;
	--so-primary-fixed:            #bcedda;
	--so-primary-fixed-dim:        #a1d1bf;
	--so-on-primary-fixed:         #002118;
	--so-on-primary-fixed-variant: #214f41;
	--so-inverse-primary:          #a1d1bf;

	/* ── Secondary palette ── */
	--so-secondary:                #7d562d;
	--so-on-secondary:             #ffffff;
	--so-secondary-container:      #ffca98;
	--so-on-secondary-container:   #7a532a;
	--so-secondary-fixed:          #ffdcbd;
	--so-secondary-fixed-dim:      #f0bd8b;

	/* ── Tertiary palette ── */
	--so-tertiary:                 #393b38;
	--so-on-tertiary:              #ffffff;
	--so-tertiary-container:       #50524f;
	--so-on-tertiary-container:    #c5c5c1;
	--so-tertiary-fixed:           #e2e3de;
	--so-tertiary-fixed-dim:       #c6c7c2;

	/* ── Surface ── */
	--so-background:               #fbf9f8;
	--so-on-background:            #1b1c1c;
	--so-surface:                  #fbf9f8;
	--so-on-surface:               #1b1c1c;
	--so-surface-variant:          #e4e2e2;
	--so-on-surface-variant:       #404945;
	--so-surface-dim:              #dbd9d9;
	--so-surface-bright:           #fbf9f8;
	--so-surface-container-lowest: #ffffff;
	--so-surface-container-low:    #f5f3f3;
	--so-surface-container:        #efeded;
	--so-surface-container-high:   #eae8e7;
	--so-surface-container-highest:#e4e2e2;

	/* ── Inverse ── */
	--so-inverse-surface:          #303030;
	--so-inverse-on-surface:       #f2f0f0;

	/* ── Outline ── */
	--so-outline:                  #717975;
	--so-outline-variant:          #c0c8c3;

	/* ── Error ── */
	--so-error:                    #ba1a1a;
	--so-on-error:                 #ffffff;
	--so-error-container:          #ffdad6;
	--so-on-error-container:       #93000a;

	/* ── Typography ── */
	--so-font-heading:   'Montserrat', sans-serif;
	--so-font-body:      'Open Sans', sans-serif;

	/* display-lg */
	--so-display-lg-size:        48px;
	--so-display-lg-line:        56px;
	--so-display-lg-tracking:    -0.02em;
	--so-display-lg-weight:      700;

	/* display-lg mobile */
	--so-display-lg-mobile-size:    32px;
	--so-display-lg-mobile-line:    40px;
	--so-display-lg-mobile-tracking:-0.01em;

	/* headline-md */
	--so-headline-md-size:       32px;
	--so-headline-md-line:       40px;
	--so-headline-md-weight:     600;

	/* headline-md mobile */
	--so-headline-md-mobile-size: 24px;
	--so-headline-md-mobile-line: 32px;

	/* title-lg */
	--so-title-lg-size:   20px;
	--so-title-lg-line:   28px;
	--so-title-lg-weight: 600;

	/* body-lg */
	--so-body-lg-size:   18px;
	--so-body-lg-line:   28px;
	--so-body-lg-weight: 400;

	/* body-md */
	--so-body-md-size:   16px;
	--so-body-md-line:   24px;
	--so-body-md-weight: 400;

	/* label-sm */
	--so-label-sm-size:     14px;
	--so-label-sm-line:     20px;
	--so-label-sm-tracking: 0.05em;
	--so-label-sm-weight:   600;

	/* ── Spacing ── */
	--so-base:             8px;
	--so-stack-sm:         12px;
	--so-stack-md:         24px;
	--so-stack-lg:         48px;
	--so-gutter:           24px;
	--so-margin-mobile:    16px;
	--so-margin-desktop:   48px;
	--so-container-max:    1280px;

	/* ── Radii ── */
	--so-radius:    4px;
	--so-radius-lg: 8px;
	--so-radius-xl: 12px;
	--so-radius-full: 9999px;

	/* ── Shadows ── */
	--so-shadow-card: 0 4px 20px rgba(74, 74, 74, 0.08);
	--so-shadow-md:   0 2px 8px rgba(0, 0, 0, 0.12);
}

/* ── Base reset / global styles ── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	background-color: var(--so-background);
	color: var(--so-on-background);
	font-family: var(--so-font-body);
	font-size: var(--so-body-md-size);
	line-height: var(--so-body-md-line);
	font-weight: var(--so-body-md-weight);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
	margin: 0;
	padding: 0;
}

a,
a:link,
a:visited,
a:hover,
a:focus,
a:active {
	text-decoration: none;
}
img { max-width: 100%; height: auto; }

/* ── GeneratePress reset — remove default GP wrappers ── */
.inside-header,
.generate-columns-container { all: unset; display: block; }

/* Keep GP's skip-to-content accessible */
.screen-reader-text {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0);
	white-space: nowrap; border: 0;
}
.screen-reader-text:focus {
	clip: auto; height: auto; margin: 0; overflow: visible;
	padding: 12px 24px; width: auto;
	top: 6px; left: 6px;
	background: var(--so-primary);
	color: var(--so-on-primary);
	font-size: 14px; font-weight: 600;
	z-index: 100000;
	border-radius: var(--so-radius-lg);
}

/* ── Material Symbols ── */
.material-symbols-outlined {
	font-family: 'Material Symbols Outlined', sans-serif;
	font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
	display: inline-block;
	vertical-align: middle;
	line-height: 1;
	user-select: none;
}

/* ── Container ── */
.so-container {
	max-width: var(--so-container-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--so-margin-mobile);
	padding-right: var(--so-margin-mobile);
}
@media (min-width: 768px) {
	.so-container {
		padding-left: var(--so-margin-desktop);
		padding-right: var(--so-margin-desktop);
	}
}