/*
Theme Name: TagX
Theme URI: https://tagx.li
Author: Metis srl
Description: Custom theme for TagX - Intelligent Payment Orchestration Layer. Built with ACF for content management and GSAP for animations.
Version: 1.0.3
Requires at least: 6.4
Tested up to: 6.9
Requires PHP: 8.2
License: Proprietary
License URI: https://tagx.li
Text Domain: tagx
Tags: one-column, custom-colors, custom-logo, featured-images, full-width-template, translation-ready
*/

/* ==========================================================================
   CUSTOM FONTS
   ========================================================================== */

/* Mont - Heading Font */
@font-face {
    font-family: 'Mont';
    src: url('assets/fonts/Mont-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Akkurat - Body Font */
@font-face {
    font-family: 'Akkurat';
    src: url('assets/fonts/akkurat_light-webfont.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Akkurat';
    src: url('assets/fonts/akkurat_regular-webfont.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Akkurat';
    src: url('assets/fonts/akkurat_bold-webfont.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
   DESIGN TOKENS - From Figma (Complete)
   ========================================================================== */

:root {
    /* ===== COLOR PALETTE - Semantic ===== */
    /* Accent Colors (same in both modes) */
    --color-primary: #EB5E5C;           /* Primary accent */
    --color-secondary: #79C6C0;         /* Secondary accent */
    --color-tertiary: #312783;          /* Thirdiary accent */

    /* Neutral Colors */
    --color-black: #000000;
    --color-white: #FFFFFF;
    --color-muted: #999999;             /* Muted */

    /* ===== DARK MODE (Default) ===== */
    --color-bg: #000000;                /* Background */
    --color-fg: #FFFFFF;                /* Foreground */
    --color-logo: #FFFFFF;              /* Logo foreground */
    --color-btn-fg: #FFFFFF;            /* Buttons foreground */

    /* Cards - Dark Mode */
    --color-card: #000000;              /* Cards black */
    --color-card-transparent: transparent; /* Cards black-0% */
    --color-card-100: #171717;          /* Cards black-100 */
    --color-card-border: rgba(255, 255, 255, 0.1);   /* Cards border black-200 */
    --color-card-border-hover: rgba(255, 255, 255, 0.6); /* Cards border black-300 */

    /* ===== TYPOGRAPHY ===== */
    /* Font Families */
    --font-heading: 'Mont', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: 'Akkurat', -apple-system, BlinkMacSystemFont, sans-serif;
    
    /* Font Weights */
    --font-weight-regular: 400;         /* Regular */
    --font-weight-medium: 500;          /* Medium */
    --font-weight-semibold: 600;        /* SemiBold */
    --font-weight-bold: 700;            /* Bold */
    
    /* Font Sizes - Desktop */
    --font-size-h1: 120px;
    --font-size-h2: 50px;
    --font-size-h3: 44px;
    --font-size-h4: 24px;
    --font-size-b1: 16px;               /* B1 - Body */
    --font-size-b2: 14px;               /* B2 - Body Small */
    --font-size-label: 12px;            /* Label */
    --font-size-label-sm: 10px;         /* LabelSm */
    
    /* Aliases for convenience */
    --font-size-body: var(--font-size-b1);
    --font-size-body-sm: var(--font-size-b2);
    
    /* Line Heights */
    --line-height-tight: 1.1;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.7;
    
    /* ===== SPACING ===== */
    --space-xs: 8px;
    --space-sm: 16px;
    --space-md: 24px;
    --space-lg: 32px;
    --space-xl: 48px;
    --space-2xl: 64px;
    --space-3xl: 96px;
    --space-4xl: 128px;
    
    /* ===== LAYOUT ===== */
    --container-max: 1280px;
    --container-wide: 1440px;
    --container-narrow: 800px;
    --container-padding: 16px;
    
    /* ===== BORDERS ===== */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;
    
    /* ===== TRANSITIONS ===== */
    --transition-fast: 150ms ease;
    --transition-base: 300ms ease;
    --transition-slow: 500ms ease;
    --transition-theme: 200ms ease-out; /* Theme switch - synchronized */
    
    /* ===== Z-INDEX ===== */
    --z-dropdown: 50;
    --z-header: 100;
    --z-overlay: 200;
    --z-modal: 300;
}

/* ===== LIGHT MODE ===== */
[data-theme="light"] {
    --color-bg: #FFFFFF;                /* Background */
    --color-fg: #312783;                /* Foreground */
    --color-logo: #312783;              /* Logo foreground */
    --color-btn-fg: #FFFFFF;            /* Buttons foreground (same) */
    
    /* Cards - Light Mode */
    --color-card: #FFFFFF;              /* Cards black (inverted) */
    --color-card-transparent: transparent; /* Cards black-0% */
    --color-card-100: #EBEBEB;          /* Cards black-100 */
    --color-card-border: rgba(121, 198, 192, 0.1);  /* Cards border black-200 */
    --color-card-border-hover: #79C6C0; /* Cards border black-300 */
}

/* ===== RESPONSIVE TYPOGRAPHY ===== */
/* Tablet (≤1024px) */
@media (max-width: 1023px) {
    :root {
        --font-size-h1: 60px;
        --font-size-h2: 40px;
        --font-size-h3: 32px;
        --font-size-h4: 20px;
        /* B1, B2, Label, LabelSm remain same */
        --container-padding: 16px;
    }
}

/* Mobile (≤768px) */
@media (max-width: 767px) {
    :root {
        --font-size-h1: 40px;
        --font-size-h2: 30px;
        --font-size-h3: 24px;
        --font-size-h4: 18px;
        /* B1, B2, Label, LabelSm remain same */
        --container-padding: 12px;
        --space-3xl: 64px;
        --space-4xl: 80px;
    }
}

/* ==========================================================================
   BASE RESET & DEFAULTS
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    /* scroll-behavior: smooth; REMOVED: Conflicts with GSAP ScrollSmoother */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden; /* Prevent horizontal scroll from break-out elements */
    -webkit-tap-highlight-color: transparent;
}

body {
    position: relative;
    font-family: var(--font-body);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-normal);
    color: var(--color-fg);
    background-color: var(--color-bg);
}

/* ===== THEME SWITCHING (View Transitions API) ===== */
/* Circular reveal animation from toggle button position
 * - Fast 300ms transition for professional feel
 * - Expands from click point using clip-path circle
 * - Gracefully falls back to instant switch on unsupported browsers
 */

::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}

::view-transition-old(root) {
    z-index: 1;
}

::view-transition-new(root) {
    z-index: 9999;
    animation: theme-circular-reveal 0.5s ease-out;
}

@keyframes theme-circular-reveal {
    from {
        clip-path: circle(0px at var(--theme-toggle-x, 50%) var(--theme-toggle-y, 0));
    }
    to {
        clip-path: circle(var(--theme-toggle-radius, 150%) at var(--theme-toggle-x, 50%) var(--theme-toggle-y, 0));
    }
}

/* Reduce motion: instant switch */
@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation-duration: 0.01ms !important;
    }
}

/* ===== TYPOGRAPHY BASE ===== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    letter-spacing: -0.02em;
    margin-bottom: var(--space-md);
}

h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }
h4 { font-size: var(--font-size-h4); }

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast);
}

@media (hover: hover) {
    a:hover {
        color: var(--color-primary);
    }
}

img, video {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ===== UTILITY CLASSES ===== */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

.container--wide {
    max-width: var(--container-wide);
}

.container--narrow {
    max-width: var(--container-narrow);
}

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

/* ===== BUTTONS ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 16px;
    height: 40px;
    font-family: var(--font-heading);
    font-size: var(--font-size-b1);
    font-style: normal;
    font-weight: var(--font-weight-bold);
    line-height: 100%;
    letter-spacing: -0.32px;
    color: var(--color-fg);
    background: var(--color-bg);
    border: 1px solid var(--color-primary);
    border-radius: 20px;
    cursor: pointer;
    transition: background-color var(--transition-base),
                border-color var(--transition-base),
                box-shadow var(--transition-base),
                color var(--transition-base);
    text-decoration: none;
    box-shadow:
        0 0 8px 0 var(--color-primary),
        inset 0 0 17.5px 0 var(--color-primary);
}

.btn--outline {
    background-color: transparent;
    border-color: var(--color-fg);
    color: var(--color-fg);
}

.btn--secondary {
    background-color: var(--color-secondary);
}

.btn--success {
    background: var(--color-card-100);
    border-color: var(--color-secondary);
    color: var(--color-fg);
    box-shadow:
        0 0 8px 0 var(--color-secondary),
        inset 0 0 17.5px 0 var(--color-secondary);
}

.btn--loading {
    pointer-events: none;
    position: relative;
    cursor: not-allowed;
}

.btn--loading .btn__text,
.btn--loading .btn__icon {
    visibility: hidden;
}

.btn--loading::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: btn-spinner 0.8s linear infinite;
}

@keyframes btn-spinner {
    to { transform: rotate(360deg); }
}

/* Hover states (only for devices with hover capability) */
/* Note: transform handled by GSAP to avoid CSS transition conflicts */
@media (hover: hover) {
    .btn:hover {
        background: var(--color-primary);
        border-color: var(--color-primary);
        color: var(--color-white);
        box-shadow:
            0 0 16px 0 var(--color-primary),
            inset 0 0 20px 0 var(--color-primary);
    }

    .btn--outline:hover {
        background-color: var(--color-fg);
        color: var(--color-bg);
    }

    .btn--secondary:hover {
        border-color: var(--color-secondary);
        color: var(--color-secondary);
    }

    .btn--success:hover {
        background: var(--color-secondary);
        border-color: var(--color-secondary);
        color: var(--color-white);
        box-shadow:
            0 0 16px 0 var(--color-secondary),
            inset 0 0 20px 0 var(--color-secondary);
    }
}

/* ===== FOCUS STATES (Accessibility) ===== */
:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    html {
        scroll-behavior: auto;
    }
}