@font-face {
	font-family: 'Yacota Display Sans';
	src: url('https://psytranceartist.com/wp-content/uploads/2026/06/Yacote.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* =====================================================
   Self-hosted brand text stack — served from theme/assets/fonts
   No Google Fonts CDN requests (GDPR + performance).
   Weights 400/600/700 share a single variable-font file per
   subset, matching how Google Fonts distributes Open Sans / Inter.
===================================================== */
@font-face {
	font-family: 'Open Sans';
	src: url('fonts/opensans-latin.woff2') format('woff2');
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Open Sans';
	src: url('fonts/opensans-latin-ext.woff2') format('woff2');
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Inter';
	src: url('fonts/inter-latin.woff2') format('woff2');
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Inter';
	src: url('fonts/inter-latin-ext.woff2') format('woff2');
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/**
 * PsyTrance Artist — Design Tokens
 *
 * Single source of truth for every CSS value used in the plugin frontend.
 * NEVER hardcode hex/spacing/radius elsewhere. Always reference these vars.
 *
 * Derived from:
 *   - project_brand_colors.md     (6-color official palette)
 *   - project_typography.md       (Yacote + Open Sans roles)
 *   - project_design_system_plan.md
 *
 * Load order: tokens.css → reset.css → components.css → page CSS
 */

:root {
	/* =====================================================
	   COLOR — Brand palette (official 6)
	===================================================== */
	--psy-lime:     #C8EF3A;
	--psy-green:    #2EE577;
	--psy-pink:     #E54ADA;
	--psy-navy:     #050033;
	--psy-royal:    #2D1CA3;
	--psy-white:    #F2F2F2;

	/* Derived brand tones — kept in tokens so nothing redefines locally.
	   `--psy-indigo`  = deep navy variant used behind large hero areas.
	   `--psy-violet`  = static border / divider between navy sections.
	   `--psy-lavender` = subdued white for muted body copy on dark bg. */
	--psy-indigo:   #0C0548;
	--psy-violet:   #1A0F5C;
	--psy-lavender: #B8B3D9;

	/* Legacy aliases kept for existing components — do not add new ones. */
	--psy-border-static: var(--psy-violet);
	--psy-blue-dark:     var(--psy-navy);

	/* =====================================================
	   COLOR — Semantic aliases (USE THESE in components)
	===================================================== */
	--color-bg:               var(--psy-navy);
	--color-surface:          rgba(255, 255, 255, 0.04); /* glass on bg */
	--color-surface-strong:   rgba(255, 255, 255, 0.08);
	--color-surface-stronger: rgba(255, 255, 255, 0.12);

	--color-border:           rgba(255, 255, 255, 0.12);
	--color-border-soft:      rgba(255, 255, 255, 0.12);
	--color-border-strong:    rgba(255, 255, 255, 0.22);

	--color-text:             var(--psy-white);
	--color-text-muted:       rgba(242, 242, 242, 0.65);
	--color-text-faint:       rgba(242, 242, 242, 0.45);

	--color-accent:           var(--psy-pink);
	--color-accent-2:         var(--psy-green);
	--color-accent-3:         var(--psy-lime);

	--color-cta-bg:           var(--psy-royal);
	--color-cta-text:         var(--psy-white);

	/* Signature title gradient (hero H1) */
	--gradient-hero-title: linear-gradient(90deg, #E54ADA, #2D1CA3, #2EE577);

	/* =====================================================
	   TYPOGRAPHY — Families
	===================================================== */
	--font-display: 'Yacota Display Sans', 'Yacote', system-ui, sans-serif;
	--font-body:    'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

	/* TYPOGRAPHY — Type scale (spec from brand deck)
	   Format: --text-{role}-{size|lh|tracking|weight} */
	--text-h1-size:     clamp(48px, 9vw, 110px);
	--text-h1-lh:       1;
	--text-h1-tracking: -0.07em;
	--text-h1-weight:   400;

	--text-h2-size:     clamp(20px, 2.4vw, 25px);
	--text-h2-lh:       1.2;
	--text-h2-tracking: -0.06em;
	--text-h2-weight:   700;

	--text-h3-size:     16px;
	--text-h3-lh:       1.19;
	--text-h3-tracking: -0.03em;
	--text-h3-weight:   400; /* italic style applied via component */

	--text-body-size:     14px; /* spec is 12pt — bumped 2px for web legibility */
	--text-body-lh:       1.5;
	--text-body-tracking: 0;
	--text-body-weight:   400;

	--text-cta-size:     12px;
	--text-cta-lh:       1;
	--text-cta-tracking: -0.05em;
	--text-cta-weight:   700;

	/* Small/caption — derived, not in deck */
	--text-small-size:     12px;
	--text-small-lh:       1.4;
	--text-small-tracking: 0.01em;
	--text-small-weight:   400;

	/* =====================================================
	   SPACING — 4px-grid scale
	===================================================== */
	--space-0:  0;
	--space-1:  4px;
	--space-2:  8px;
	--space-3:  12px;
	--space-4:  16px;
	--space-5:  20px;
	--space-6:  24px;
	--space-7:  32px;
	--space-8:  40px;
	--space-9:  48px;
	--space-10: 64px;
	--space-11: 80px;
	--space-12: 96px;
	--space-13: 128px;

	/* =====================================================
	   RADIUS — Limited scale
	===================================================== */
	--radius-xs:   4px;
	--radius-sm:   8px;
	--radius-md:   12px;
	--radius-lg:   16px;
	--radius-xl:   24px;
	--radius-2xl:  32px;
	--radius-full: 999px;

	/* =====================================================
	   SHADOW / GLOW
	===================================================== */
	--shadow-sm:  0 2px 8px  rgba(0, 0, 0, 0.25);
	--shadow-md:  0 8px 24px rgba(0, 0, 0, 0.35);
	--shadow-lg:  0 16px 48px rgba(0, 0, 0, 0.45);

	--glow-pink:  0 0 24px rgba(229, 74, 218, 0.45);
	--glow-green: 0 0 24px rgba(46, 229, 119, 0.45);
	--glow-lime:  0 0 24px rgba(200, 239, 58, 0.45);

	/* =====================================================
	   BLUR
	===================================================== */
	--blur-sm: 8px;
	--blur-md: 14px;
	--blur-lg: 20px;
	--blur-xl: 32px;

	/* =====================================================
	   LAYOUT — Container + padding (site rule: 50/20)
	===================================================== */
	--container-max:        1440px;
	--container-pad-desk:   50px;
	--container-pad-mobile: 20px;

	/* =====================================================
	   BREAKPOINTS — Canonical (use as media query values)
	===================================================== */
	--bp-mobile:  600px;
	--bp-tablet:  1024px;
	--bp-desktop: 1440px;

	/* =====================================================
	   Z-INDEX scale — Prevents arbitrary z-index wars
	===================================================== */
	--z-base:           1;
	--z-raised:         10;
	--z-dropdown:       100;
	--z-sticky-header:  500;
	--z-modal-backdrop: 900;
	--z-modal:          1000;
	--z-toast:          1100;

	/* =====================================================
	   MOTION — Easing + duration
	===================================================== */
	--ease-out-soft:    cubic-bezier(0.2, 0.7, 0.2, 1);
	--ease-in-out-soft: cubic-bezier(0.4, 0, 0.2, 1);

	--dur-fast: 120ms;
	--dur-base: 180ms;
	--dur-slow: 280ms;

	/* =====================================================
	   BRAND ASSETS — External URLs (single source of truth)
	===================================================== */
	--asset-logo:        url('https://psytranceartist.com/wp-content/uploads/2026/05/logo.svg');
	--asset-arrow-png:   url('https://psytranceartist.com/wp-content/uploads/2026/06/freccia.png');
	--asset-home-bg:     url('https://psytranceartist.com/wp-content/uploads/2026/06/ff.png');
	--asset-explore-bg:  url('https://psytranceartist.com/wp-content/uploads/2026/06/Categoria-V3.png');
	--asset-single-bg:   url('https://psytranceartist.com/wp-content/uploads/2026/06/bck-scaled.png');
}

/* Global page background — prevents white flash on mobile address-bar resize
   and overscroll bounce on iOS/Android. Theme/plugin surfaces use --psy-navy
   so the underlying html/body must match. */
html,
body {
	background-color: var(--psy-navy);
}

/* Sticky footer — page fills at least the viewport so no gap appears below
   the footer where fixed background pseudos would otherwise leak through. */
body {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

body > main,
body > .psy-home,
body > .psy-single,
body > .psy-explore,
body > .psy-account,
body > .psy-route,
body > .psy-legal,
body > .psy-contact,
body > .psy-project,
body > .psy-search-results,
body > .site-content,
body > #page,
body > #content {
	flex: 1 0 auto;
}

body > .psy-footer {
	flex-shrink: 0;
}

/* Reduce motion — respect OS preference */
@media (prefers-reduced-motion: reduce) {
	:root {
		--dur-fast: 0ms;
		--dur-base: 0ms;
		--dur-slow: 0ms;
	}
}