/* Nexora 2 - Minimalist Japandi & Organic Design Tokens */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* Typography */
  --font-heading: 'Cormorant Garamond', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Color Palette - Mindful Japandi & Organic Wellness */
  --bg-deep: #f5f2ec;          /* Soft Sandstone - page backdrop borders */
  --bg-main: #fbfbfa;          /* Pure Linen White - main canvas */
  --bg-card: #ffffff;          /* Clean White Card */
  --bg-card-hover: #faf9f6;    /* Very Soft Warm Cream */
  --bg-input: #fdfdfd;         /* Input Box Background */

  /* Text Tones - Natural Charcoal (Soft contrast, very professional) */
  --text-primary: #1c1e21;     /* Warm Charcoal - headers */
  --text-secondary: #565e69;   /* Muted Slate - body copy */
  --text-muted: #8c95a3;       /* Pebble Grey - captions, timestamps */
  --text-light: #ffffff;       /* White - contrast text */

  /* Earthy Branding Accents */
  --color-primary: #707a5f;         /* Muted Sage Green - buttons, primary focus */
  --color-primary-rgb: 112, 122, 95;
  --color-primary-hover: #5d6650;   /* Deep Olive-Sage - button hover */
  --color-accent: #c39178;          /* Natural Terracotta/Clay - alerts, prices, ratings */
  --color-gold: #c9a770;            /* Warm Bronze - secondary actions, stars */
  
  /* State Feedbacks */
  --color-success: #81a483;   /* Pastel Olive - checkout complete */
  --color-error: #c97d72;     /* Dusty Rose - inputs, invalid */
  --color-warning: #dbaf71;   /* Ochre - warnings */

  /* Structural Details - Very clean, slight rounded edges */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --border-radius-full: 9999px;

  /* Natural Transitions */
  --transition-fast: 0.15s ease-out;
  --transition-normal: 0.25s ease-out;
  --transition-slow: 0.4s ease-out;

  /* Clean minimal shadows (no neon, light elevation) */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(28, 30, 33, 0.04), 0 2px 4px rgba(28, 30, 33, 0.02);
  --shadow-lg: 0 12px 30px rgba(28, 30, 33, 0.06), 0 4px 8px rgba(28, 30, 33, 0.03);
  --border-clean: 1px solid #e6e1d8;
  --border-clean-hover: 1px solid #c9c2b3;
  
  /* Layout Sizing */
  --max-width-container: 1140px;
  --max-width-narrow: 760px;
  --header-height: 90px;
}

/* Structural Resets */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--bg-main);
  color: var(--text-secondary);
  font-family: var(--font-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--text-primary);
  font-weight: 500;
  line-height: 1.2;
}

a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition-fast);
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
}

img, video, svg {
  max-width: 100%;
  height: auto;
  display: block;
}