/*
Theme Name: Etches
Theme URI: https://etches.me
Author: Etches Team
Author URI: https://etches.me
Description: A lightweight, SEO-optimized WooCommerce theme built for speed and performance. Perfect for modern online stores.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: etches
Tags: e-commerce, woocommerce, shop, lightweight, seo, fast, performance
*/

/*
 * CRITICAL CSS ONLY
 * Main styles are in assets/css/main.css
 * This file contains only theme metadata and critical above-the-fold CSS
 */

/* CSS Custom Properties (CSS Variables) - Warm Craft Theme */
:root {
  /* Warm Craft Color Palette */
  --color-primary: #C4A484;        /* Warm gold - primary CTA */
  --color-primary-dark: #B89C7D;   /* Darker warm gold */
  --color-secondary: #D7CAB8;      /* Soft beige accent */
  --color-accent: #C4A484;         /* Warm gold accent */
  --color-accent-light: #E6DDD3;   /* Very light warm accent */

  /* Neutral backgrounds */
  --color-background: #FFFFFF;     /* Pure white */
  --color-background-alt: #FAFAFA; /* Soft off-white */
  --color-background-warm: #F5F3EF; /* Warm off-white */
  --color-neutral: #E6E3DF;        /* Warm grey */

  /* Text colors */
  --color-text: #2B2B2B;           /* Almost black */
  --color-text-light: #6B6560;     /* Warm grey text */
  --color-text-muted: #9B8F85;     /* Muted warm text */

  /* UI colors */
  --color-border: #E6E3DF;         /* Warm grey border */
  --color-border-light: #F0EDE9;   /* Very light border */
  --color-error: #D47B6A;          /* Warm red */
  --color-success: #8FAA87;        /* Warm green */

  /* Typography - Warm Craft Fonts */
  --font-heading: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-decorative: 'Great Vibes', cursive;

  --font-size-base: 17px;          /* Slightly larger for better readability */
  --font-size-small: 0.875rem;     /* 14px */
  --font-size-large: 1.125rem;     /* 18px */
  --font-size-xl: 1.25rem;         /* 20px */

  --line-height-base: 1.7;         /* More spacious */
  --line-height-heading: 1.3;
  --line-height-tight: 1.15;

  /* Spacing - More generous for "negative space" */
  --spacing-xs: 0.5rem;            /* 8px */
  --spacing-sm: 0.75rem;           /* 12px */
  --spacing-md: 1.25rem;           /* 20px */
  --spacing-lg: 2rem;              /* 32px */
  --spacing-xl: 3rem;              /* 48px */
  --spacing-2xl: 4rem;             /* 64px */
  --spacing-3xl: 6rem;             /* 96px */
  --spacing-4xl: 8rem;             /* 128px */

  /* Layout */
  --container-max-width: 1280px;
  --content-max-width: 800px;      /* Wider for better readability */
  --border-radius: 0.25rem;        /* Subtle rounded corners */
  --border-radius-lg: 0.5rem;

  /* Transitions - Slower for elegant feel */
  --transition-fast: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 350ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Shadows - Soft and subtle */
  --shadow-sm: 0 1px 3px 0 rgba(43, 43, 43, 0.04);
  --shadow-md: 0 4px 12px -2px rgba(43, 43, 43, 0.08);
  --shadow-lg: 0 12px 24px -4px rgba(43, 43, 43, 0.12);
  --shadow-warm: 0 8px 16px -4px rgba(196, 164, 132, 0.15);
}

/* Critical Reset & Base Styles */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: var(--font-size-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text);
  background-color: var(--color-background-alt);
  overflow-x: hidden;
  font-weight: 400;
}

/* Headings use serif font */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 400;
  color: var(--color-text);
  line-height: var(--line-height-heading);
}

/* Skip to content link for accessibility */
.skip-link {
  position: absolute;
  top: -999px;
  left: -999px;
  background-color: var(--color-primary);
  color: white;
  padding: var(--spacing-sm) var(--spacing-md);
  text-decoration: none;
  z-index: 10000;
}

.skip-link:focus {
  top: 0;
  left: 0;
}

/* Screen reader only text */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}