/* ------------------------------------------------------------------ *
 * Fanoexelixis — σχεδιαστικό σύστημα «Ανάγλυφο»
 *
 * Λευκό χαρτί με πραγματικό βάθος. Στρογγυλεμένες γωνίες, διπλές σκιές
 * (κοντινή για επαφή, μακρινή για ύψος), και τα στοιχεία δράσης με φωτεινή
 * ακμή στην κορυφή και σκιά στο ίδιο τους το χρώμα.
 * ------------------------------------------------------------------ */

:root {
	/* --- Πορτοκαλί --- */
	--fx-orange:        #f47c1b;
	--fx-orange-light:  #ffa040;
	--fx-orange-dark:   #e06405;
	--fx-orange-deep:   #b34d02;
	--fx-orange-tint:   #fff4ea;
	--fx-orange-pale:   #fffaf5;

	/* Επιφάνεια δράσης: φωτεινή κορυφή, βαθύ κάτω. */
	--fx-grad-orange: linear-gradient(180deg, #ffa040 0%, #f47c1b 55%, #e06405 100%);
	--fx-grad-dark:   linear-gradient(155deg, #23262e 0%, #14161b 60%, #0e1013 100%);
	--fx-grad-key:    linear-gradient(180deg, #2c303a, #16181d);

	/* --- Μελάνι --- */
	--fx-black:         #0e1013;
	--fx-ink:           #16181d;
	--fx-charcoal:      #23262e;

	/* --- Χαρτί: ζεστοί ουδέτεροι, όχι ψυχρό γκρι --- */
	--fx-bg:            #f7f6f4;
	--fx-surface:       #ffffff;
	--fx-surface-alt:   #faf9f7;
	--fx-border:        #efedea;
	--fx-border-strong: #ddd9d4;

	/* --- Κείμενο --- */
	--fx-text:          #191614;
	--fx-text-muted:    #6b6560;
	--fx-text-faint:    #8d8781;
	--fx-text-invert:   #ffffff;

	/* --- Καταστάσεις --- */
	--fx-pending:       #8d5c06;
	--fx-pending-bg:    linear-gradient(180deg, #fdf4e3, #f9ecd4);
	--fx-confirmed:     #0d6d43;
	--fx-confirmed-bg:  linear-gradient(180deg, #e9f9f0, #dcf3e7);
	--fx-completed:     #2d4f73;
	--fx-completed-bg:  linear-gradient(180deg, #ecf3fa, #dfeaf5);
	--fx-cancelled:     #a92e26;
	--fx-cancelled-bg:  linear-gradient(180deg, #fdeeed, #f9dedc);

	/* --- Πληρότητα --- */
	--fx-free:          #12925a;
	--fx-filling-c:     #d08a06;
	--fx-full:          #c33b33;
	--fx-grad-free:     linear-gradient(180deg, #22b06f, #0d7d4b);
	--fx-grad-filling:  linear-gradient(180deg, #eeae1c, #c07d04);
	--fx-grad-full:     linear-gradient(180deg, #dd5a52, #b1302a);

	/* --- Τυπογραφία --- */
	--fx-font: "Commissioner", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	--fx-font-display: "Manrope", "Commissioner", -apple-system, BlinkMacSystemFont, Arial, sans-serif;

	--fx-size-xs:   0.75rem;
	--fx-size-sm:   0.8125rem;
	--fx-size-base: 0.9375rem;
	--fx-size-md:   1.0625rem;
	--fx-size-lg:   1.3125rem;
	--fx-size-xl:   1.75rem;
	--fx-size-2xl:  2.25rem;
	--fx-size-huge: 3rem;

	--fx-track-tight: -0.03em;
	--fx-track-wide:  0.14em;

	/* --- Αποστάσεις --- */
	--fx-space-1: 4px;
	--fx-space-2: 8px;
	--fx-space-3: 12px;
	--fx-space-4: 16px;
	--fx-space-5: 24px;
	--fx-space-6: 32px;
	--fx-space-7: 48px;

	/* --- Καμπύλες --- */
	--fx-radius:     20px;
	--fx-radius-lg:  26px;
	--fx-radius-sm:  14px;
	--fx-radius-xs:  10px;
	--fx-radius-pill: 999px;

	/* --- Βάθος: επαφή + ύψος --- */
	--fx-shadow-sm: 0 1px 2px rgba(30, 25, 20, 0.05),
	                0 4px 10px -6px rgba(30, 25, 20, 0.16);
	--fx-shadow:    0 2px 3px rgba(30, 25, 20, 0.05),
	                0 14px 28px -14px rgba(30, 25, 20, 0.28);
	--fx-shadow-md: 0 3px 5px rgba(30, 25, 20, 0.07),
	                0 22px 40px -20px rgba(30, 25, 20, 0.38);
	--fx-shadow-lg: 0 6px 12px rgba(30, 25, 20, 0.1),
	                0 36px 64px -28px rgba(30, 25, 20, 0.5);

	--fx-shadow-dark: 0 3px 6px rgba(20, 22, 27, 0.18),
	                  0 22px 40px -20px rgba(20, 22, 27, 0.7);

	/* Πλήκτρο: φωτεινή ακμή πάνω, χρωματιστή σκιά κάτω. */
	--fx-key-orange: inset 0 1px 0 rgba(255, 255, 255, 0.42),
	                 0 2px 4px -1px rgba(179, 77, 2, 0.4),
	                 0 10px 20px -10px rgba(224, 100, 5, 0.7);
	--fx-key-dark:   inset 0 1px 0 rgba(255, 255, 255, 0.18),
	                 0 4px 10px -3px rgba(22, 24, 29, 0.6);

	--fx-inset: inset 0 1px 3px rgba(30, 25, 20, 0.12);
	--fx-edge:  inset 0 1px 0 rgba(255, 255, 255, 0.9);

	--fx-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");

	/* --- Κίνηση --- */
	--fx-ease: cubic-bezier(0.32, 0.72, 0, 1);
	--fx-fast: 0.15s var(--fx-ease);
	--fx-mid:  0.26s var(--fx-ease);

	--fx-nav-width: 248px;
	--fx-topbar-height: 64px;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body.fx-app {
	background: var(--fx-bg);
	color: var(--fx-text);
	font-family: var(--fx-font);
	font-size: var(--fx-size-base);
	line-height: 1.58;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

.fx-app h1, .fx-app h2, .fx-app h3, .fx-app h4 {
	margin: 0;
	font-family: var(--fx-font-display);
	font-weight: 800;
	line-height: 1.14;
	letter-spacing: var(--fx-track-tight);
	color: var(--fx-text);
}

.fx-app h1 { font-size: var(--fx-size-xl); }
.fx-app h2 { font-size: var(--fx-size-lg); }
.fx-app h3 { font-size: var(--fx-size-md); }
.fx-app h4 { font-size: var(--fx-size-base); }

.fx-app a {
	color: var(--fx-orange-dark);
	text-decoration: none;
	transition: color var(--fx-fast);
}

.fx-app a:hover { color: var(--fx-orange); }

.fx-app p { margin: 0 0 var(--fx-space-3); }

.fx-app code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.92em;
	background: var(--fx-surface-alt);
	border: 1px solid var(--fx-border);
	border-radius: var(--fx-radius-xs);
	padding: 2px 7px;
	color: var(--fx-text);
}

/* --- Βοηθητικές --- */
.fx-muted  { color: var(--fx-text-muted); }
.fx-faint  { color: var(--fx-text-faint); }
.fx-accent { color: var(--fx-orange-dark); }
.fx-mono   { font-variant-numeric: tabular-nums; }
.fx-hidden { display: none !important; }
[hidden]   { display: none !important; }

/* Αριθμοί και τίτλοι σε Manrope, με σφιχτό tracking. */
.fx-num-display {
	font-family: var(--fx-font-display);
	font-weight: 800;
	letter-spacing: var(--fx-track-tight);
	font-variant-numeric: tabular-nums;
}

.fx-eyebrow {
	font-size: var(--fx-size-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--fx-track-wide);
	color: var(--fx-text-faint);
}

.fx-visually-hidden {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* --- Εμφάνιση --- */
@keyframes fx-rise {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}

@keyframes fx-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.fx-app .fx-content > * { animation: fx-rise 0.34s var(--fx-ease) both; }
.fx-app .fx-content > *:nth-child(2) { animation-delay: 0.04s; }
.fx-app .fx-content > *:nth-child(3) { animation-delay: 0.08s; }
.fx-app .fx-content > *:nth-child(4) { animation-delay: 0.12s; }
.fx-app .fx-content > *:nth-child(n+5) { animation-delay: 0.15s; }

@media (prefers-reduced-motion: reduce) {
	.fx-app .fx-content > * { animation: none; }
	* { transition-duration: 0.01ms !important; }
}