/* ============================================================
   GetFenced! Master Style Guide — "The Urban Sentinel"
   Design System v1.0

   Neo-Brutalist industrial aesthetic for the fencing industry.
   Rugged, architectural, unapologetically loud.
   ============================================================ */

/* ── DESIGN TOKENS ── */
:root {
  /* ─── Primary (Yellow — "Warning Signal") ─── */
  --primary:                 #705D00;
  --primary-container:       #FFD600;
  --primary-fixed:           #FFE170;
  --primary-fixed-dim:       #E9C400;
  --on-primary:              #FFFFFF;
  --on-primary-container:    #705D00;
  --on-primary-fixed:        #221B00;
  --on-primary-fixed-variant:#544600;
  --inverse-primary:         #E9C400;

  /* ─── Secondary (Orange — "Action Signal") ─── */
  --secondary:               #AA3000;
  --secondary-container:     #D43F00;
  --secondary-fixed:         #FFDBD0;
  --secondary-fixed-dim:     #FFB59E;
  --on-secondary:            #FFFFFF;
  --on-secondary-container:  #FFFBFF;
  --on-secondary-fixed:      #3A0B00;
  --on-secondary-fixed-variant:#852400;

  /* ─── Tertiary (Neutral Gray) ─── */
  --tertiary:                #5F5E5E;
  --tertiary-container:      #DBD8D8;
  --tertiary-fixed:          #E5E2E1;
  --tertiary-fixed-dim:      #C8C6C5;
  --on-tertiary:             #FFFFFF;
  --on-tertiary-container:   #5F5E5E;
  --on-tertiary-fixed:       #1C1B1B;
  --on-tertiary-fixed-variant:#474646;

  /* ─── Surfaces ─── */
  --background:              #FAFAF5;
  --surface:                 #FAFAF5;
  --surface-bright:          #FAFAF5;
  --surface-container:       #EEEEE9;
  --surface-container-low:   #F4F4EF;
  --surface-container-high:  #E8E8E4;
  --surface-container-highest:#E2E3DE;
  --surface-container-lowest:#FFFFFF;
  --surface-dim:             #DADAD6;
  --surface-variant:         #E2E3DE;
  --surface-tint:            #705D00;

  /* ─── Text / Ink ─── */
  --on-background:           #1A1C19;
  --on-surface:              #1A1C19;
  --on-surface-variant:      #4D4632;
  --inverse-surface:         #2F312E;
  --inverse-on-surface:      #F1F1EC;

  /* ─── Outline ─── */
  --outline:                 #7F775F;
  --outline-variant:         #D0C6AB;

  /* ─── Error ─── */
  --error:                   #BA1A1A;
  --error-container:         #FFDAD6;
  --on-error:                #FFFFFF;
  --on-error-container:      #93000A;

  /* ─── Shorthand Aliases (for quick use) ─── */
  --yellow:                  #FFD600;
  --black:                   #111111;
  --white:                   #FAFAF5;
  --orange:                  #FF4D00;

  /* ─── Shadows ─── */
  --shadow-color:            #111111;
  --shadow-sm:               4px 4px 0px var(--shadow-color);
  --shadow-md:               6px 6px 0px var(--shadow-color);
  --shadow-lg:               8px 8px 0px var(--shadow-color);

  /* ─── Borders ─── */
  --border-width-sm:         3px;
  --border-width-md:         4px;
  --border-width-lg:         5px;
  --border-color:            var(--black);
  --border-radius:           0px;

  /* ─── Caution Stripe ─── */
  --stripe-size:             40px;
  --stripe-size-sm:          10px;
  --caution-stripe:          repeating-linear-gradient(
    -45deg,
    var(--yellow) 0px,
    var(--yellow) var(--stripe-size),
    var(--black) var(--stripe-size),
    var(--black) calc(var(--stripe-size) * 2)
  );
  --caution-stripe-sm:       repeating-linear-gradient(
    -45deg,
    var(--yellow) 0px,
    var(--yellow) var(--stripe-size-sm),
    var(--black) var(--stripe-size-sm),
    var(--black) calc(var(--stripe-size-sm) * 2)
  );

  /* ─── Typography ─── */
  --font-headline:           'Bebas Neue', sans-serif;
  --font-body:               'Barlow', sans-serif;
  --font-label:              'Barlow Condensed', sans-serif;

  /* Display: billboard headers */
  --text-display-lg:         3.5rem;
  --text-display-md:         3rem;
  --text-display-sm:         2.25rem;
  --text-display-weight:     700;
  --text-display-spacing:    -0.02em;
  --text-display-transform:  uppercase;

  /* Headline: section titles */
  --text-headline-lg:        2rem;
  --text-headline-md:        1.75rem;
  --text-headline-sm:        1.5rem;
  --text-headline-weight:    700;

  /* Title: card headers, sub-navigation */
  --text-title-lg:           1.375rem;
  --text-title-md:           1.125rem;
  --text-title-sm:           1rem;
  --text-title-weight:       700;

  /* Body: readable text */
  --text-body-lg:            1rem;
  --text-body-md:            0.9rem;
  --text-body-sm:            0.75rem;
  --text-body-weight:        400;

  /* Label: tags, metadata */
  --text-label-lg:           0.85rem;
  --text-label-md:           0.75rem;
  --text-label-sm:           0.65rem;
  --text-label-weight:       700;
  --text-label-spacing:      3px;
  --text-label-transform:    uppercase;

  /* ─── Spacing ─── */
  --space-xs:                0.5rem;
  --space-sm:                1rem;
  --space-md:                1.5rem;
  --space-lg:                2rem;
  --space-xl:                3rem;
  --space-2xl:               5rem;
  --space-3xl:               6rem;

  /* ─── Transitions ─── */
  --transition-fast:         0.08s ease;
  --transition-normal:       0.12s ease;
  --transition-slow:         0.2s ease;
}


/* ── RESET ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  font-weight: var(--text-body-weight);
  line-height: 1.6;
  background: var(--background);
  color: var(--on-background);
  overflow-x: hidden;
}


/* ── TYPOGRAPHY UTILITY CLASSES ── */

.text-display {
  font-family: var(--font-headline);
  font-weight: var(--text-display-weight);
  letter-spacing: var(--text-display-spacing);
  text-transform: var(--text-display-transform);
  line-height: 0.95;
}
.text-display-lg { font-size: var(--text-display-lg); }
.text-display-md { font-size: var(--text-display-md); }
.text-display-sm { font-size: var(--text-display-sm); }

.text-headline {
  font-family: var(--font-headline);
  font-weight: var(--text-headline-weight);
  line-height: 1.1;
}
.text-headline-lg { font-size: var(--text-headline-lg); }
.text-headline-md { font-size: var(--text-headline-md); }
.text-headline-sm { font-size: var(--text-headline-sm); }

.text-title {
  font-family: var(--font-body);
  font-weight: var(--text-title-weight);
  line-height: 1.3;
}
.text-title-lg { font-size: var(--text-title-lg); }
.text-title-md { font-size: var(--text-title-md); }
.text-title-sm { font-size: var(--text-title-sm); }

.text-body {
  font-family: var(--font-body);
  font-weight: var(--text-body-weight);
  line-height: 1.6;
}
.text-body-lg { font-size: var(--text-body-lg); }
.text-body-md { font-size: var(--text-body-md); }
.text-body-sm { font-size: var(--text-body-sm); }

.text-label {
  font-family: var(--font-label);
  font-weight: var(--text-label-weight);
  letter-spacing: var(--text-label-spacing);
  text-transform: var(--text-label-transform);
  line-height: 1.2;
}
.text-label-lg { font-size: var(--text-label-lg); }
.text-label-md { font-size: var(--text-label-md); }
.text-label-sm { font-size: var(--text-label-sm); }


/* ── SHADOW UTILITIES ── */
.hard-shadow-sm { box-shadow: var(--shadow-sm); }
.hard-shadow-md { box-shadow: var(--shadow-md); }
.hard-shadow-lg { box-shadow: var(--shadow-lg); }


/* ── BUTTONS — "Plinth" Style ── */
.btn {
  display: inline-block;
  padding: var(--space-sm) var(--space-lg);
  font-family: var(--font-headline);
  font-size: var(--text-title-sm);
  font-weight: var(--text-label-weight);
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  border: var(--border-width-sm) solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  position: relative;
  cursor: pointer;
}
.btn:hover {
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0px var(--shadow-color);
}
.btn:active {
  transform: translate(4px, 4px);
  box-shadow: 0px 0px 0px var(--shadow-color);
}

/* Primary: Yellow "Warning" */
.btn-primary {
  background: var(--primary-container);
  color: var(--on-background);
  box-shadow: var(--shadow-sm);
}

/* Secondary: Orange "Action" */
.btn-secondary {
  background: var(--secondary-container);
  color: var(--on-secondary);
  box-shadow: var(--shadow-sm);
}

/* Tertiary: Off-white subtle */
.btn-tertiary {
  background: var(--surface);
  color: var(--on-surface);
  box-shadow: none;
}
.btn-tertiary:hover {
  box-shadow: var(--shadow-sm);
  transform: translate(-2px, -2px);
}

/* Outline / Ghost */
.btn-outline {
  background: transparent;
  border-color: var(--white);
  color: var(--white);
  box-shadow: 4px 4px 0px rgba(255,255,255,0.4);
}
.btn-outline:hover {
  background: var(--white);
  color: var(--on-background);
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0px rgba(255,255,255,0.4);
}
.btn-outline:active {
  transform: translate(4px, 4px);
  box-shadow: 0px 0px 0px rgba(255,255,255,0.4);
}


/* ── CARDS — "The Slab" ── */
.card {
  background: var(--surface);
  border: var(--border-width-lg) solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.card:hover {
  transform: translate(4px, 4px);
  box-shadow: 2px 2px 0px var(--shadow-color);
}

/* Card with caution stripe header */
.card-caution::before {
  content: '';
  display: block;
  height: 8px;
  background: var(--caution-stripe-sm);
}


/* ── FORM INPUTS ── */
.input,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="password"],
select,
textarea {
  padding: var(--space-sm);
  border: var(--border-width-sm) solid var(--border-color);
  border-radius: var(--border-radius);
  background: var(--surface);
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  color: var(--on-surface);
  outline: none;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.1s, transform 0.1s, border-color 0.1s, background 0.1s;
  width: 100%;
}
.input:focus,
input:focus,
select:focus,
textarea:focus {
  background: var(--primary-container);
  border-width: var(--border-width-lg);
  border-color: var(--border-color);
  box-shadow: var(--shadow-sm);
  transform: translate(-1px, -1px);
  color: var(--on-background);
}


/* ── TAGS / BADGES ── */
.tag {
  display: inline-block;
  background: var(--primary-container);
  color: var(--on-background);
  font-family: var(--font-label);
  font-size: var(--text-label-md);
  font-weight: var(--text-label-weight);
  letter-spacing: var(--text-label-spacing);
  text-transform: var(--text-label-transform);
  padding: 0.25rem 0.7rem;
  border: 2px solid var(--border-color);
  border-radius: var(--border-radius);
}

/* Job Status Badge — hang-tag style */
.badge-status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1rem 0.4rem 0.6rem;
  background: var(--surface);
  border: var(--border-width-sm) solid var(--border-color);
  border-radius: var(--border-radius);
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: var(--text-label-md);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.badge-status::before {
  content: '';
  width: 10px;
  height: 10px;
  border: 2px solid var(--border-color);
  border-radius: 50%;
  flex-shrink: 0;
}


/* ── CHIPS ── */
.chip {
  display: inline-block;
  background: transparent;
  border: var(--border-width-sm) solid var(--primary-container);
  color: var(--primary-container);
  font-family: var(--font-headline);
  font-size: var(--text-body-lg);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: var(--space-xs) var(--space-md);
  box-shadow: var(--shadow-sm);
  transition: transform 0.1s, box-shadow 0.1s, background 0.1s, color 0.1s;
}
.chip:hover {
  background: var(--primary-container);
  color: var(--on-background);
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0px var(--primary-container);
}
.chip.active {
  background: var(--primary-container);
  color: var(--on-background);
}


/* ── CAUTION STRIPE DECORATORS ── */
.caution-stripe {
  background: var(--caution-stripe);
}
.caution-stripe-sm {
  background: var(--caution-stripe-sm);
}
.caution-bar {
  height: 8px;
  background: var(--caution-stripe-sm);
  border-top: 2px solid var(--border-color);
  border-bottom: 2px solid var(--border-color);
}


/* ── ALERT BOXES ── */
.alert {
  padding: var(--space-sm) var(--space-md);
  border: var(--border-width-sm) solid var(--border-color);
  border-radius: var(--border-radius);
  font-family: var(--font-body);
  font-size: var(--text-body-md);
}
.alert-warning {
  background: var(--primary-container);
  color: var(--on-background);
}
.alert-error {
  background: var(--error-container);
  color: var(--on-error-container);
  border-color: var(--error);
}
.alert-info {
  background: var(--surface-container-high);
  color: var(--on-surface);
}


/* ── SECTION PATTERNS ── */
.section-label {
  font-family: var(--font-label);
  font-size: var(--text-label-lg);
  font-weight: var(--text-label-weight);
  letter-spacing: var(--text-label-spacing);
  text-transform: var(--text-label-transform);
  color: var(--secondary-container);
  margin-bottom: 0.75rem;
}

.section-title {
  font-family: var(--font-headline);
  font-weight: var(--text-display-weight);
  letter-spacing: var(--text-display-spacing);
  text-transform: var(--text-display-transform);
  font-size: clamp(var(--text-display-sm), 6vw, 4rem);
  line-height: 1;
  color: var(--on-background);
  margin-bottom: var(--space-md);
}


/* ── RESPONSIVE BREAKPOINTS ── */
@media (max-width: 768px) {
  :root {
    --text-display-lg:   2.5rem;
    --text-display-md:   2.25rem;
    --text-display-sm:   1.75rem;
    --text-headline-lg:  1.75rem;
    --text-headline-md:  1.5rem;
    --text-headline-sm:  1.25rem;
  }
}

@media (max-width: 480px) {
  :root {
    --text-display-lg:   2rem;
    --text-display-md:   1.75rem;
    --text-display-sm:   1.5rem;
  }
}