/* ==========================================================================
   VECTORE 2027 — Corporate Typography (FF-Mark + Inter), Palette & Liquid Glass
   ========================================================================== */

@font-face {
    font-family: 'FF Mark';
    src: url('/assets/fonts/MarkPro-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'FF Mark';
    src: url('/assets/fonts/MarkPro-Book.otf') format('opentype');
    font-weight: 350;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'FF Mark';
    src: url('/assets/fonts/MarkPro-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'FF Mark';
    src: url('/assets/fonts/MarkPro-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

:root,
[data-theme="dark"] {
    /* 2027 Deep Navy Surfaces with #4012A6 Royal Saturation */
    --vf-navy: #120042;
    --vf-royal: #4012A6;
    --vf-bg: #0b0426;
    --vf-bg-deep: #07021a;
    --vf-surface: #12073b;
    --vf-surface-raised: #1a0c52;
    --vf-surface-overlay: #261170;
    --vf-border: #381d8c;
    --vf-border-subtle: #23115c;

    /* 2027 Official Brand Palette */
    --vf-primary: #8655FF;
    --vf-primary-hover: #a67fff;
    --vf-primary-dim: #4012A6;
    --vf-primary-glow: rgba(134, 85, 255, 0.3);

    --vf-coral: #FF696C;
    --vf-coral-glow: rgba(255, 105, 108, 0.26);

    --vf-emerald: #10B981;
    --vf-amber: #FFBB55;
    --vf-amber-hover: #ffca7a;
    --vf-amber-text: #FFBB55;
    --vf-amber-glow: rgba(255, 187, 85, 0.28);
    --vf-amber-ink: #120042;
    --vf-cyan: #00B4D8;
    --vf-info: #4DA8FF;
    --vf-danger: #FF696C;

    /* Separated Gradient Families (NEVER mix Violet with Yellow or Coral) */
    --vf-grad-violet-white: linear-gradient(135deg, #ffffff 0%, #c4b5fd 100%);
    --vf-grad-royal-violet: linear-gradient(135deg, #120042 0%, #4012A6 48%, #8655FF 100%);
    --vf-grad-coral-amber: linear-gradient(90deg, #FF696C 0%, #FFBB55 100%);

    /* Typography Hierarchy */
    --vf-text: #f4f3fc;
    --vf-text-secondary: #cdc8e6;
    --vf-text-muted: #9890c4;
    --vf-heading-contrast: #ffffff;

    /* Liquid Glass Optical Tokens (Pure Violet-White Specular Rim, no Coral/Yellow mix) */
    --lg-fill: linear-gradient(135deg, rgba(255, 255, 255, 0.085) 0%, rgba(134, 85, 255, 0.07) 55%, rgba(64, 18, 166, 0.08) 100%);
    --lg-fill-strong: linear-gradient(145deg, rgba(20, 6, 68, 0.88) 0%, rgba(11, 4, 38, 0.94) 100%);
    --lg-rim-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.45) 0%, rgba(134, 85, 255, 0.42) 55%, rgba(255, 255, 255, 0.18) 100%);
    --lg-inner-shadow: inset 0 1px 0.5px rgba(255, 255, 255, 0.32), inset 0 -1px 1px rgba(134, 85, 255, 0.18);
    --lg-drop-shadow: 0 20px 50px -12px rgba(5, 2, 22, 0.78);
    --lg-sheen-color: rgba(166, 127, 255, 0.12);

    /* Fonts & Radii: FF-Mark for Light/Regular/Medium, Inter for Bold Headings & Buttons */
    --font-sans: 'FF Mark', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    --radius-xs: 8px;
    --radius-sm: 12px;
    --radius-md: 18px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --radius-pill: 9999px;

    --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ==========================================================================
   LIGHT MODE OVERRIDE (Activated ONLY when user toggles to Light Mode)
   ========================================================================== */
[data-theme="light"] {
    --vf-bg: #F5F6FA;
    --vf-bg-deep: #ECEEF6;
    --vf-surface: #FFFFFF;
    --vf-surface-raised: #F0F1F8;
    --vf-surface-overlay: #E6E8F4;
    --vf-border: #D5D8EB;
    --vf-border-subtle: #E4E6F2;

    --vf-navy: #120042;
    --vf-royal: #4012A6;
    --vf-primary: #8655FF;
    --vf-primary-hover: #4012A6;
    --vf-primary-dim: #4012A6;
    --vf-primary-glow: rgba(134, 85, 255, 0.22);

    --vf-coral: #FF696C;
    --vf-coral-glow: rgba(255, 105, 108, 0.22);

    --vf-emerald: #10B981;
    --vf-amber: #FFBB55;
    --vf-amber-hover: #f5ad3e;
    --vf-amber-text: #8655FF;
    --vf-amber-glow: rgba(134, 85, 255, 0.24);
    --vf-amber-ink: #120042;
    --vf-cyan: #0284C7;
    --vf-info: #2563EB;

    --vf-text: #120042;
    --vf-text-secondary: #2e2759;
    --vf-text-muted: #524b7a;
    --vf-heading-contrast: #120042;

    /* Liquid Glass Optical Tokens (Light) */
    --lg-fill: linear-gradient(135deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.52) 60%, rgba(238, 235, 255, 0.65) 100%);
    --lg-fill-strong: linear-gradient(145deg, rgba(255, 255, 255, 0.92) 0%, rgba(245, 246, 252, 0.95) 100%);
    --lg-rim-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(110, 60, 232, 0.18) 55%, rgba(255, 255, 255, 0.8) 100%);
    --lg-inner-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.9), inset 0 -1px 1px rgba(110, 60, 232, 0.08);
    --lg-drop-shadow: 0 18px 42px -12px rgba(18, 14, 54, 0.12);
    --lg-sheen-color: rgba(110, 60, 232, 0.06);
}

/* ==========================================================================
   APPLE LIQUID GLASS OPTICAL ENGINE (Selective & GPU-Safe)
   ========================================================================== */
.liquid-glass {
    position: relative;
    background: var(--lg-fill);
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    box-shadow: var(--lg-inner-shadow), var(--lg-drop-shadow);
    isolation: isolate;
}

/* Progressive Optical Refraction on Desktop Chromium when SVG filter is present */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
    .liquid-glass--refract {
        backdrop-filter: url(#vectore-liquid-refract) blur(20px) saturate(185%);
        -webkit-backdrop-filter: blur(22px) saturate(185%);
    }
}

/* Carved Specular Rim Bevel (1px optical edge) */
.liquid-glass::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: var(--lg-rim-gradient);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
    z-index: 2;
}

/* Interactive Cursor-Tracked Specular Sheen */
.liquid-glass--interactive::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(
        320px circle at var(--sheen-x, 50%) var(--sheen-y, 0%),
        var(--lg-sheen-color),
        transparent 70%
    );
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
    z-index: 1;
}

.liquid-glass--interactive:hover::after {
    opacity: 1;
}

/* Solid-backed Liquid Glass for Modals & Dropdowns */
.liquid-glass--elevated {
    background: var(--lg-fill-strong);
    backdrop-filter: blur(28px) saturate(190%);
    -webkit-backdrop-filter: blur(28px) saturate(190%);
    box-shadow: var(--lg-inner-shadow), var(--lg-drop-shadow);
}

/* Hero-specific Liquid Glass (Always dark-calibrated because Hero sits over photography) */
.liquid-glass--hero {
    position: relative;
    background: linear-gradient(140deg, rgba(255, 255, 255, 0.11) 0%, rgba(19, 14, 58, 0.58) 65%, rgba(134, 85, 255, 0.14) 100%);
    backdrop-filter: blur(24px) saturate(185%);
    -webkit-backdrop-filter: blur(24px) saturate(185%);
    box-shadow: inset 0 1px 0.5px rgba(255, 255, 255, 0.38), inset 0 -1px 1px rgba(134, 85, 255, 0.25), 0 24px 56px -12px rgba(0, 0, 0, 0.72);
    color: #ffffff;
}

.liquid-glass--hero::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0%, rgba(166, 127, 255, 0.38) 58%, rgba(255, 255, 255, 0.22) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
}