@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;700&display=swap');

:root {
    /* Brand: Gold */
    --gold: #C9A84C;
    --gold-light: #F5EDD3;
    --gold-dark: #8B6914;
    --gold-alpha-08: rgba(201,168,76,.08);
    --gold-alpha-10: rgba(201,168,76,.10);
    --gold-alpha-15: rgba(201,168,76,.15);
    --gold-alpha-18: rgba(201,168,76,.18);
    --gold-alpha-20: rgba(201,168,76,.20);
    --gold-alpha-25: rgba(201,168,76,.25);
    --gold-alpha-30: rgba(201,168,76,.30);
    --gold-alpha-40: rgba(201,168,76,.40);
    --gold-light-alpha-55: rgba(245,237,211,.55);

    /* Brand: Navy */
    --navy: #1A2744;
    --navy-mid: #253660;
    --navy-deep: #1E2E52;
    --navy-hover: #2A3A60;
    --navy-light: #E8ECFA;

    /* Neutral: Slate */
    --slate: #4A5568;
    --slate-mid: #9AA5B4;
    --slate-light: #F7F9FC;

    /* Semantic: Green */
    --green: #1A6B3C;
    --green-light: #E6F4ED;
    --green-dark: #14532D;

    /* Semantic: Red */
    --red: #B91C1C;
    --red-light: #FEE2E2;
    --red-dark: #A93226;

    /* Semantic: Amber */
    --amber: #92400E;
    --amber-light: #FEF3C7;
    --amber-dark: rgba(139,105,20,.4);
    --amber-alpha-20: rgba(139,105,20,.2);

    /* Semantic: Blue */
    --blue: #1E40AF;
    --blue-light: #DBEAFE;

    /* Semantic: Purple */
    --purple: #5B21B6;
    --purple-light: #EDE9FE;

    /* Base */
    --white: #FFFFFF;

    /* White alpha variants */
    --white-alpha-06: rgba(255,255,255,.06);
    --white-alpha-07: rgba(255,255,255,.07);
    --white-alpha-08: rgba(255,255,255,.08);
    --white-alpha-10: rgba(255,255,255,.10);
    --white-alpha-12: rgba(255,255,255,.12);
    --white-alpha-18: rgba(255,255,255,.18);
    --white-alpha-20: rgba(255,255,255,.20);
    --white-alpha-22: rgba(255,255,255,.22);
    --white-alpha-30: rgba(255,255,255,.30);
    --white-alpha-40: rgba(255,255,255,.40);
    --white-alpha-50: rgba(255,255,255,.50);
    --white-alpha-55: rgba(255,255,255,.55);
    --white-alpha-60: rgba(255,255,255,.60);
    --white-alpha-65: rgba(255,255,255,.65);
    --white-alpha-70: rgba(255,255,255,.70);
    --white-alpha-75: rgba(255,255,255,.75);
    --white-alpha-78: rgba(255,255,255,.78);
    --white-alpha-80: rgba(255,255,255,.80);
    --white-alpha-85: rgba(255,255,255,.85);
    --white-alpha-90: rgba(255,255,255,.90);

    /* Navy alpha variants */
    --navy-alpha-06: rgba(26,39,68,.06);
    --navy-alpha-08: rgba(26,39,68,.08);
    --navy-alpha-22: rgba(26,39,68,.22);
    --navy-alpha-25: rgba(26,39,68,.25);
    --navy-alpha-35: rgba(26,39,68,.35);
    --navy-alpha-45: rgba(26,39,68,.45);
    --navy-alpha-55: rgba(26,39,68,.55);

    /* Black / red alpha variants (shadows) */
    --red-pink-alpha-20: rgba(255,80,80,.20);
    --black-alpha-18: rgba(0,0,0,.18);
    --black-alpha-22: rgba(0,0,0,.22);
    --black-alpha-45: rgba(0,0,0,.45);
    --black-alpha-50: rgba(0,0,0,.50);
    --black-alpha-70: rgba(0,0,0,.70);

    /* Overlay / Shadow */
    --overlay-modal: rgba(10,18,40,.55);
    --shadow-modal: rgba(10,18,40,.28);

    /* Dark theme overrides (applied via body.theme-dark) */
    --dark-bg: #0F172A;
    --dark-surface: #1E293B;
    --dark-navy: #E2E8F0;
    --dark-navy-mid: #CBD5E1;
    --dark-slate: #94A3B8;
    --dark-gold: #F59E0B;
    --dark-gold-light: #292400;
    --dark-gold-dark: #FCD34D;
    --dark-blue-light: #1E3A5F;
    --dark-green-light: #0D3320;
    --dark-red-light: #3B0D0D;
    --dark-amber-light: #3B2000;
    --dark-purple-light: #2D1B5E;

    /* Extended UI colors */
    --teal: #0369A1;
    --teal-light: #E0F2FE;
    --emerald: #065F46;
    --emerald-light: #D1FAE5;
    --gray-cool: #374151;
    --gray-cool-light: #F3F4F6;
    --red-deeper: #991B1B;
    --red-bright: #FF6060;

    /* Structure */
    --border: rgba(26,39,68,0.12);
    --border-light: rgba(255,255,255,0.12);
    --radius: 12px;

    /* Typography */
    --font-heading: 'DM Serif Display', serif;
    --font-body: 'DM Sans', sans-serif;
    --font-mono: 'Courier New', Courier, monospace;
    --font-mono-jetbrains: 'JetBrains Mono', monospace;

    /* Theme tokens */
    --xbg: #1A2744;
    --bg: aliceblue; /* placeholder — replace with production value */
    --surface: #253660;
    --surface2: #1E2E52;
    --accent: #C9A84C;
    --accent2: #F5EDD3;
    --accent-dark: #8B6914;
    --text: #F5EDD3;
    --text-dim: rgba(245,237,211,0.55);
}

/* Style the main button */
.like-btn {
    position: relative;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: bold;
    color: white;
    background-color: #007bff;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    overflow: visible; /* Allows the thumbs-up to float outside the button boundaries */
    transition: transform 0.1s ease;
}

.like-btn:active {
    transform: scale(0.95);
}

/* Style the floating thumbs-up */
.floating-thumbs {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    pointer-events: none; /* Prevents the floating icon from interfering with clicks */
    animation: floatUpAndFade 2s ease-out forwards;
}

/* The animation that moves the thumb up/down slightly while floating upwards */
@keyframes floatUpAndFade {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) translateY(0) scale(1);
    }

    25% {
        /* Slight wobble/wave effect on the way up */
        transform: translate(-50%, -50%) translateY(-30px) translateX(5px) rotate(10deg);
    }

    50% {
        transform: translate(-50%, -50%) translateY(-60px) translateX(-5px) rotate(-10deg);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) translateY(-120px) scale(1.2);
    }
}