/* css/base.css – Reset, Variables, and Typography (Do not edit per project once set) */

/* CSS Variables for Ember & Grill */
:root {
  /* Brand Colours */
  --color-primary: #1e1a17;       /* Charcoal */
  --color-secondary: #c4622d;     /* Ember Orange */
  --color-bg: #faf8f5;            /* Warm White */
  --color-bg-alt: #f0ebe3;        /* Stone */
  --color-text: #1e1a17;          /* Near Black */
  --color-text-muted: #7a7169;    /* Warm Grey */
  --color-border: #e4ddd4;        /* Soft Sand */
  
  /* Typography Settings */
  --font-heading: 'Cormorant Garamond', serif;
  --font-body: 'Inter', sans-serif;
  
  /* Standard Spacing (SA Standard 8px Grid) */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-xxl: 64px;
  
  /* Accessibility */
  --focus-outline: 2px solid var(--color-secondary);
}

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
  width: 100%;
  overflow-x: hidden;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  width: 100%;
  overflow-x: hidden;
}

/* Typography Scale */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.1;
  color: var(--color-primary);
}

h1 { font-size: clamp(1.75rem, 6vw, 3.5rem); margin-bottom: var(--space-md); }
h2 { font-size: clamp(1.5rem, 5vw, 2.5rem); margin-bottom: var(--space-md); }
h3 { font-size: 1.5rem; margin-bottom: var(--space-sm); }
h4 { font-size: 1.125rem; margin-bottom: var(--space-sm); }

p { margin-bottom: var(--space-md); }

/* Editorial Italic Variants */
.italic { font-style: italic; font-weight: 400; }

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease;
}

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

button, .btn {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

/* Accessibility Skip Link */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--color-secondary);
  color: #fff;
  padding: var(--space-sm);
  z-index: 1000;
}

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

/* Mobile Touch Optimization */
@media (max-width: 767px) {
  /* Improve touch target sizes */
  button, .btn, a {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* Better button sizing on mobile */
  .btn {
    padding: var(--space-sm) var(--space-md);
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Better input sizing on mobile */
  input, textarea, select {
    min-height: 44px;
    font-size: 16px; /* Prevents zoom on iOS */
  }
  
  /* Optimize for safe area on notched devices */
  body {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }
}