:root {
      --coffee-dark: #2B1810;
      --coffee-espresso: #1A0F0A;
      --coffee-roast: #6F4E37;
      --coffee-caramel: #C68B59;
      --coffee-crema: #E7D7C1;
      --coffee-cream: #FBF8F3;
    }

    body {
      font-family: 'Plus Jakarta Sans', sans-serif;
      background-color: var(--coffee-dark);
      color: #333;
      min-height: 100vh;
    }

    .font-serif {
      font-family: 'Playfair Display', serif;
    }

    .login-container {
      min-height: 100vh;
    }

    /* Left Brand Showcase Card */
    .coffee-hero-side {
      background: linear-gradient(145deg, rgba(26, 15, 10, 0.88), rgba(43, 24, 16, 0.75)),
                  url('https://images.unsplash.com/photo-1447933601403-0c6688de566e?q=80&w=1200&auto=format&fit=crop') center/cover no-repeat;
      position: relative;
    }

    .brand-accent {
      color: var(--coffee-caramel);
    }

    .glass-pill {
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(8px);
      border: 1px solid rgba(255, 255, 255, 0.15);
    }

    /* Form Styles */
    .form-side {
      background-color: var(--coffee-cream);
    }

    .form-control {
      border: 1.5px solid #E2D9D0;
      padding: 0.75rem 1rem;
      border-radius: 10px;
      font-size: 0.95rem;
      transition: all 0.2s ease-in-out;
    }

    .form-control:focus {
      border-color: var(--coffee-caramel);
      box-shadow: 0 0 0 4px rgba(198, 139, 89, 0.15);
      background-color: #fff;
    }

    .input-group-text {
      background-color: #fff;
      border: 1.5px solid #E2D9D0;
      border-right: none;
      border-radius: 10px 0 0 10px;
      color: var(--coffee-roast);
    }

    .input-group .form-control {
      border-left: none;
      border-radius: 0 10px 10px 0;
    }

    .input-group:focus-within .input-group-text {
      border-color: var(--coffee-caramel);
    }

    /* Buttons */
    .btn-coffee {
      background-color: var(--coffee-dark);
      color: #fff;
      padding: 0.8rem 1.5rem;
      font-weight: 600;
      border-radius: 10px;
      letter-spacing: 0.3px;
      transition: all 0.3s ease;
      border: none;
    }

    .btn-coffee:hover {
      background-color: var(--coffee-espresso);
      color: var(--coffee-crema);
      transform: translateY(-1px);
      box-shadow: 0 8px 20px rgba(43, 24, 16, 0.25);
    }

    .btn-social {
      border: 1.5px solid #E2D9D0;
      background: #fff;
      border-radius: 10px;
      padding: 0.65rem;
      font-weight: 500;
      color: #4A3E39;
      transition: all 0.2s;
    }

    .btn-social:hover {
      background: #F2ECE4;
      border-color: var(--coffee-caramel);
    }