/*
Theme Name: Envy Town
Description: This is a child theme for Flatsome Theme - Redesigned with Home Rug Design System
Author: UX Themes
Template: flatsome
Version: 3.1.0
*/

/* ==========================================================================
   1. DESIGN TOKENS (HOME RUG SYSTEM)
   ========================================================================== */
:root {
  /* Typography Tokens */
  --font-family-primary: 'Cormorant Garamond', Georgia, serif;
  --font-family-stack: 'Cormorant Garamond', Georgia, serif;
  --font-size-base: 16px;
  --font-weight-base: 400;
  --font-line-height-base: 25.6px;

  /* Typography Scale */
  --font-size-xs: 10.5px;
  --font-size-sm: 11px;
  --font-size-md: 11.2px;
  --font-size-lg: 12px;
  --font-size-xl: 13px;
  --font-size-2xl: 13.6px;
  --font-size-3xl: 14px;
  --font-size-4xl: 14.4px;

  /* Color Palette Tokens */
  --color-text-primary: #ffffff;
  --color-text-secondary: #777777;
  --color-text-tertiary: #555555;
  --color-text-inverse: #334862;
  --color-surface-base: #000000;
  --color-surface-raised: #b78a45;
  --color-surface-strong: #c99b55;

  /* Semantic Derived Colors */
  --color-surface-card: #0d0d0d;
  --color-surface-elevated: #161616;
  --color-surface-input: #121212;
  --color-border-subtle: #242424;
  --color-border-medium: #3a3a3a;
  --color-border-gold: #b78a45;
  --color-focus-ring: #c99b55;
  --color-error: #e03131;
  --color-success: #2b8a3e;

  /* Spacing Scale Tokens */
  --space-1: 5px;
  --space-2: 6px;
  --space-3: 7px;
  --space-4: 8px;
  --space-5: 9px;
  --space-6: 9.6px;
  --space-7: 10px;
  --space-8: 13px;

  /* Radius Tokens */
  --radius-xs: 4px;
  --radius-sm: 5px;
  --radius-md: 6px;
  --radius-lg: 999px;

  /* Shadow & Depth Tokens */
  --shadow-1: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px inset;
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.5);
  --shadow-raised: 0 8px 30px rgba(0, 0, 0, 0.75);

  /* Motion Tokens */
  --motion-duration-instant: 200ms;
  --motion-duration-fast: 300ms;
  --motion-timing-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* ==========================================================================
   2. FOUNDATIONAL STOREFRONT STYLES
   ========================================================================== */
html,
body {
  background-color: var(--color-surface-base) !important;
  color: var(--color-text-primary) !important;
  font-family: var(--font-family-primary) !important;
  font-size: var(--font-size-base) !important;
  line-height: var(--font-line-height-base) !important;
  font-weight: var(--font-weight-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#wrapper,
#main,
.page-wrapper,
.content-area,
.site-content {
  color: var(--color-text-primary);
}

/* Typography Headings */
h1, h2, h3, h4, h5, h6,
.entry-title,
.product-title,
.widget-title {
  font-family: var(--font-family-primary) !important;
  color: var(--color-text-primary) !important;
  font-weight: 500;
  letter-spacing: 0.03em;
}

h1 { font-size: 2.2rem; line-height: 1.25; }
h2 { font-size: 1.8rem; line-height: 1.3; }
h3 { font-size: 1.4rem; line-height: 1.35; }
h4 { font-size: var(--font-size-4xl); line-height: 1.4; }
h5 { font-size: var(--font-size-3xl); line-height: 1.4; }
h6 { font-size: var(--font-size-2xl); line-height: 1.4; }

p, li, span, label {
  color: inherit;
}

/* Selection Highlight */
::selection {
  background-color: var(--color-surface-raised);
  color: var(--color-text-primary);
}

::-moz-selection {
  background-color: var(--color-surface-raised);
  color: var(--color-text-primary);
}

/* ==========================================================================
   3. ACCESSIBILITY RULES (WCAG 2.2 AA)
   ========================================================================== */
/* Keyboard Focus-Visible: Guaranteed 3:1+ Contrast & 2px outline */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-focus-ring) !important;
  outline-offset: 2px !important;
}

/* Target Size Minimum Safeguard */
a, button, input[type="button"], input[type="submit"] {
  min-height: 24px;
  min-width: 24px;
}

/* Skip to Content Link */
.skip-link {
  position: absolute;
  top: -999px;
  left: 10px;
  background: var(--color-surface-raised);
  color: var(--color-text-primary);
  padding: var(--space-4) var(--space-7);
  border-radius: var(--radius-xs);
  z-index: 999999;
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus {
  top: 10px;
  outline: 2px solid var(--color-text-primary);
}

/* Base Link Behavior */
a {
  color: var(--color-surface-raised);
  transition: color var(--motion-duration-instant) var(--motion-timing-standard);
  text-decoration: none;
}

a:hover {
  color: var(--color-surface-strong);
}

/* Global Container Dark Overrides for Flatsome */
.header-wrapper,
.header,
.top-bar,
.footer-wrapper {
  background-color: var(--color-surface-base) !important;
  border-color: var(--color-border-subtle) !important;
}

@media only screen and (max-width: 48em) {
  /* Mobile Specific Refinements */
  body {
    font-size: 15px !important;
  }
}