/**
 * Artful Interiors Design System
 * Colors & Typography
 */

/* ============================================
   FONTS
   ============================================ */

@font-face {
  font-family: 'Coterie';
  src: url('fonts/coterie.woff2') format('woff2'),
       url('fonts/Coterie.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Alta';
  src: url('fonts/alta-regular.woff2') format('woff2'),
       url('fonts/alta-regular-updated.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Crimson Pro & Inter loaded via fonts.css (self-hosted) */

/* ============================================
   BASE COLOR TOKENS
   ============================================ */

:root {
  /* Primary Palette */
  --color-charcoal: #373534;
  --color-off-white: #F1ECEA;
  --color-ochre-beige: #BEB19E;
  --color-sage-green: #A8B5A1;
  
  /* Foreground colors */
  --fg-primary: var(--color-charcoal);
  --fg-secondary: #5A5856;
  --fg-tertiary: #8A8785;
  --fg-muted: #A39F9D;
  --fg-inverse: var(--color-off-white);
  
  /* Background colors */
  --bg-primary: var(--color-off-white);
  --bg-secondary: #FEFDFB;
  --bg-tertiary: #E8E4E1;
  --bg-inverse: var(--color-charcoal);
  --bg-accent: var(--color-ochre-beige);
  --bg-accent-subtle: #D9D2C6;
  --bg-sage: var(--color-sage-green);
  --bg-sage-subtle: #E8EBE6;
  
  /* Border colors */
  --border-subtle: #E0DCD9;
  --border-default: #C9C4C0;
  --border-strong: var(--color-charcoal);
  
  /* Shadow system - soft, subtle */
  --shadow-subtle: 0 1px 3px rgba(55, 53, 52, 0.08);
  --shadow-default: 0 2px 8px rgba(55, 53, 52, 0.12);
  --shadow-elevated: 0 4px 16px rgba(55, 53, 52, 0.16);
  
  /* Spacing scale - generous, editorial */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  
  /* Border radius - minimal, soft */
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
  
  /* Typography scale */
  --font-family-display: 'Alta', 'Crimson Pro', Georgia, serif;
  --font-family-body: 'Crimson Pro', Georgia, serif;
  --font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 32px;
  --font-size-4xl: 40px;
  --font-size-5xl: 48px;
  --font-size-6xl: 64px;
  --font-size-7xl: 80px;
  
  --font-weight-extralight: 200;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  
  --line-height-tight: 1.1;
  --line-height-snug: 1.3;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.7;
  --line-height-loose: 2;
  
  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.05em;
  --letter-spacing-wider: 0.1em;
  --letter-spacing-widest: 0.15em;
}

/* ============================================
   SEMANTIC TYPOGRAPHY STYLES
   ============================================ */

/* Display headings - using Alta */
.display-1,
h1.display {
  font-family: var(--font-family-display);
  font-size: var(--font-size-7xl);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-normal);
  color: var(--fg-primary);
}

.display-2 {
  font-family: var(--font-family-display);
  font-size: var(--font-size-6xl);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-normal);
  color: var(--fg-primary);
}

.display-3 {
  font-family: var(--font-family-display);
  font-size: var(--font-size-5xl);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-snug);
  letter-spacing: var(--letter-spacing-normal);
  color: var(--fg-primary);
}

/* Headings - using Alta for H1-H2, Cormorant for H3 */
h1 {
  font-family: var(--font-family-display);
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-snug);
  letter-spacing: var(--letter-spacing-normal);
  color: var(--fg-primary);
}

h2 {
  font-family: var(--font-family-display);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-snug);
  letter-spacing: var(--letter-spacing-normal);
  color: var(--fg-primary);
}

h3 {
  font-family: var(--font-family-body);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-normal);
  color: var(--fg-primary);
}

h4 {
  font-family: var(--font-family-body);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-normal);
  color: var(--fg-primary);
}

h5 {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--fg-secondary);
}

h6 {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--fg-tertiary);
}

/* Body text */
p,
.body-lg {
  font-family: var(--font-family-body);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-extralight);
  line-height: var(--line-height-loose);
  letter-spacing: 0.01em;
  color: var(--fg-primary);
}

.body-base {
  font-family: var(--font-family-body);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-extralight);
  line-height: var(--line-height-relaxed);
  letter-spacing: 0.01em;
  color: var(--fg-primary);
}

.body-sm {
  font-family: var(--font-family-body);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-normal);
  letter-spacing: 0.01em;
  color: var(--fg-secondary);
}

/* Sans-serif utility text */
.sans-lg {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-normal);
  letter-spacing: -0.01em;
  color: var(--fg-primary);
}

.sans-base {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-normal);
  letter-spacing: -0.01em;
  color: var(--fg-primary);
}

.sans-sm {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-normal);
  letter-spacing: -0.005em;
  color: var(--fg-secondary);
}

/* Label styles */
.label {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-widest);
  text-transform: uppercase;
  color: var(--fg-tertiary);
}

/* Caption */
.caption {
  font-family: var(--font-family-body);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-extralight);
  line-height: var(--line-height-normal);
  letter-spacing: 0.01em;
  font-style: italic;
  color: var(--fg-muted);
}