/* -----------------------------------------------------------------------------
 * Villa Antonia · Design Tokens
 * Source: /design/villa-antonia-new/project/va.css (Claude design handoff)
 * --------------------------------------------------------------------------- */

:root {
	/* Palette */
	--va-teal:        #2C8A8B;
	--va-teal-deep:   #1F6566;
	--va-teal-soft:   #BFE0DE;
	--va-coral:       #ED6A55;
	--va-coral-soft:  #F7B8A8;
	--va-cream:       #FBF5E9;
	--va-ink:         #1E2A3A;
	--va-ink-soft:    #5A6677;
	--va-paper:       #FFFFFF;
	--va-line:        rgba(30, 42, 58, 0.10);

	/* Aliases για legacy compatibility με design CSS */
	--teal:       var(--va-teal);
	--teal-deep:  var(--va-teal-deep);
	--teal-soft:  var(--va-teal-soft);
	--coral:      var(--va-coral);
	--coral-soft: var(--va-coral-soft);
	--cream:      var(--va-cream);
	--ink:        var(--va-ink);
	--ink-soft:   var(--va-ink-soft);
	--paper:      var(--va-paper);
	--line:       var(--va-line);

	/* Typography */
	--va-font-serif: 'Cormorant Garamond', 'Garamond', 'Times New Roman', serif;
	--va-font-sans:  'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	/* Spacing scale */
	--va-pad-section-x: 72px;
	--va-pad-section-y: 120px;
	--va-radius-sm: 3px;
	--va-radius-md: 6px;
	--va-radius-lg: 8px;
	--va-radius-pill: 80px;

	/* Shadows */
	--va-shadow-soft: 0 10px 24px -16px rgba(0, 0, 0, 0.4);
	--va-shadow-card: 0 30px 60px -32px rgba(30, 42, 58, 0.25);
	--va-shadow-pill: 0 28px 70px -32px rgba(30, 42, 58, 0.45);
	--va-shadow-photo: 0 30px 60px -28px rgba(0, 0, 0, 0.5);

	/* Transitions */
	--va-tr-fast: 0.15s ease;
	--va-tr-base: 0.25s ease;
}

/* -----------------------------------------------------------------------------
 * Base body & typography reset
 * --------------------------------------------------------------------------- */
html, body {
	font-family: var(--va-font-sans);
	color: var(--va-ink);
	background: var(--va-paper);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5 {
	font-family: var(--va-font-serif);
	font-weight: 500;
	margin: 0;
	letter-spacing: -0.005em;
	color: var(--va-ink);
}

a { color: inherit; text-decoration: none; }
p { margin: 0; }

/* -----------------------------------------------------------------------------
 * Signature voice: italic + coral inside headlines
 * Usage: <h1>Headline <span class="va-it">italic part.</span></h1>
 * --------------------------------------------------------------------------- */
.va-it,
.it {
	color: var(--va-coral);
	font-style: italic;
}

/* -----------------------------------------------------------------------------
 * Eyebrow
 * Usage: <div class="va-eyebrow">Section label</div>
 * --------------------------------------------------------------------------- */
.va-eyebrow,
.eyebrow {
	font-size: 11px;
	letter-spacing: 0.42em;
	text-transform: uppercase;
	color: var(--va-coral);
	font-weight: 600;
	font-family: var(--va-font-sans);
}

/* -----------------------------------------------------------------------------
 * Buttons (all variants from va.css)
 * --------------------------------------------------------------------------- */
.va-btn,
.btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 0;
	cursor: pointer;
	font-family: var(--va-font-sans);
	font-weight: 600;
	letter-spacing: 0.06em;
	font-size: 13px;
	padding: 15px 28px;
	border-radius: var(--va-radius-sm);
	transition: transform var(--va-tr-fast), box-shadow var(--va-tr-fast);
	text-decoration: none;
}
.va-btn:hover,
.btn:hover {
	transform: translateY(-1px);
	box-shadow: var(--va-shadow-soft);
}
.va-btn-coral, .btn-coral       { background: var(--va-coral); color: var(--va-cream); }
.va-btn-cream, .btn-cream       { background: var(--va-cream); color: var(--va-coral); }
.va-btn-teal,  .btn-teal        { background: var(--va-teal-deep); color: var(--va-cream); }
.va-btn-ink,   .btn-ink         { background: var(--va-ink); color: var(--va-cream); }
.va-btn-outline-cream, .btn-outline-cream {
	background: transparent;
	color: var(--va-cream);
	border: 1px solid rgba(251, 245, 233, 0.4);
}
.va-btn-outline-ink, .btn-outline-ink {
	background: transparent;
	color: var(--va-ink);
	border: 1px solid rgba(30, 42, 58, 0.2);
}

/* -----------------------------------------------------------------------------
 * Stylized image placeholders (gradient backgrounds used όταν δεν υπάρχει εικόνα)
 * Source: va.css .ph-* classes
 * --------------------------------------------------------------------------- */
.va-ph,
.ph {
	position: relative;
	overflow: hidden;
	border-radius: var(--va-radius-md);
	background: linear-gradient(135deg, #cfd9d6 0%, #a9bdb8 50%, #7f9994 100%);
	color: rgba(255, 255, 255, 0.85);
	display: flex;
	align-items: flex-end;
	padding: 18px;
}
.va-ph::before,
.ph::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.18) 0%, transparent 38%),
		radial-gradient(circle at 80% 70%, rgba(0, 0, 0, 0.18) 0%, transparent 42%),
		repeating-linear-gradient(120deg, rgba(255, 255, 255, 0.04) 0 2px, transparent 2px 22px);
	mix-blend-mode: overlay;
	pointer-events: none;
}
.va-ph .ph-label,
.ph .ph-label {
	position: relative;
	font-family: var(--va-font-sans);
	font-size: 10px;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	font-weight: 600;
	opacity: 0.85;
}

.ph-sand  { background: linear-gradient(135deg, #e7c79a 0%, #d8a76a 50%, #a86f3a 100%); }
.ph-teal  { background: linear-gradient(135deg, #5fa9aa 0%, #2C8A8B 50%, #1d6062 100%); }
.ph-coral { background: linear-gradient(135deg, #f59c8d 0%, #ED6A55 50%, #b94530 100%); }
.ph-blue  { background: linear-gradient(160deg, #9fc7d4 0%, #5b9ab0 50%, #34657a 100%); }
.ph-warm  { background: linear-gradient(150deg, #f0d2a5 0%, #d8a571 40%, #7c5237 100%); }
.ph-rose  { background: linear-gradient(150deg, #efbcae 0%, #d68b7a 50%, #7a3c2f 100%); }
.ph-olive { background: linear-gradient(140deg, #bfc59a 0%, #8a9466 50%, #4a5530 100%); }
.ph-night { background: linear-gradient(140deg, #5d7d80 0%, #2e4a55 50%, #11242c 100%); }