/*
Theme Name: Scaracode Child Theme
Author: scaracode 
Author URI: https://scaracode.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Description: A modern, adaptable WordPress theme.
Template: scaracode 
Version: 1.0.0
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: custom-menu, custom-logo, featured-images, rtl-language-support, translation-ready
Text Domain: scaracode-child
Domain Path:  /languages
*/

:root {
  --primary: #3a3a3a;
  --primary-foreground: #ffffff;
  --primary-hover: #2b2b2b; 
  
  --secondary: #f4f4f5;
  --secondary-foreground: #18181b;
  
  --destructive: #ef4444;
  --destructive-foreground: #ffffff;
  
  --muted: #f4f4f5;
  --muted-foreground: #71717a;

  --text-muted: #8a7663;
  
  --accent: #f4f4f5;
  --accent-foreground: #18181b;

  --terracotta: #c18266;
  --terracotta-hover: #a87055;
  --bg-cream: #faf8f4;      
  --bg-beige: #ede5db;      
  --text-brown-muted: #8a7663; 
  
  
  --border: #e4e4e7;
  --input: #e4e4e7;
  --ring: #3a3a3a; 
  
  --radius: 0.375rem; 
  --radius-xl: 1rem;

  --shadow-sm: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-hover: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  --bs-body-font-family: Lato, Noto Sans Hebrew, -apple-system, sans-serif;
}

.btn-ui {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem; 
  white-space: nowrap;
  border-radius: var(--radius);
  font-size: 0.875rem; 
  font-weight: 500; 
  line-height: 1.25;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  border: 1px solid transparent; 
  outline: none;
  
  background: none;
  padding: 0;
}

.btn-ui:focus-visible {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ring); 
}

.btn-ui:disabled, 
.btn-ui.disabled {
  pointer-events: none;
  opacity: 0.5;
}

.btn-ui-default {
  background-color: var(--primary);
  color: var(--primary-foreground);
}

.btn-ui-default:hover {
  background-color: var(--primary-hover);
  color: var(--primary-foreground);
}

.btn-ui-outline {
  border-color: var(--input);
  background-color: transparent;
  color: inherit; /* text-foreground */
}
.btn-ui-outline:hover {
  background-color: var(--accent);
  color: var(--accent-foreground);
}

.btn-ui-ghost {
  background-color: transparent;
  color: inherit;
}
.btn-ui-ghost:hover {
  background-color: var(--accent);
  color: var(--accent-foreground);
}

.btn-ui-secondary {
  background-color: var(--secondary);
  color: var(--secondary-foreground);
}
.btn-ui-secondary:hover {
  opacity: 0.8;
}

.btn-ui-md {
  height: 2.25rem; 
  padding-left: 1rem;
  padding-right: 1rem;
}

.btn-ui-sm {
  height: 2rem; 
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: 0.75rem;
}

.btn-ui-lg {
  height: 2.5rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  font-size: 1rem;
}

.btn-ui-icon {
  height: 2.25rem;
  width: 2.25rem;
  padding: 0;
}