/**
 * File: assets/css/perfyoum.css
 * Description: Master corporate style overrides for the perfYoum platform.
 *              Establishes design tokens for sleek, rounded UI components and dual-theme compliance.
 */

/* =====================================================================================
   1. DESIGN TOKENS & SYSTEM VARIABLES
   ===================================================================================== */
:root {
    /* Core Corporate Identity (From Logo Asset) */
    --py-orange: #f37024;
    --py-orange-hover: #d6591b;
    --py-orange-glow: rgba(243, 112, 36, 0.15);
    
    /* Global Transitions */
    --py-transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Light Theme Variables */
[data-bs-theme="light"] {
    --py-bg-base: #f8f8f6;       /* Soft luxury linen/stone backdrop */
    --py-bg-surface: #ffffff;    /* Crisp white floating panels */
    --py-text-main: #212529;
    --py-text-muted: #6c757d;
    --py-border: rgba(0, 0, 0, 0.06);
    --py-shadow: 0 10px 30px rgba(0, 0, 0, 0.03), 0 1px 3px rgba(0, 0, 0, 0.02);
    --py-shadow-hover: 0 20px 40px rgba(0, 0, 0, 0.07);
}

/* Dark Theme Variables */
[data-bs-theme="dark"] {
    --py-bg-base: #0d0d0d;       /* Deep luxury ink noir */
    --py-bg-surface: #161616;    /* Soft graphite surfaces */
    --py-text-main: #f8f9fa;
    --py-text-muted: #a0a0a0;
    --py-border: rgba(255, 255, 255, 0.05);
    --py-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), 0 1px 4px rgba(0, 0, 0, 0.5);
    --py-shadow-hover: 0 20px 50px rgba(243, 112, 36, 0.08);
}

/* =====================================================================================
   2. GLOBAL LAYOUT OVERRIDES
   ===================================================================================== */
body {
    background-color: var(--py-bg-base) !important;
    color: var(--py-text-main) !important;
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
    transition: var(--py-transition);
}

/* Soften all container panels globally */
.card {
    background-color: var(--py-bg-surface) !important;
    border: 1px solid var(--py-border) !important;
    border-radius: 1.25rem !important; /* Generous, soft rounded finish */
    box-shadow: var(--py-shadow);
    transition: var(--py-transition);
}

/* Interactive card hover mechanics */
.editorial-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--py-shadow-hover);
    border-color: rgba(243, 112, 36, 0.25) !important;
}

/* =====================================================================================
   3. CORPORATE COMPONENT STYLING
   ===================================================================================== */

/* Brand Typography Specifics */
.brand-text-orange {
    color: var(--py-orange) !important;
}

/* Premium Action Buttons */
.btn-py-primary {
    background-color: var(--py-orange) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 50rem !important; /* Pill shape for a high-end feel */
    padding: 0.75rem 2rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    box-shadow: 0 4px 15px var(--py-orange-glow);
    transition: var(--py-transition);
}

.btn-py-primary:hover {
    background-color: var(--py-orange-hover) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(243, 112, 36, 0.3);
}

.btn-py-outline {
    background: transparent !important;
    color: var(--py-text-main) !important;
    border: 1px solid var(--py-border) !important;
    border-radius: 50rem !important;
    padding: 0.75rem 2rem;
    font-weight: 600;
    transition: var(--py-transition);
}

.btn-py-outline:hover {
    border-color: var(--py-orange) !important;
    color: var(--py-orange) !important;
}

/* =====================================================================================
   4. EDITORIAL HERO & LANDING SECTIONS
   ===================================================================================== */
.editorial-hero {
    background: linear-gradient(135deg, var(--py-bg-surface) 0%, var(--py-bg-base) 100%);
    border-bottom: 1px solid var(--py-border);
    position: relative;
    overflow: hidden;
}

/* Subtle abstract glowing background element reminiscent of fluid amber */
.editorial-hero::after {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, var(--py-orange-glow) 0%, transparent 70%);
    top: -100px;
    right: -50px;
    z-index: 0;
    pointer-events: none;
}

/* Refined Sub-Navigation */
.context-bar {
    background-color: var(--py-bg-surface);
    border-bottom: 1px solid var(--py-border);
    backdrop-filter: blur(10px);
}

.context-link {
    color: var(--py-text-muted);
    font-weight: 500;
    text-decoration: none;
    transition: var(--py-transition);
    position: relative;
    padding: 0.5rem 0;
}

.context-link:hover, .context-link.active {
    color: var(--py-orange);
}

.context-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background-color: var(--py-orange);
    transition: var(--py-transition);
    transform: translateX(-50%);
}

.context-link:hover::after, .context-link.active::after {
    width: 100%;
}