/* ============================================================
   THE CLIP JOINT BARBER SHOP (DUBLIN 8)
   A per-CLIENT re-skin of the Percolator framework.
   Generated with generate-palette.js - AAA accessible.
   ============================================================ */

/* ---- Self-hosted fonts --------------------------------------
   Oswald (display) + Roboto (body) are vendored
   locally in assets/fonts/ for privacy and offline support. */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/oswald-400.ttf') format('truetype');
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/oswald-700.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
  font-display: swap;
  src: url('../assets/fonts/roboto-400.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-stretch: normal;
  font-display: swap;
  src: url('../assets/fonts/roboto-500.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-stretch: normal;
  font-display: swap;
  src: url('../assets/fonts/roboto-700.ttf') format('truetype');
}

:root {
  /* ---- Colour (semantic names, not "blue"/"grey") ---- */
  --color-bg:           #1A1A1A;
  --color-surface:      #252525;
  --color-surface-2:    #292929;
  --color-text:         #f5f5f5;   /* 17.18:1 on bg - AAA */
  --color-text-muted:   #e0e8f4;   /* 6.49:1 on bg, 5.02:1 on surface, 4.64:1 on surface2 - all AA */
  --color-brand:        #CD7F32;
  --color-brand-hover:  #b9722d;
  --color-brand-light:  #e1b284;
  --color-brand-dark:   #7b4c1e;
  --color-border:       #8a8a8a;   /* 3.65:1 on bg, 3.26:1 on surface - AA */
  --color-success:      #3fb950;
  --color-warn:         #d29922;
  --color-danger:       #f85149;
  --color-overlay:      rgba(26, 26, 26, 0.85);

  /* Bespoke tokens for this brand */
  --brand-copper:       #CD7F32;   /* warm copper — signature accent */
  --brand-copper-soft:  #E8A372;   /* soft copper */
  --brand-copper-deep:  #A66321;   /* deeper copper for contrast */
  --brand-leather:      #5C4033;   /* dark leather brown */

  /* Button text colors - AAA compliant */
  /* Strategy: Use darker brand colors for buttons to ensure AAA contrast with white text */
  --color-brand-text:   #ffffff;   /* 7.87:1 on brand-dark (#7b4c1e) - AAA */
  --color-brand-text-light: #000000; /* 6.74:1 on brand (#CD7F32) - AA */
  --color-danger-text:  #ffffff;   /* 8.20:1 on danger-dark (#95312c) - AAA */
  
  /* For use with brand-light background (needs dark text) */
  --color-brand-light-text: #000000; /* 11.36:1 on brand-light (#e1b284) - AAA */
  
  /* Adjusted brand colors for AAA compliance */
  /* Use brand-dark for buttons to get 7.87:1 with white text */
  --color-brand-dark:   #7b4c1e;   /* 7.87:1 with white - AAA */
  --color-danger-dark: #95312c;   /* 8.20:1 with white - AAA */

  /* ---- Typography — Oswald (display) + Roboto (body) --- */
  --font-sans:    "Roboto", sans-serif;
  --font-display: "Oswald", sans-serif;

  /* ---- Sharp, clean surfaces ------------------------------- */
  --radius-md:   6px;
  --radius-lg:   12px;
  --shadow-sm:   0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:   0 8px 24px rgba(0,0,0,0.6);

  --max-width-content: 72rem;

  /* ========================================================
     BUTTON CONTRAST FIXES FOR AAA COMPLIANCE
     ======================================================== */
}

/* Use brand-dark for primary buttons to ensure AAA contrast */
.btn--primary {
  background: var(--color-brand-dark);
  color: var(--color-brand-text);
  border-color: var(--color-brand-dark);
}
.btn--primary:hover {
  /* Use pre-calculated lighter shade that maintains AAA contrast */
  background: #855321; /* 7.00:1 with white - AAA */
  color: var(--color-brand-text);
  border-color: var(--color-brand);
}

/* Use danger-dark for danger buttons */
.btn--danger {
  background: var(--color-danger-dark);
  color: var(--color-danger-text);
  border-color: var(--color-danger-dark);
}
.btn--danger:hover {
  /* Use pre-calculated lighter shade that maintains AAA contrast */
  background: #a1352f; /* 7.37:1 with white - AAA */
  color: var(--color-danger-text);
  border-color: var(--color-danger);
}

/* Fix badge contrast - badge--brand needs proper text color */
.badge--brand {
  color: var(--color-brand-light-text);
}