/* --------------------------------------------------
GLOBAL DESIGN VARIABLES
Used across the entire site for colors, typography,
spacing, radius, and shadows.

Designers should update these values when creating
a new brand theme instead of overriding styles
throughout the site.
-------------------------------------------------- */

:root {
  /* Primary text color used for body copy */
  --pc-ink: #4A4E54;

  /* Secondary text color used for subtle headings,
     metadata, and small UI text */
  --pc-ink-soft: #3A4D39;

  /* Main background color used on the site */
  --pc-canvas: #F9F7F2;

  /* Default white card or surface background */
  --pc-surface: #FFFFFF;

  /* Primary call-to-action color (buttons, links) */
  --pc-action: #B87333;

  /* Hover color for CTA buttons and links */
  --pc-action-hover: #9a5f2b;

  /* Accent color used sparingly for highlights */
  --pc-accent: #A8E64F;

  /* Darker accent version used for gradients or menus */
  --pc-accent-dark: #628530;

  /* Default border color for cards and UI elements */
  --pc-border: rgba(74, 78, 84, 0.12);


  /* --------------------------------------------------
  TYPOGRAPHY VARIABLES
  Define global fonts used throughout the site
  -------------------------------------------------- */

  /* Primary heading font */
  --pc-font-heading: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Body copy font */
  --pc-font-body: "Lora", Georgia, serif;

  /* Default body font size */
  --pc-text-base: 18px;

  /* Line height for paragraph text */
  --pc-line-body: 1.7;

  /* Line height for headings */
  --pc-line-heading: 1.15;


  /* --------------------------------------------------
  LAYOUT WIDTHS
  Used for consistent container widths
  -------------------------------------------------- */

  /* Standard content width */
  --pc-max-width: 1280px;

  /* Narrow container for readable text blocks */
  --pc-narrow-width: 900px;


  /* --------------------------------------------------
  SPACING SCALE
  Used to maintain consistent vertical rhythm
  -------------------------------------------------- */

  --pc-space-xs: 0.5rem;
  --pc-space-sm: 0.875rem;
  --pc-space-md: 1.25rem;
  --pc-space-lg: 2rem;
  --pc-space-xl: 3rem;
  --pc-space-2xl: 5rem;
  --pc-space-3xl: 7rem;


  /* --------------------------------------------------
  RADIUS SETTINGS
  Used for cards, inputs, and buttons
  -------------------------------------------------- */

  --pc-radius-sm: 4px;
  --pc-radius-md: 8px;
  --pc-radius-lg: 16px;
  --pc-radius-xl: 24px;

  /* Used for rounded buttons */
  --pc-radius-pill: 999px;


  /* --------------------------------------------------
  SHADOWS
  Used for cards and hover elevation
  -------------------------------------------------- */

  --pc-shadow-sm: 0 8px 20px rgba(0,0,0,0.06);
  --pc-shadow-md: 0 14px 32px rgba(0,0,0,0.10);


  /* --------------------------------------------------
  TRANSITION
  Used across interactive elements
  -------------------------------------------------- */

  --pc-transition: 0.25s ease;
}


/* --------------------------------------------------
GLOBAL BODY SETTINGS
Controls base typography and smoothing
-------------------------------------------------- */

body {
  margin: 0;
  padding: 0;
  background: var(--pc-canvas);
  color: var(--pc-ink);
  font-family: var(--pc-font-body);
  font-size: var(--pc-text-base);
  line-height: var(--pc-line-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}


/* --------------------------------------------------
IMAGE DEFAULTS
Ensures images scale properly within layouts
-------------------------------------------------- */

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


/* --------------------------------------------------
LINK DEFAULT STYLE
Applies to all standard links unless overridden
-------------------------------------------------- */

a {
  color: var(--pc-action);
  text-decoration: none;
  transition: color var(--pc-transition);
}

a:hover {
  color: var(--pc-action-hover);
}