/* =========================================
   COMISI — BASE DESIGN SYSTEM
   "Merakyat Gold Kalem"
   ========================================= */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

:root {
    /* === GOLD PALETTE === */
    --gold-deep:    #9A7328;
    --gold-main:    #C89B3C;
    --gold-warm:    #DFAE52;
    --gold-light:   #F0CD80;
    --gold-pale:    #FDF4E3;
    --gold-glow:    rgba(200, 155, 60, 0.18);

    /* === SURFACE === */
    --bg-body:      #F2EBE0;
    --bg-card:      #FFFFFF;
    --bg-input:     #FAF6EF;
    --bg-bubble-partner: #FFFFFF;
    --bg-overlay:   rgba(28, 20, 8, 0.55);

    /* === TEXT === */
    --text-dark:    #1C1409;
    --text-main:    #3B2D14;
    --text-sub:     #7A6A50;
    --text-hint:    #B5A48D;
    --text-on-gold: #1C1409;

    /* === BORDER === */
    --border-soft:  #EDE3D0;
    --border-warm:  #D4C4A0;

    /* === SEMANTIC === */
    --success:      #28A063;
    --danger:       #D94040;
    --info:         #3B8EC9;

    /* === SHADOWS === */
    --shadow-xs:    0 2px 8px rgba(28, 20, 8, 0.06);
    --shadow-sm:    0 4px 16px rgba(28, 20, 8, 0.08);
    --shadow-md:    0 8px 28px rgba(28, 20, 8, 0.12);
    --shadow-gold:  0 6px 24px rgba(200, 155, 60, 0.28);

    /* === RADIUS === */
    --r-sm:  10px;
    --r-md:  16px;
    --r-lg:  24px;
    --r-xl:  32px;
    --r-pill:50px;

    /* === TYPOGRAPHY === */
    --font-display: 'Plus Jakarta Sans', sans-serif;
    --font-body:    'Plus Jakarta Sans', sans-serif;

    /* Compat aliases */
    --primary:          var(--gold-main);
    --primary-text:     var(--text-on-gold);
    --bg-modal:         var(--bg-card);
    --border:           var(--border-soft);
    --text-muted-var:   var(--text-sub);
    --shadow-soft:      var(--shadow-sm);
    --radius-xl:        var(--r-lg);
    --radius-l:         var(--r-md);
    --radius-pill:      var(--r-pill);
    --primary-soft:     var(--gold-pale);
    --primary-dark:     var(--gold-deep);
}

/* === DARK THEME === */
[data-theme="dark"] {
    --bg-body:      #0E0B06;
    --bg-card:      #1A1508;
    --bg-input:     #241C0C;
    --bg-bubble-partner: #241C0C;
    --bg-modal:     #1A1508;
    --text-dark:    #F5ECD8;
    --text-main:    #E8D9BB;
    --text-sub:     #9A8870;
    --text-hint:    #5A4E3A;
    --border-soft:  #2E2412;
    --border-warm:  #3D3020;
    --shadow-sm:    0 4px 16px rgba(0,0,0,0.4);
    --shadow-md:    0 8px 28px rgba(0,0,0,0.5);
    --border:       #2E2412;
    --bg-overlay:   rgba(0,0,0,0.72);
}

/* === GLOBAL RESET === */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    height: 100%;
    margin: 0; padding: 0;
    overflow: hidden;
    background-color: var(--bg-body);
    font-family: var(--font-body);
    color: var(--text-main);
    -webkit-font-smoothing: antialiased;
    transition: background-color 0.4s ease;
}

/* === UTILITY === */
.d-none { display: none !important; }
.cursor-pointer { cursor: pointer; }
.font-display { font-family: var(--font-display); }

/* === KEYFRAMES === */
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInScale {
    from { opacity: 0; transform: scale(0.94); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes slideUp {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);   opacity: 1; }
}
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-8px); }
}
@keyframes pulseGold {
    0%, 100% { box-shadow: 0 0 0 0 rgba(200,155,60,0.5); }
    50%       { box-shadow: 0 0 0 12px rgba(200,155,60,0); }
}
@keyframes shimmer {
    0%   { background-position: -200% center; }
    100% { background-position:  200% center; }
}
@keyframes spin {
    to { transform: rotate(360deg); }
}
@keyframes blink {
    0%,100% { opacity: 1; }
    50%      { opacity: 0.4; }
}
@keyframes rippleWave {
    0%   { transform: translate(-50%,-50%) scale(0); opacity: 0.7; }
    100% { transform: translate(-50%,-50%) scale(4); opacity: 0; }
}
@keyframes hookCast {
    0%   { top: -80px; opacity: 0; transform: rotate(-15deg); }
    60%  { top: 55%;   opacity: 1; transform: rotate(8deg); }
    100% { top: 48%;   transform: rotate(0deg); }
}
@keyframes hookBob {
    0%   { transform: translateY(0) rotate(0deg); }
    100% { transform: translateY(-14px) rotate(4deg); }
}
@keyframes nengFloat {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    50%       { transform: translateY(-12px) rotate(1deg); }
}
@keyframes haloGlow {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50%       { opacity: 1; transform: scale(1.06); }
}
@keyframes stagger1 { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }