/* ============================================
   GLOBAL DESIGN SYSTEM — Girl Champion Awards
   Design Tokens, Utilities, and Base Styles
   ============================================ */

:root {
    /* Brand Colors */
    --gca-primary:       #dca747;
    --gca-primary-rgb:   220, 167, 71;
    --gca-primary-dark:  #b4833f;
    --gca-secondary:     #110a05;
    --gca-secondary-rgb: 17, 10, 5;
    --gca-accent:        #945e29;
    --gca-light:         #fcfaf1;
    --gca-dark:          #653416;
    --gca-gray:          #a28b71;
    --gca-white:         #fcfaf1;
    --gca-bg-soft:       #f6edc8;
    --gca-soft-gold:     #d7be85;
    --gca-highlight:     #ebd380;

    /* Effects */
    --gca-shadow:      0 15px 35px rgba(102, 75, 55, 0.15);
    --gca-shadow-sm:   0 5px 15px rgba(102, 75, 55, 0.08);
    --gca-transition:  all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    --gca-glass-bg:    rgba(252, 250, 241, 0.9);
    --gca-glass-border:rgba(205, 145, 52, 0.2);
    --gca-radius:      20px;
    --gca-radius-lg:   40px;

    /* Fluid Spacing */
    --section-padding:  clamp(60px, 10vw, 120px);
    --container-width:  1280px;
    --container-pad:    clamp(16px, 5vw, 40px);

    /* Backward-compatible aliases */
    --primary:       var(--gca-primary);
    --primary-dark:  var(--gca-primary-dark);
    --secondary:     var(--gca-secondary);
    --accent:        var(--gca-accent);
    --light:         var(--gca-light);
    --dark:          var(--gca-dark);
    --gray:          var(--gca-gray);
    --white:         var(--gca-white);
    --bg-soft:       var(--gca-bg-soft);
    --transition:    var(--gca-transition);
    --shadow:        var(--gca-shadow);
    --glass-bg:      var(--gca-glass-bg);
    --glass-border:  var(--gca-glass-border);
}

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

html {
    font-size: 16px;
    scroll-behavior: smooth;
    overflow-x: hidden;
    scrollbar-gutter: stable;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--gca-light);
    color: var(--gca-dark);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

a { text-decoration: none; }

button { cursor: pointer; font-family: inherit; }

/* ── Typography ── */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', serif;
    font-weight: 800;
    color: var(--gca-secondary);
    line-height: 1.2;
}

p { max-width: 75ch; }

/* ── Container ── */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--container-pad);
    width: 100%;
}

/* ── Section spacing ── */
.section {
    padding: var(--section-padding) 0;
    position: relative;
}

/* ── Section Title ── */
.section-title {
    text-align: center;
    margin-bottom: clamp(40px, 8vw, 80px);
}

.section-title h2 {
    font-size: clamp(1.9rem, 5vw, 3.2rem);
    margin-bottom: 20px;
    display: inline-block;
    position: relative;
}

.section-title h2::after {
    content: '';
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(60px, 10vw, 100px);
    height: 4px;
    background: linear-gradient(90deg, var(--gca-primary), var(--gca-primary-dark));
    border-radius: 4px;
}

.section-title p {
    max-width: 750px;
    margin: 0 auto;
    color: var(--gca-dark);
    font-size: clamp(0.95rem, 2vw, 1.15rem);
    opacity: 0.85;
}

/* ── Grid System ── */
.grid {
    display: grid;
    gap: clamp(20px, 3vw, 40px);
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Auto-fit grids — always responsive without media queries */
.grid-auto-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-auto-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-auto-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* ── Reveal Animations ── */
.reveal-element {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.165, 0.84, 0.44, 1),
                transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.reveal-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* ── Buttons ── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: clamp(12px, 2vw, 16px) clamp(24px, 4vw, 36px);
    border-radius: 50px;
    font-weight: 700;
    font-family: inherit;
    font-size: clamp(0.9rem, 1.5vw, 1rem);
    text-decoration: none;
    transition: var(--gca-transition);
    cursor: pointer;
    border: none;
    white-space: nowrap;
    line-height: 1;
}

.btn-primary {
    background: linear-gradient(135deg, var(--gca-primary), var(--gca-primary-dark));
    color: var(--gca-secondary);
    box-shadow: 0 8px 20px rgba(var(--gca-primary-rgb), 0.25);
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(var(--gca-primary-rgb), 0.4);
    filter: brightness(1.08);
    color: var(--gca-secondary);
}

.btn-secondary {
    background: rgba(var(--gca-primary-rgb), 0.08);
    color: var(--gca-primary);
    border: 1.5px solid rgba(var(--gca-primary-rgb), 0.35);
}

.btn-secondary:hover {
    background: rgba(var(--gca-primary-rgb), 0.18);
    border-color: var(--gca-primary);
}

.btn-dark {
    background: var(--gca-secondary);
    color: var(--gca-primary);
    border: 1px solid rgba(var(--gca-primary-rgb), 0.2);
}

.btn-dark:hover {
    background: #1e140a;
    transform: translateY(-3px);
    box-shadow: var(--gca-shadow);
}

/* ── Text Utilities ── */
.text-center  { text-align: center; }
.text-left    { text-align: left; }
.text-right   { text-align: right; }
.text-primary { color: var(--gca-primary); }
.text-white   { color: var(--gca-white); }
.text-gray    { color: var(--gca-gray); }
.text-dark    { color: var(--gca-dark); }

/* ── Spacing Utilities ── */
.mt-auto { margin-top: auto; }
.mb-0    { margin-bottom: 0; }
.w-full  { width: 100%; }

/* ── Flex Utilities ── */
.flex        { display: flex; }
.flex-col    { flex-direction: column; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-wrap   { flex-wrap: wrap; }
.gap-sm      { gap: 12px; }
.gap-md      { gap: 24px; }
.gap-lg      { gap: 40px; }

/* ── Glass card utility ── */
.glass-card {
    background: var(--gca-glass-bg);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid var(--gca-glass-border);
    border-radius: var(--gca-radius);
    box-shadow: var(--gca-shadow-sm);
}

/* ── Badge / tag ── */
.badge {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 40px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    background: rgba(var(--gca-primary-rgb), 0.1);
    color: var(--gca-primary);
    border: 1px solid rgba(var(--gca-primary-rgb), 0.25);
}

/* ── Visibility Utilities ── */
.hide-on-mobile   { display: block; }
.show-on-mobile   { display: none; }
.desktop-only     { display: block; }

/* ── Focus / Accessibility ── */
:focus-visible {
    outline: 2px solid var(--gca-primary);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ── Smooth scrollbar ── */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--gca-secondary); }
::-webkit-scrollbar-thumb { background: var(--gca-primary-dark); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--gca-primary); }

/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */

/* Large Tablets / Small Desktops */
@media (max-width: 1100px) {
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* Tablets */
@media (max-width: 992px) {
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .desktop-only { display: none !important; }
}

/* Mobile */
@media (max-width: 768px) {
    .grid-2,
    .grid-3,
    .grid-4 { grid-template-columns: 1fr; }

    .section-title { margin-bottom: clamp(30px, 6vw, 50px); }

    /* Full-width buttons on mobile */
    .btn-mobile-full { width: 100%; justify-content: center; }

    .hide-on-mobile  { display: none !important; }
    .show-on-mobile  { display: block; }
}

/* Small phones */
@media (max-width: 480px) {
    html { font-size: 15px; }
    .container { padding: 0 16px; }
    .btn { font-size: 0.9rem; }
}

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