/* ==========================================================================
   The Barber Castle — design tokens

   Brand values are sampled from the client's own official artwork, not guessed:
   brass #C8A068 and emerald #005050 read off the supplied logo lockups, which
   also fix the BARBER/CASTLE wordmark pairing. Everything else is derived from
   the real shop photography: emerald/teal walls, brass slat partitions, brown
   leather chairs, black ceilings, cream tile.

   The mark is a castle tower whose lower half becomes crossed scissors, so the
   brass ramp runs from specular highlight to tool-steel shadow and the gold
   gradients below imitate a lit metal edge rather than a flat tint.
   ========================================================================== */

:root {
  /* --- Surfaces ------------------------------------------------------- */
  --bc-canvas: #0d0f0e;
  --bc-canvas-2: #111513;
  --bc-surface: #191e1b;
  --bc-surface-2: #212825;
  --bc-emerald: #005050;
  --bc-emerald-2: #0a6b68;
  --bc-green: #003c3c;
  --bc-teal: #1a7f72;

  /* --- Ink ------------------------------------------------------------ */
  --bc-ink: #f4f2ec;
  --bc-ink-2: #b9c0b9;
  --bc-ink-3: #878e88;
  --bc-ink-on-brass: #1a1409;

  /* --- Brass (official #C8A068) ---------------------------------------- */
  --bc-brass: #c8a068;
  --bc-brass-soft: #e8cb96;
  --bc-brass-bright: #f2ddb0;
  --bc-brass-deep: #9d7642;
  --bc-brass-dark: #7a5a30;

  /* Lit-metal ramps. `sheen` is for moving highlights, `edge` for hairline
     rules and bevels, `plate` for large filled areas. */
  --bc-brass-sheen: linear-gradient(
    100deg,
    var(--bc-brass-deep) 0%,
    var(--bc-brass-soft) 32%,
    var(--bc-brass-bright) 48%,
    var(--bc-brass) 62%,
    var(--bc-brass-deep) 100%
  );
  --bc-brass-edge: linear-gradient(
    90deg,
    var(--bc-brass-dark) 0%,
    var(--bc-brass) 30%,
    var(--bc-brass-bright) 50%,
    var(--bc-brass) 70%,
    var(--bc-brass-dark) 100%
  );
  --bc-brass-plate: linear-gradient(
    168deg,
    var(--bc-brass-soft) 0%,
    var(--bc-brass) 34%,
    var(--bc-brass-deep) 66%,
    var(--bc-brass) 100%
  );

  /* --- Lines and states ------------------------------------------------ */
  --bc-line: rgba(244, 242, 236, 0.14);
  --bc-line-2: rgba(244, 242, 236, 0.26);
  --bc-line-brass: rgba(200, 160, 104, 0.34);
  --bc-focus: #f2ddb0;
  --bc-scrim: rgba(6, 8, 7, 0.72);

  /* --- Reveal edge (hero aperture shader) ------------------------------ */
  --bc-reveal-edge: #2f6df6;

  /* --- Typography ------------------------------------------------------ */
  --font-display: "Bebas Neue", "Arial Narrow", "Haettenschweiler", Impact, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Arabic.
     Neither self-hosted face carries Arabic glyphs. Bebas Neue is a
     Latin-only condensed display cut and Inter is Latin-only body text, so
     there is deliberately NO @font-face here and no Arabic webfont to add:
     pointing an Arabic @font-face at a Latin woff2 renders tofu boxes. Arabic
     gets the platform's own face, in the order the platforms actually resolve
     one: SF Arabic on Apple, Geeza Pro as the macOS fallback, Noto Sans Arabic
     on Android/Linux and on Windows when installed, Segoe UI and Tahoma as the
     Windows fallbacks, Arial last. Every entry is a real Arabic face, so the
     stack degrades to a different design of the same script rather than to
     boxes. */
  --font-arabic: "SF Arabic", "Geeza Pro", "Noto Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;

  --fs-display-xl: clamp(3.75rem, 11.2vw, 10.5rem);
  --fs-display-l: clamp(2.75rem, 6.6vw, 6rem);
  --fs-display-m: clamp(2.125rem, 3.9vw, 3.75rem);
  --fs-display-s: clamp(1.625rem, 2.4vw, 2.5rem);
  --fs-h4: clamp(1.125rem, 1.4vw, 1.375rem);
  --fs-body: 1.0625rem;
  --fs-body-lg: clamp(1.0625rem, 1.2vw, 1.1875rem);
  --fs-small: 0.9375rem;
  --fs-meta: 0.8125rem;
  --fs-micro: 0.6875rem;

  --lh-tight: 0.92;
  --lh-display: 1.02;
  --lh-body: 1.6;

  --ls-display: 0.005em;
  --ls-meta: 0.16em;
  --ls-label: 0.08em;

  /* --- Space (8px base) ------------------------------------------------ */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 5.5rem;
  --s-10: 7rem;

  --section-y: clamp(3.5rem, 7vw, 7rem);
  --gutter: clamp(1.25rem, 4.5vw, 4.5rem);
  --measure: 68ch;
  --shell-max: 1440px;
  --shell-narrow: 1120px;

  /* --- Shape ----------------------------------------------------------- */
  --r-0: 0px;
  --r-1: 2px;
  --r-2: 4px;
  --r-pill: 999px;

  /* --- Motion ---------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 180ms;
  --dur: 320ms;
  --dur-slow: 720ms;

  --header-h: 76px;
}

@media (max-width: 767px) {
  :root {
    --header-h: 64px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur: 1ms;
    --dur-slow: 1ms;
  }
}
/* ==========================================================================
   The light canvas

   Prices, proof and visit run on a light canvas; the closing returns to dark.

   This remaps the SEMANTIC tokens rather than restyling components. Custom
   properties inherit, so every descendant of `[data-canvas="light"]` picks up
   the new values automatically and no component needs to know a light mode
   exists. That is the same mechanism the token layer is built for, and it is
   why the inversion does not become a second stylesheet to keep in step.

   The canvas is not cream. It is a pale stone carrying the shop's own emerald,
   so the light sections still read as Barber Castle rather than as generic
   paper, and the brass has to be deepened to hold contrast on a light ground:
   the official #C8A068 is a 2.1:1 accent against #e8ece9 and cannot be used for
   text there. `--bc-brass-bright` is kept at its official value for display-size
   use only.
   ========================================================================== */

[data-canvas="light"] {
  /* Surfaces: pale stone with a green cast, lifted surfaces slightly brighter */
  --bc-canvas: #e8ece9;
  --bc-canvas-2: #dfe5e1;
  --bc-surface: #f6f8f7;
  --bc-surface-2: #eef2f0;

  /* Ink: near-black with the same green cast as the canvas */
  --bc-ink: #0a0e0d;
  --bc-ink-2: #414b47;
  --bc-ink-3: #5d6763;
  --bc-ink-on-brass: #1a1409;

  /* Brass: the ramp inverts, because every one of these is also used as a text
     colour (41 uses of `--bc-brass` alone). On dark, "soft" and "bright" mean
     LIGHTER, which on paper would drop to 1.3:1. So on the light canvas the
     names mean DARKER: the light end of the ramp becomes the dark end. All six
     values are verified at 4.5:1 or better against both `--bc-canvas` and
     `--bc-surface` below. */
  --bc-brass: #7d5c1f;        /* 5.14:1 on canvas */
  --bc-brass-soft: #6b4d16;   /* 6.36:1 */
  --bc-brass-bright: #5a410e; /* 8.02:1 */
  --bc-brass-deep: #856228;   /* 4.66:1 on canvas */
  --bc-brass-dark: #57400f;   /* 8.21:1 */

  /* The brand greens are already dark enough to hold on light */
  --bc-emerald: #005050;
  --bc-emerald-2: #0a6b68;
  --bc-green: #003c3c;
  --bc-teal: #16736a;   /* 4.77:1 — the dark value is 4.07:1 on paper */

  /* Lines and states */
  --bc-line: rgba(10, 14, 13, 0.16);
  --bc-line-2: rgba(10, 14, 13, 0.3);
  --bc-line-brass: rgba(138, 102, 38, 0.4);
  --bc-focus: #6d4f1e;
  --bc-scrim: rgba(10, 14, 13, 0.55);
}

/* ==========================================================================
   Arabic / RTL

   This block comes last in the file on purpose: `:root` and `[data-canvas]`
   are all specificity (0,1,0), so an RTL block placed before them would be
   silently overridden by the light canvas. It remaps the tokens, which every
   descendant then inherits — the same mechanism the light canvas uses, and the
   reason Arabic needs no second stylesheet.

   THE LETTER-SPACING RULE. Arabic letters join along a baseline. A positive
   letter-spacing inserts advance width between every pair, which breaks each
   joining pair and renders the word as disconnected isolated forms — not
   "loose tracking", but letters that are no longer the same word. --ls-meta is
   0.16em, so this is not a subtle effect. Every tracking token is therefore 0
   under RTL, and base.css additionally forces the property to 0 on every
   element, because the seven sheets also carry literal em values that do not
   read these tokens and cannot all be audited by hand.

   THE UPPERCASE RULE. Arabic has no letter case, so text-transform is inert
   on translated copy. It is neutralised anyway so that Latin text which has not
   been translated yet — the brand name, "AED", a phone number — does not sit
   inside an Arabic paragraph in full capitals.

   THE LINE-HEIGHT RULE. Bebas Neue's 0.92/1.02 leading is set for a Latin
   condensed cut with a small x-height and no descenders below the baseline. The
   Arabic faces have deep descenders (ج، ع، م، ي) and tall ascenders, so the same
   leading collides adjacent lines. Both are raised rather than trusted.
   ========================================================================== */

[dir="rtl"] {
  --font-display: var(--font-arabic);
  --font-body: var(--font-arabic);

  --ls-display: 0;
  --ls-meta: 0;
  --ls-label: 0;

  --lh-display: 1.3;
  --lh-tight: 1.24;
  --lh-body: 1.75;
}