/**
 * @file
 * CSS Custom Properties for Wares Point Theme.
 * Official Paletton color scheme and brand tokens.
 * Spatially expansive container width for a welcoming community experience.
 */

:root {
  /* Official Wares Point Color Palette */
  --wp-cream-light: #FFF2E0;
  --wp-beige-light: #EED6B5;
  --wp-sand-primary: #C8A97E;
  --wp-tan-dark: #A88554;
  --wp-brown-deep: #896432;

  /* Supporting Neutrals */
  --wp-text: #24211E;
  --wp-text-muted: #6B6259;
  --wp-white: #FFFFFF;
  --wp-border-soft: #DECDB5;

  /* Semantic UI tokens */
  --wp-bg-body: var(--wp-cream-light, #FFF2E0);
  --wp-bg-surface: var(--wp-cream-light, #FFF2E0);
  --wp-bg-subtle: #FAF7F2;
  --wp-color-primary: var(--wp-sand-primary);
  --wp-color-accent: var(--wp-tan-dark);
  --wp-color-heading: var(--wp-brown-deep);

  /* Link interaction states */
  --wp-color-link: var(--wp-tan-dark);
  --wp-color-link-hover: var(--wp-brown-deep);
  --wp-color-link-active: #6B4D24;
  --wp-color-link-visited: #705530;

  /* Status Tokens */
  --wp-status-success: #2E7D32;
  --wp-status-warning: #ED6C02;
  --wp-status-error: #D32F2F;
  --wp-status-info: #0288D1;

  /* Typography */
  --wp-font-heading: 'Merriweather', 'Lora', Georgia, 'Times New Roman', serif;
  --wp-font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --wp-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --wp-font-page-title: var(--wp-font-heading);
  --wp-font-block-title: var(--wp-font-heading);
  --wp-font-navigation: var(--wp-font-body);
  --wp-font-content: var(--wp-font-body);
  --wp-font-forum-title: var(--wp-font-heading);
  --wp-font-forum-body: var(--wp-font-body);
  --wp-font-ui: var(--wp-font-body);
  --wp-font-metadata: var(--wp-font-body);

  --wp-font-size-body: 1.0625rem;
  --wp-line-height-body: 1.65;
  --wp-font-weight-heading: 700;
  --wp-font-weight-block-title: 700;
  --wp-font-weight-navigation: 600;

  --wp-line-height-tight: 1.25;
  --wp-line-height-normal: 1.65;
  --wp-line-height-loose: 1.85;

  /* Spacing (Halved for compact, tighter layout) */
  --wp-space-xs: 0.125rem; /* 2px */
  --wp-space-sm: 0.25rem;  /* 4px */
  --wp-space-md: 0.5rem;   /* 8px */
  --wp-space-lg: 0.75rem;  /* 12px */
  --wp-space-xl: 1rem;     /* 16px */
  --wp-space-2xl: 1.5rem;  /* 24px */
  --wp-space-3xl: 2.25rem; /* 36px */

  /* Borders & Radius */
  --wp-radius-sm: 4px;
  --wp-radius-md: 6px;
  --wp-radius-lg: 8px;
  --wp-radius-full: 9999px;
  --wp-border-width: 1px;

  /* Shadows — ultra-subtle for clean faint-border aesthetic */
  --wp-shadow-sm: 0 1px 3px rgba(36, 33, 30, 0.04);
  --wp-shadow-md: 0 4px 12px rgba(36, 33, 30, 0.06);
  --wp-shadow-lg: 0 10px 24px rgba(36, 33, 30, 0.08);

  /* Official Width Variables */
  --wp-width-compact: 1120px;
  --wp-width-standard: 1280px;
  --wp-width-wide: 1536px;
  --wp-page-gutter: clamp(0.5rem, 1.5vw, 1.5rem);

  /* Sidebar Dimensions & Layout Grid Tokens */
  --wp-sidebar-width-single: 300px;
  --wp-sidebar-width-dual: 260px;
  --wp-layout-gap: 24px;

  /* Layout dimensions */
  --wp-selected-width: var(--wp-width-standard);
  --wp-max-width-content: var(--wp-selected-width);
  --wp-max-width-text: 75ch; /* 65-80 characters per line for long-form reading */
  --wp-header-height: 84px;

  /* Transitions */
  --wp-transition-fast: 0.15s ease-in-out;
  --wp-transition-normal: 0.25s ease-in-out;
}

/* Layout width modifiers for container and sidebar grid tokens */
body.layout-width-compact {
  --wp-selected-width: var(--wp-width-compact);
  --wp-sidebar-width-single: 270px;
  --wp-sidebar-width-dual: 220px;
  --wp-layout-gap: 20px;
}

body.layout-width-wide {
  --wp-selected-width: var(--wp-width-wide);
  --wp-sidebar-width-single: 320px;
  --wp-sidebar-width-dual: 280px;
  --wp-layout-gap: 28px;
}