/* ============================================================
   FORGE — steel, oil and brass. Barber / detailing / tattoo.
   ------------------------------------------------------------
   The masculine end of the range. Where the beauty themes are
   pale paper with soft glow, this is a dark shop wall with a
   brass rim: near-square corners, flat shadows, condensed caps.

   Original artwork. Nothing here came from a client folder.
   ============================================================ */

/* ---- 1. FONTS ----------------------------------------------
   No script face. A barber's name set in Great Vibes reads
   wrong, so --font-script points at the same condensed display
   the headings use — his name comes out stencilled, not signed.
------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600;700&family=Barlow:wght@300;400;500;600;700&display=swap');

:root{
  --font-script:  'Oswald', sans-serif;       /* his name, deal titles */
  --font-display: 'Oswald', sans-serif;       /* headings, prices */
  --font-body:    'Barlow', sans-serif;       /* everything else */

  /* ---- 2. COLOURS ------------------------------------------
     CHROMATIC — brass is the accent and has to survive. Drain it
     to grey and this becomes a generic dark template.
     Named after the template's roles, not the colours, so core
     keeps working: --cream is paper even when paper is charcoal.
  --------------------------------------------------------- */
  --cream:     #14161a;   /* page — shop wall */
  --blush:     #1d2027;   /* day cells, hover fills */
  --blush-2:   #2a2e37;   /* hairlines, borders */
  --pink:      #3a3f4a;   /* dotted leaders, light borders */
  --pink-deep: #c08a3e;   /* announcement bar, button rims — brass */
  --ribbon:    #c9903f;   /* selected day and slot, admin buttons */
  --pink-dark: #e0aa5c;   /* prices, category headings */
  --plum:      #f2ede6;   /* section headings — bone */

  --ink:       #cfd3da;   /* body text */
  --ink-soft:  #868d99;   /* captions, taglines, hints */
  --white:     #1a1d23;   /* cards — a step off the wall */

  /* Availability. Checked against #14161a, not a pale page:
     a soft sage would vanish here, so open is a lit green. */
  --pip-open:  #5fbf7f;
  --pip-taken: #3a3f4a;

  --glow:      0,0,0;       /* shadows fall dark on a dark page */
  --glow-deep: 0,0,0;

  /* ---- 3. BACKGROUND ARTWORK ------------------------------- */
  --bg-tile:        url(bg-tile.svg);
  --bg-size:        340px;
  --bg-size-mobile: 240px;
  --bg-opacity:     .55;
  --bg-opacity-admin: .25;

  --motif: url(motif.svg);
}

/* ============================================================
   SHAPE LANGUAGE — sharp and flat.
   Small radii, thin bright rims, no glow. The opposite end of
   the instrument from a glossy bezel-set brand.
   ============================================================ */
:root{
  --r-btn:    3px;
  --r-card:   4px;
  --r-tile:   2px;
  --r-input:  3px;
  --r-msg:    4px;
  --r-img:    3px;
  --r-nav:    3px;     /* square month arrows, not circles */
  --r-deal:   4px;

  --bw:       1px;
  --bw-card:  1px;

  /* Flat and tight. On a dark page a big soft shadow reads as
     mud, so these are close and low-opacity. */
  --sh-card:  0 2px 0 rgba(0,0,0,.5);
  --sh-btn:   0 2px 0 rgba(0,0,0,.55);
  --sh-btn-h: 0 3px 0 rgba(0,0,0,.6);
  --sh-soft:  0 1px 0 rgba(0,0,0,.4);
  --sh-lift:  0 3px 0 rgba(0,0,0,.5);
  --sh-deal:  0 2px 0 rgba(0,0,0,.5);

  --motif-rot:      0deg;    /* it is a blade, not a bow — it sits straight */
  --motif-bullet-w: 16px;
  --motif-bullet-h: 16px;
  --motif-badge-w:  26px;
  --motif-badge-h:  26px;

  --font-btn:      'Oswald', sans-serif;
  --btn-weight:    600;
  --btn-transform: uppercase;
  --btn-tracking:  .16em;

  --pin-size: 13px;
  --logo-max: 360px;

  /* "See My Work" frames, darkened to match */
  --ty-card:  #1a1d23;
  --ty-line:  #2a2e37;
  --ty-icon:  #c08a3e;
  --ty-heart: #c08a3e;
}