/*!
Theme Name: THE LOOM
Theme URI: https://theloom.gr
Author: THE LOOM
Author URI: https://theloom.gr
Description: Custom theme for σημείο στήριξης — Maritina Theodorou, Psychologist
Version: 3.0.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: the-loom
*/

/* =============================================================
   CSS CUSTOM PROPERTIES — Design Tokens (from Figma audit)
   All visual values live here. No hardcoded values elsewhere.
   ============================================================= */

:root {

	/* ── Colors ── */
	--color-primary:            #7a2723;
	--color-primary-hover:      #5e1e1b;
	--color-primary-overlay-85: rgba(122, 39, 35, 0.85);
	--color-primary-overlay-60: rgba(122, 39, 35, 0.6);
	--color-primary-overlay-30: rgba(122, 39, 35, 0.3);
	--color-cream-overlay-82:   rgba(255, 238, 189, 0.82);
	--color-cream:              #ffeebd;
	--color-white:              #ffffff;
	--color-text:               #0a0a0a;
	--color-text-dark:          #1e2939;
	--color-text-secondary:     #364153;
	--color-border:             #e5e7eb;
	--color-input-border:       #d1d5dc;
	--color-footer-divider:     rgba(246, 151, 136, 0.3);
	--color-footer-muted:       rgba(246, 151, 136, 0.8);
	--color-success:            #166534;
	--color-success-bg:         #f0fdf4;
	--color-success-border:     #bbf7d0;
	--color-error:              #991b1b;
	--color-error-bg:           #fef2f2;
	--color-error-border:       #fecaca;

	/* ── Font families ── */
	--font-primary: 'Manrope', sans-serif;

	/* ── Font sizes (fluid where appropriate) ── */
	--text-h1:    clamp(2.25rem, 5vw, 3.75rem);    /* 36 → 60px */
	--text-h2-lg: clamp(1.75rem, 3.5vw, 3rem);     /* 28 → 48px */
	--text-h2:    clamp(1.5rem, 2.8vw, 2.25rem);   /* 24 → 36px */
	--text-h2-sm: clamp(1.25rem, 2.2vw, 1.875rem); /* 20 → 30px */
	--text-h3:    1.25rem;                          /* 20px */
	--text-h3-sm: 1.125rem;                         /* 18px — footer headings */
	--text-h3-xs: 1rem;                             /* 16px — card titles */
	--text-body-lg: 1.25rem;                        /* 20px */
	--text-body:    1.125rem;                       /* 18px */
	--text-body-sm: 1rem;                           /* 16px — nav, buttons */
	--text-small:   0.875rem;                       /* 14px — footer body, copyright */
	--text-quote:   clamp(1.25rem, 2.5vw, 1.875rem); /* 20 → 30px */

	/* ── Font weights ── */
	--weight-regular: 400;
	--weight-medium:  500;

	/* ── Line heights ── */
	--lh-tight:   1.0;    /* headings h1 */
	--lh-heading: 1.11;   /* h2 */
	--lh-h2-sm:   1.2;    /* h2-sm */
	--lh-h3:      1.4;    /* h3 contact */
	--lh-h3-sm:   1.5;    /* h3 footer */
	--lh-h3-xs:   1.5625; /* h3 card titles — 25/16 */
	--lh-body:    1.625;  /* body text, paragraphs, quote */
	--lh-nav:     1.7;    /* nav links */
	--lh-small:   1.4286; /* 20/14 — footer small text */

	/* ── Letter spacing ── */
	--ls-subtitle: 0.45px; /* CV subtitle uppercase */

	/* ── Spacing — section padding ── */
	--section-py:          5rem;  /* 80px */
	--section-py-sm:       4rem;  /* 64px */
	--section-px-wide:     9.5rem; /* 152px — nav, footer container */
	--section-px:          12rem;  /* 192px — 3-col layouts */
	--section-px-narrow:   20rem;  /* 320px — text sections */
	--section-px-article:  24rem;  /* 384px — blog body, contact form */

	/* ── Spacing — gaps ── */
	--gap-xxl: 4rem;   /* 64px */
	--gap-xl:  3rem;   /* 48px */
	--gap-lg:  2rem;   /* 32px */
	--gap-md:  1.5rem; /* 24px */
	--gap-sm:  1rem;   /* 16px */
	--gap-xs:  0.5rem; /* 8px */

	/* ── Spacing — component-specific ── */
	--nav-height:          80px;
	--nav-padding-y:       1rem;     /* 16px */
	--nav-link-gap:        2rem;     /* 32px */
	--card-padding:        2rem;     /* 32px */
	--card-padding-sm:     1.25rem;  /* 20px */
	--social-icon-gap:     1rem;     /* 16px */
	--social-icon-size:    24px;
	--contact-icon-size:   32px;
	--form-field-gap:      1.5rem;   /* 24px */
	--form-label-gap:      0.5rem;   /* 8px */
	--input-height:        50px;
	--textarea-min-height: 189px;
	--btn-cta-icon-gap:    0.5rem;   /* 8px */
	--footer-padding-top:  4rem;     /* 64px */
	--footer-bar-gap:      3rem;     /* 48px */
	--list-item-gap:       1rem;     /* 16px */
	--paragraph-gap:       1.5rem;   /* 24px */

	/* ── Border radius ── */
	--radius-none: 0;

	/* ── Box shadows ── */
	--shadow-nav:   0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.1);
	--shadow-image: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);

	/* ── Container max-widths ── */
	--container-nav:     1232px;
	--container-wide:    1152px;
	--container-medium:  896px;
	--container-narrow:  768px;
	--container-full:    1536px;

	/* ── Grid ── */
	--grid-3col-gap: 2rem;     /* 32px — article cards, contact info */
	--grid-2col-gap: 3rem;     /* 48px — CV profile */
	--grid-photo-w:  384px;    /* CV/homepage profile photo width */
	--grid-photo-h:  512px;    /* CV/homepage profile photo height */
}

/* ── Responsive token overrides ── */

@media (max-width: 1280px) {
	:root {
		--section-px-wide:    6rem;
		--section-px:         6rem;
		--section-px-narrow:  6rem;
		--section-px-article: 6rem;
	}
}

@media (max-width: 1024px) {
	:root {
		--section-px-wide:    3rem;
		--section-px:         3rem;
		--section-px-narrow:  3rem;
		--section-px-article: 3rem;
	}
}

@media (max-width: 768px) {
	:root {
		--section-py:         3rem;
		--section-py-sm:      2.5rem;
		--section-px-wide:    1.5rem;
		--section-px:         1.5rem;
		--section-px-narrow:  1.5rem;
		--section-px-article: 1.5rem;
	}
}