/**
 * THE CRAFTY RABBIT — Master Hub Stylesheet & Maker Interface System (v2.0)
 * Aligned with Living Brand Identity Board v1.0
 * Merchant Jurisdiction: Greenville County, South Carolina, USA
 * Official Contact: workshop@thecraftyrabbit.com
 */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  /* 12 Official Brand Board Tokens */
  --color-brand-primary: #172B4D;    /* Deep Forge Navy */
  --color-brand-secondary: #8B5A2B;  /* Aged Teak */
  --color-brand-teakLight: #A67B5B;  /* Warm Natural Wood */
  --color-brand-sand: #E6D7C3;       /* Sawdust / Warm Sand */
  --color-surface-light: #F4F5F7;    /* Warm Limestone */
  --color-surface-dark: #091E42;     /* Charcoal Anvil */
  --color-surface-card: #FFFFFF;     /* Modular Bin White */
  --color-feedback-success: #006644; /* Patina Green */
  --color-feedback-warning: #FF991F; /* Safety Amber */
  --color-text-primary: #091E42;     /* Primary Text */
  --color-text-secondary: #5E6C84;   /* Technical Slate */
  --color-border-subtle: #DFE1E6;    /* Subtle Rule / Border */

  /* Typography Stacks */
  --font-display: 'Oswald', sans-serif;
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'Space Grotesk', monospace;

  /* Elevation Shadows */
  --shadow-shop-flat: 0 1px 2px 0 rgba(9, 30, 66, 0.08);
  --shadow-shop-elevated: 0 4px 14px -2px rgba(9, 30, 66, 0.12), 0 2px 4px -1px rgba(9, 30, 66, 0.06);
  --shadow-shop-deep: 0 12px 30px -4px rgba(9, 30, 66, 0.25);
}

/* Base Body & Selection Defaults */
html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-surface-light);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background-color: var(--color-brand-secondary);
  color: #FFFFFF;
}

/* Typography Utility Classes (Works alongside Tailwind) */
.font-display {
  font-family: var(--font-display);
}
.font-sans {
  font-family: var(--font-sans);
}
.font-mono {
  font-family: var(--font-mono);
}

/* Organic Sunlit Woodshop Hero Backdrop (Person-Free) */
.bg-makerspace-hero {
  background-image: 
    linear-gradient(to bottom, rgba(9, 30, 66, 0.74) 0%, rgba(23, 43, 77, 0.88) 70%, #F4F5F7 100%),
    url('https://images.unsplash.com/photo-1504148455328-c376907d081c?auto=format&fit=crop&w=1920&q=85');
  background-size: cover;
  background-position: center;
}

/* Technical Blueprint Grids (From Brand Board v1.0) */
.blueprint-grid-dark {
  background-size: 20px 20px;
  background-image: 
    linear-gradient(to right, rgba(230, 215, 195, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(230, 215, 195, 0.06) 1px, transparent 1px);
}

.blueprint-grid-light {
  background-size: 20px 20px;
  background-image: 
    linear-gradient(to right, rgba(23, 43, 77, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(23, 43, 77, 0.05) 1px, transparent 1px);
}

/* Maker Interface System (MIS) Reusable Button Tokens */
.btn-teak {
  background-color: var(--color-brand-secondary);
  color: #FFFFFF;
  font-family: var(--font-sans);
  font-weight: 600;
  transition: all 0.2s ease;
  box-shadow: var(--shadow-shop-elevated);
}
.btn-teak:hover {
  background-color: var(--color-brand-teakLight);
  transform: translateY(-1px);
}

.btn-forge {
  background-color: var(--color-brand-primary);
  color: #FFFFFF;
  font-family: var(--font-sans);
  font-weight: 600;
  transition: all 0.2s ease;
  box-shadow: var(--shadow-shop-flat);
}
.btn-forge:hover {
  background-color: var(--color-surface-dark);
  transform: translateY(-1px);
}

/* Caution Hazard Stripe Banner (Brand-Aligned Safety Amber + Deep Forge Navy) */
.hazard-stripe {
  background: repeating-linear-gradient(
    -45deg,
    var(--color-feedback-warning),
    var(--color-feedback-warning) 14px,
    var(--color-brand-primary) 14px,
    var(--color-brand-primary) 28px
  );
}

/* Animated Hammer & Sawdust Keyframes for "In The Workshop" Section */
@keyframes hammerSwing {
  0%, 100% { transform: rotate(0deg); }
  40% { transform: rotate(-32deg); }
  60% { transform: rotate(12deg); }
}
.animate-hammer {
  display: inline-block;
  transform-origin: bottom right;
  animation: hammerSwing 1.4s infinite ease-in-out;
}

@keyframes dustFloat {
  0% { opacity: 0; transform: translateY(4px) scale(0.8); }
  50% { opacity: 0.9; transform: translateY(-4px) scale(1.1); }
  100% { opacity: 0; transform: translateY(-12px) scale(0.6); }
}
.sawdust-dot {
  animation: dustFloat 1.4s infinite ease-out;
}
.sawdust-dot:nth-child(2) { animation-delay: 0.3s; }
.sawdust-dot:nth-child(3) { animation-delay: 0.7s; }

/* Collapsible Details / Accordion Mechanics */
details > summary {
  list-style: none;
}
details > summary::-webkit-details-marker {
  display: none;
}
details[open] .accordion-chevron {
  transform: rotate(180deg);
}

/* Legal Document Card Formatting (For terms.html & privacy.html) */
.legal-doc-card h2 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: var(--color-brand-primary);
  font-size: 1.35rem;
  line-height: 1.75rem;
}

/* Custom Scrollbar (From Brand Board v1.0) */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
::-webkit-scrollbar-track {
  background: var(--color-surface-light);
}
::-webkit-scrollbar-thumb {
  background: #CBD2D9;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-brand-secondary);
}