/*
 * HappyPetBond Design System
 * Three-layer token architecture: Primitive → Semantic → Component
 * ================================================================
 */

/* ================================================================
   LAYER 1: PRIMITIVE TOKENS — Raw values, never used directly
   ================================================================ */
:root {
  /* Color Primitives */
  --primitive-amber-50:  #FFFBEB;
  --primitive-amber-100: #FEF3C7;
  --primitive-amber-200: #FDE68A;
  --primitive-amber-300: #FCD34D;
  --primitive-amber-400: #FBBF24;
  --primitive-amber-500: #F59E0B;
  --primitive-amber-600: #D97706;
  --primitive-amber-700: #B45309;

  --primitive-green-50:  #ECFDF5;
  --primitive-green-100: #D1FAE5;
  --primitive-green-200: #A7F3D0;
  --primitive-green-400: #34D399;
  --primitive-green-500: #10B981;
  --primitive-green-600: #059669;
  --primitive-green-700: #047857;

  --primitive-coral-100: #FFE4E6;
  --primitive-coral-300: #FCA5A5;
  --primitive-coral-400: #F87171;
  --primitive-coral-500: #EF4444;

  --primitive-brown-50:  #FAFAF9;
  --primitive-brown-100: #F5F5F4;
  --primitive-brown-200: #E7E5E4;
  --primitive-brown-300: #D6D3D1;
  --primitive-brown-400: #A8A29E;
  --primitive-brown-500: #78716C;
  --primitive-brown-700: #44403C;
  --primitive-brown-900: #1C1917;

  --primitive-cream-50:  #FFFDF7;
  --primitive-cream-100: #FFFBF0;
  --primitive-cream-200: #FFF3D0;

  --primitive-white: #FFFFFF;

  /* Spacing Primitives */
  --primitive-space-1:  0.25rem;  /* 4px */
  --primitive-space-2:  0.5rem;   /* 8px */
  --primitive-space-3:  0.75rem;  /* 12px */
  --primitive-space-4:  1rem;     /* 16px */
  --primitive-space-5:  1.25rem;  /* 20px */
  --primitive-space-6:  1.5rem;   /* 24px */
  --primitive-space-8:  2rem;     /* 32px */
  --primitive-space-10: 2.5rem;   /* 40px */
  --primitive-space-12: 3rem;     /* 48px */
  --primitive-space-16: 4rem;     /* 64px */
  --primitive-space-20: 5rem;     /* 80px */

  /* Type Scale Primitives */
  --primitive-text-xs:   0.75rem;   /* 12px */
  --primitive-text-sm:   0.875rem;  /* 14px */
  --primitive-text-base: 1rem;      /* 16px */
  --primitive-text-lg:   1.125rem;  /* 18px */
  --primitive-text-xl:   1.25rem;   /* 20px */
  --primitive-text-2xl:  1.5rem;    /* 24px */
  --primitive-text-3xl:  1.875rem;  /* 30px */
  --primitive-text-4xl:  2.25rem;   /* 36px */
  --primitive-text-5xl:  3rem;      /* 48px */

  /* Border Radius Primitives */
  --primitive-radius-sm:   0.25rem;
  --primitive-radius-md:   0.5rem;
  --primitive-radius-lg:   0.75rem;
  --primitive-radius-xl:   1rem;
  --primitive-radius-2xl:  1.5rem;
  --primitive-radius-full: 9999px;

  /* Shadow Primitives */
  --primitive-shadow-sm:  0 1px 2px 0 rgba(28, 25, 23, 0.05);
  --primitive-shadow-md:  0 4px 6px -1px rgba(28, 25, 23, 0.08), 0 2px 4px -2px rgba(28, 25, 23, 0.05);
  --primitive-shadow-lg:  0 10px 15px -3px rgba(28, 25, 23, 0.08), 0 4px 6px -4px rgba(28, 25, 23, 0.05);
  --primitive-shadow-xl:  0 20px 25px -5px rgba(28, 25, 23, 0.08), 0 8px 10px -6px rgba(28, 25, 23, 0.05);
}

/* ================================================================
   LAYER 2: SEMANTIC TOKENS — Purpose-driven aliases
   ================================================================ */
:root {
  /* Brand Colors */
  --color-primary:        var(--primitive-amber-500);
  --color-primary-light:  var(--primitive-amber-300);
  --color-primary-dark:   var(--primitive-amber-600);
  --color-primary-darker: var(--primitive-amber-700);
  --color-primary-subtle: var(--primitive-amber-100);

  --color-secondary:        var(--primitive-green-600);
  --color-secondary-light:  var(--primitive-green-400);
  --color-secondary-dark:   var(--primitive-green-700);
  --color-secondary-subtle: var(--primitive-green-50);

  --color-accent:        var(--primitive-coral-400);
  --color-accent-subtle: var(--primitive-coral-100);

  /* Background */
  --color-bg:          var(--primitive-cream-100);
  --color-bg-surface:  var(--primitive-white);
  --color-bg-subtle:   var(--primitive-cream-200);
  --color-bg-muted:    var(--primitive-brown-100);

  /* Text */
  --color-text:        var(--primitive-brown-900);
  --color-text-muted:  var(--primitive-brown-500);
  --color-text-subtle: var(--primitive-brown-400);
  --color-text-inverse: var(--primitive-white);

  /* Border */
  --color-border:       var(--primitive-brown-200);
  --color-border-light: var(--primitive-brown-100);
  --color-border-focus: var(--primitive-amber-400);

  /* Status */
  --color-success: var(--primitive-green-500);
  --color-warning: var(--primitive-amber-500);
  --color-error:   var(--primitive-coral-500);

  /* Link */
  --color-link:       var(--primitive-amber-600);
  --color-link-hover: var(--primitive-amber-700);

  /* Typography */
  --font-heading: 'Nunito', 'Source Sans Pro', 'Helvetica', sans-serif;
  --font-body:    'Lato', 'Open Sans', 'Helvetica', sans-serif;
  --font-mono:    'Consolas', 'Monaco', monospace;

  --font-weight-normal:    400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;
  --font-weight-extrabold: 800;

  --line-height-tight:  1.2;
  --line-height-snug:   1.35;
  --line-height-normal: 1.6;
  --line-height-relaxed:1.75;

  --letter-spacing-tight:  -0.025em;
  --letter-spacing-normal: 0em;
  --letter-spacing-wide:   0.025em;
  --letter-spacing-wider:  0.05em;

  /* Spacing */
  --space-xs:  var(--primitive-space-1);
  --space-sm:  var(--primitive-space-2);
  --space-md:  var(--primitive-space-4);
  --space-lg:  var(--primitive-space-6);
  --space-xl:  var(--primitive-space-8);
  --space-2xl: var(--primitive-space-12);
  --space-3xl: var(--primitive-space-16);
  --space-4xl: var(--primitive-space-20);

  /* Layout */
  --layout-container: 72rem;   /* 1152px */
  --layout-content:   48rem;   /* 768px, reading width */
  --layout-sidebar:   20rem;   /* 320px */

  /* Radius */
  --radius-sm:   var(--primitive-radius-sm);
  --radius-md:   var(--primitive-radius-md);
  --radius-lg:   var(--primitive-radius-lg);
  --radius-xl:   var(--primitive-radius-xl);
  --radius-2xl:  var(--primitive-radius-2xl);
  --radius-pill: var(--primitive-radius-full);

  /* Shadows */
  --shadow-sm: var(--primitive-shadow-sm);
  --shadow-md: var(--primitive-shadow-md);
  --shadow-lg: var(--primitive-shadow-lg);
  --shadow-xl: var(--primitive-shadow-xl);

  /* Transitions */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;
}

/* ================================================================
   LAYER 3: COMPONENT TOKENS — Per-component design decisions
   ================================================================ */
:root {
  /* Navbar */
  --navbar-bg:          var(--color-bg-surface);
  --navbar-border:      var(--color-border-light);
  --navbar-link-color:  var(--color-text);
  --navbar-link-hover:  var(--color-primary-dark);
  --navbar-height:      4rem;
  --navbar-shadow:      var(--shadow-md);

  /* Button — Primary */
  --btn-primary-bg:         var(--color-primary);
  --btn-primary-bg-hover:   var(--color-primary-dark);
  --btn-primary-bg-active:  var(--color-primary-darker);
  --btn-primary-text:       var(--color-text-inverse);
  --btn-primary-border:     transparent;
  --btn-primary-radius:     var(--radius-pill);
  --btn-primary-shadow:     var(--shadow-sm);
  --btn-primary-shadow-hover: var(--shadow-md);

  /* Button — Secondary */
  --btn-secondary-bg:       var(--color-secondary);
  --btn-secondary-bg-hover: var(--color-secondary-dark);
  --btn-secondary-text:     var(--color-text-inverse);
  --btn-secondary-radius:   var(--radius-pill);

  /* Button — Outline */
  --btn-outline-bg:       transparent;
  --btn-outline-bg-hover: var(--color-primary-subtle);
  --btn-outline-border:   var(--color-primary);
  --btn-outline-text:     var(--color-primary-dark);
  --btn-outline-radius:   var(--radius-pill);

  /* Card */
  --card-bg:          var(--color-bg-surface);
  --card-border:      var(--color-border-light);
  --card-border-radius: var(--radius-xl);
  --card-shadow:      var(--shadow-md);
  --card-shadow-hover: var(--shadow-lg);
  --card-padding:     var(--space-lg);
  --card-transition:  var(--transition-normal);

  /* Post Card */
  --post-card-img-radius:   var(--radius-xl) var(--radius-xl) 0 0;
  --post-card-tag-bg:       var(--color-primary-subtle);
  --post-card-tag-color:    var(--color-primary-dark);
  --post-card-tag-radius:   var(--radius-pill);

  /* Typography */
  --heading-color:          var(--color-text);
  --heading-font:           var(--font-heading);
  --heading-weight:         var(--font-weight-bold);
  --heading-line-height:    var(--line-height-tight);

  --body-color:             var(--color-text);
  --body-font:              var(--font-body);
  --body-weight:            var(--font-weight-normal);
  --body-line-height:       var(--line-height-relaxed);
  --body-size:              var(--primitive-text-base);

  /* Sidebar Widget */
  --widget-bg:              var(--color-bg-surface);
  --widget-border-radius:   var(--radius-xl);
  --widget-padding:         var(--space-lg);
  --widget-title-color:     var(--color-text);
  --widget-title-border:    var(--color-primary);

  /* Footer */
  --footer-bg:              var(--primitive-brown-900);
  --footer-text:            var(--primitive-brown-300);
  --footer-link:            var(--primitive-brown-200);
  --footer-link-hover:      var(--primitive-amber-300);
  --footer-border:          var(--primitive-brown-700);

  /* Tag / Badge */
  --tag-bg:     var(--color-primary-subtle);
  --tag-color:  var(--color-primary-dark);
  --tag-radius: var(--radius-pill);
  --tag-size:   var(--primitive-text-xs);

  /* Input / Form */
  --input-bg:           var(--color-bg-surface);
  --input-border:       var(--color-border);
  --input-border-focus: var(--color-border-focus);
  --input-radius:       var(--radius-lg);
  --input-padding:      var(--space-sm) var(--space-md);
  --input-text:         var(--color-text);
  --input-placeholder:  var(--color-text-subtle);

  /* Search */
  --search-btn-bg:    var(--color-primary);
  --search-btn-color: var(--color-text-inverse);
  --search-btn-radius: var(--radius-pill);

  /* Breadcrumb */
  --breadcrumb-color:       var(--color-text-muted);
  --breadcrumb-link-color:  var(--color-primary-dark);
  --breadcrumb-separator:   var(--color-text-subtle);
}

/* ================================================================
   BASE STYLES — Apply tokens to HTML elements
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&family=Lato:wght@300;400;700&display=swap');

body {
  background-color: var(--color-bg);
  color: var(--body-color);
  font-family: var(--body-font);
  font-size: var(--body-size);
  font-weight: var(--body-weight);
  line-height: var(--body-line-height);
}

/* Headings */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--heading-color);
  font-family: var(--heading-font);
  font-weight: var(--heading-weight);
  line-height: var(--heading-line-height);
  letter-spacing: var(--letter-spacing-tight);
  margin-bottom: var(--space-md);
}

h1 { font-size: var(--primitive-text-4xl); }
h2 { font-size: var(--primitive-text-3xl); }
h3 { font-size: var(--primitive-text-2xl); }
h4 { font-size: var(--primitive-text-xl); }
h5 { font-size: var(--primitive-text-lg); }
h6 { font-size: var(--primitive-text-base); }

/* Links */
a {
  color: var(--color-link);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}

/* ================================================================
   NAVBAR
   ================================================================ */
.site-header {
  background-color: var(--navbar-bg) !important;
  border-bottom: 1px solid var(--navbar-border);
  box-shadow: var(--navbar-shadow);
  position: sticky;
  top: 0;
  z-index: 100;
}

.site-header a {
  color: var(--navbar-link-color) !important;
  font-weight: var(--font-weight-semibold);
  transition: color var(--transition-fast);
}

.site-header a:hover {
  color: var(--navbar-link-hover) !important;
  text-decoration: none;
}

.site-logo a {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-extrabold);
  font-size: var(--primitive-text-xl);
  color: var(--color-primary-dark) !important;
  letter-spacing: var(--letter-spacing-tight);
}

/* ================================================================
   BUTTONS
   ================================================================ */
.btn,
.button,
.form-submit input[type="submit"],
input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  font-family: var(--font-body);
  font-weight: var(--font-weight-semibold);
  font-size: var(--primitive-text-sm);
  line-height: 1;
  letter-spacing: var(--letter-spacing-wide);
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--btn-primary-radius);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color var(--transition-fast),
              box-shadow var(--transition-fast),
              transform var(--transition-fast);
  text-decoration: none !important;
}

.btn-primary,
.form-submit input[type="submit"],
input[type="submit"] {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text) !important;
  border-color: var(--btn-primary-bg);
  box-shadow: var(--btn-primary-shadow);
}

.btn-primary:hover,
.form-submit input[type="submit"]:hover,
input[type="submit"]:hover {
  background-color: var(--btn-primary-bg-hover);
  border-color: var(--btn-primary-bg-hover);
  box-shadow: var(--btn-primary-shadow-hover);
  transform: translateY(-1px);
}

.btn-secondary {
  background-color: var(--btn-secondary-bg);
  color: var(--btn-secondary-text) !important;
  border-color: var(--btn-secondary-bg);
}

.btn-secondary:hover {
  background-color: var(--btn-secondary-bg-hover);
  border-color: var(--btn-secondary-bg-hover);
}

.btn-outline,
.btn-outline-primary {
  background-color: var(--btn-outline-bg);
  color: var(--btn-outline-text) !important;
  border-color: var(--btn-outline-border);
}

.btn-outline:hover,
.btn-outline-primary:hover {
  background-color: var(--btn-outline-bg-hover);
}

/* ================================================================
   CARDS & POST LISTS
   ================================================================ */
.card,
.post-card,
article.post,
.loop-entry {
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-border-radius);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  transition: box-shadow var(--card-transition),
              transform var(--card-transition);
}

.card:hover,
.post-card:hover,
article.post:hover,
.loop-entry:hover {
  box-shadow: var(--card-shadow-hover);
  transform: translateY(-2px);
}

/* Post category / tag badges */
.category-label,
.post-category,
.tag-label,
.cat-label {
  display: inline-flex;
  align-items: center;
  background-color: var(--post-card-tag-bg);
  color: var(--post-card-tag-color);
  border-radius: var(--post-card-tag-radius);
  font-size: var(--tag-size);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  padding: 2px var(--space-sm);
  text-decoration: none !important;
}

/* ================================================================
   SIDEBAR WIDGETS
   ================================================================ */
.widget,
.widgetized-area .widget {
  background-color: var(--widget-bg);
  border-radius: var(--widget-border-radius);
  padding: var(--widget-padding);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-lg);
}

.widget-title,
.widgettitle {
  color: var(--widget-title-color);
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  font-size: var(--primitive-text-lg);
  border-bottom: 3px solid var(--widget-title-border);
  padding-bottom: var(--space-sm);
  margin-bottom: var(--space-md);
}

/* ================================================================
   FORMS & SEARCH
   ================================================================ */
input[type="text"],
input[type="email"],
input[type="search"],
input[type="url"],
input[type="password"],
textarea,
select {
  background-color: var(--input-bg);
  border: 1.5px solid var(--input-border);
  border-radius: var(--input-radius);
  color: var(--input-text);
  font-family: var(--font-body);
  font-size: var(--primitive-text-sm);
  padding: var(--input-padding);
  width: 100%;
  transition: border-color var(--transition-fast),
              box-shadow var(--transition-fast);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--input-border-focus);
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.15);
}

input::placeholder,
textarea::placeholder {
  color: var(--input-placeholder);
}

/* ================================================================
   FOOTER
   ================================================================ */
.site-footer {
  background-color: var(--footer-bg);
  color: var(--footer-text);
}

.site-footer a {
  color: var(--footer-link);
  transition: color var(--transition-fast);
}

.site-footer a:hover {
  color: var(--footer-link-hover);
  text-decoration: none;
}

.site-footer .widget-title,
.site-footer .widgettitle {
  color: var(--primitive-white);
  border-color: var(--color-primary);
}

/* ================================================================
   TYPOGRAPHY — Content Styles
   ================================================================ */
.entry-content p,
.entry-content li {
  font-size: var(--body-size);
  line-height: var(--line-height-relaxed);
  color: var(--body-color);
  margin-bottom: var(--space-md);
}

.entry-content a {
  color: var(--color-link);
  font-weight: var(--font-weight-medium);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.entry-content blockquote {
  background-color: var(--color-primary-subtle);
  border-left: 4px solid var(--color-primary);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  color: var(--color-text);
  font-style: italic;
  font-size: var(--primitive-text-lg);
  margin: var(--space-xl) 0;
  padding: var(--space-lg) var(--space-xl);
}

.entry-content blockquote::before,
.entry-content blockquote::after {
  content: none;
}

/* ================================================================
   UTILITY CLASSES
   ================================================================ */
.text-primary   { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-muted     { color: var(--color-text-muted); }
.bg-primary     { background-color: var(--color-primary); }
.bg-subtle      { background-color: var(--color-bg-subtle); }
.rounded-pill   { border-radius: var(--radius-pill); }
.shadow-md      { box-shadow: var(--shadow-md); }