/* Custom styles and overrides for Exaggerated Minimalism */

:root {
  --color-primary: #166534;
  /* green-800 */
  --color-primary-hover: #14532d;
  /* green-900 */
  --color-secondary: #facc15;
  /* yellow-400 */
  --color-accent: #facc15;
  /* yellow-400 */
  --color-background: #f0fdf4;
  /* green-50 */
  --color-text: #14532d;
  /* green-900 */
  --color-leaf-light: #166534;
  /* green-300 */
  --color-leaf-lighter: #166534;
  /* green-200 */
  --color-leaf-hover: #facc15;
  /* yellow-400 */
  /* green-400 */
}

/* Typography Overrides */
.exaggerated-text {
  font-size: clamp(4rem, 15vw, 10rem);
  line-height: 1;
}


/* Base Form Inputs */
.input {
  min-height: 44px;
  padding: 12px 16px;
  border: 1px solid var(--color-leaf-lighter);
  border-radius: 8px;
  font-size: 16px;
  transition: all 200ms ease;
  color: var(--color-text);
}

.input:focus {
  border-color: var(--color-secondary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
}

.input::placeholder {
  color: var(--color-leaf-light);
}

/* Buttons */
.btn-primary {
  background: var(--color-primary);
  color: var(--color-background);
  padding: 12px 24px;
  border-radius: 9999px;
  /* Pill shape for elegance */
  font-weight: 600;
  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  border: 1px solid transparent;
}

.btn-primary:hover {
  background: var(--color-primary-hover);
  box-shadow: 0 10px 15px -3px rgba(22, 101, 52, 0.3);
  transform: translateY(-2px);
}

.btn-primary:active {
  transform: translateY(0);
}

/* Custom Scrollbar for elegance */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: var(--color-background);
}

::-webkit-scrollbar-thumb {
  background: var(--color-leaf-light);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-leaf-hover);
}

/* Mobile UX Enhancements */
html {
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

body {
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

button,
a,
input,
textarea,
.card,
.transport-btn,
.interactive-element {
  touch-action: manipulation;
}

/* Hide scrollbar on mobile devices for cleaner look */
@media (max-width: 768px) {
  ::-webkit-scrollbar {
    display: none;
    width: 0px;
    background: transparent;
  }
}

/* Nền tranh giấy mỹ thuật (Fine art / Watercolor paper) */
.bg-fine-art {
  background-color: #f8f6f1;
  background-image:
    radial-gradient(circle at 10% 14%, rgba(108,117,93,0.2), transparent 24%), 
    radial-gradient(circle at 87% 12%, rgba(108,117,93,0.14), transparent 22%), 
    radial-gradient(circle at 78% 42%, rgba(144,153,128,0.12), transparent 18%), 
    radial-gradient(circle at 18% 72%, rgba(129,137,112,0.14), transparent 20%), 
    radial-gradient(circle at 88% 84%, rgba(108,117,93,0.12), transparent 24%), 
    linear-gradient(180deg, #f7f5ef 0%, #f3f1e9 48%, #f8f6f1 100%);
}