/* ==========================================================================
   Barari Gold — design tokens and CSS conventions
   FE-01 asset layer · FE-38 RTL convention
   --------------------------------------------------------------------------
   Design source: _handoff/barari-gold-website.html
   There is no build step. This file is served verbatim from
   public/assets/barari/ and linked in layouts/front-end/app.blade.php. It
   carries tokens and the .barari-* primitives only; base.css, linked
   immediately after it, carries the document base. FE-02 removed the 6valley
   theme cascade that used to sit above both, so these rules no longer compete
   with anything.
   ==========================================================================

   RTL CONVENTION (FE-38) — read before adding a rule
   --------------------------------------------------------------------------
   This theme has no rtl.css and inherits nothing. Every new rule must work in
   both directions on its own. The convention is LOGICAL PROPERTIES:

       margin-left        ->  margin-inline-start
       margin-right       ->  margin-inline-end
       padding: a b c d   ->  padding-block: a c; padding-inline: b d
       left / right       ->  inset-inline-start / inset-inline-end
       border-left        ->  border-inline-start
       text-align: left   ->  text-align: start
       float: right       ->  float: inline-end

   Write a paired [dir="rtl"] rule ONLY for what logical properties cannot
   express. That is a closed list:

       - gradient angles          (linear-gradient(135deg, ...))
       - transforms               (translateX, rotate, skew)
       - background-position      (x component)
       - box-shadow / text-shadow (x offset)
       - clip-path and shape-outside coordinates

   Direction-dependent values that recur belong in a token below, flipped once
   in the [dir="rtl"] block, not repeated at every call site.

   NAMING
   --------------------------------------------------------------------------
   Tokens are --barari-*. Classes are .barari-*. Both namespaces are ours
   alone; nothing in the 6valley theme uses either prefix, so no rule here can
   be captured by theme CSS and no theme rule can be captured by ours.

   MONEY
   --------------------------------------------------------------------------
   Never compute a monetary value in CSS counters or JavaScript. Values arrive
   from the backend as decimal strings and are rendered as given. Use
   .barari-num for tabular alignment.
   ========================================================================== */

:root {
  /* Palette — mockup :root, unchanged */
  --barari-brown:#2A1A12;
  --barari-bronze:#805D44;
  --barari-gold:#C79A6E;
  --barari-ivory:#F1F1ED;
  --barari-cedar:#203A2E;
  --barari-glacier:#C2D5EA;

  /* Surfaces */
  --barari-surface:var(--barari-ivory);
  --barari-surface-sunken:#EAE8E2;
  --barari-surface-deep:#1E120B;
  --barari-surface-field:#fff;
  --barari-deck:#DCDAD2;

  /* Rules and washes on light ground */
  --barari-rule:rgba(42,26,18,.14);
  --barari-ink:var(--barari-brown);
  --barari-ink-70:rgba(42,26,18,.70);
  --barari-ink-60:rgba(42,26,18,.60);
  --barari-ink-52:rgba(42,26,18,.52);
  --barari-wash:rgba(42,26,18,.05);

  /* Rules and washes on the brown ground */
  --barari-rule-dark:rgba(241,241,237,.16);
  --barari-ink-on-dark:var(--barari-ivory);
  --barari-ink-on-dark-72:rgba(241,241,237,.72);
  --barari-ink-on-dark-56:rgba(241,241,237,.56);
  --barari-ink-on-dark-50:rgba(241,241,237,.50);

  /* Status grounds */
  --barari-cedar-wash:rgba(32,58,46,.10);
  --barari-glacier-wash:rgba(194,213,234,.40);
  --barari-gold-wash:rgba(199,154,110,.18);
  --barari-alarm:#4A2418;
  --barari-caution:#8A4B22;

  /* Type */
  --barari-serif:"Instrument Serif",Georgia,serif;
  --barari-sans:"Plus Jakarta Sans",system-ui,sans-serif;
  --barari-arabic:"IBM Plex Sans Arabic",system-ui,sans-serif;
  --barari-font-display:var(--barari-serif);
  --barari-font-body:var(--barari-sans);

  --barari-text-hero:62px;
  --barari-text-title:44px;
  --barari-text-section:31px;
  --barari-text-lead:17px;
  --barari-text-body:15px;
  --barari-text-ui:13.5px;
  --barari-text-meta:12.5px;
  --barari-text-fine:11.5px;

  --barari-leading-tight:1.1;
  --barari-leading-body:1.65;
  --barari-leading-loose:1.8;

  /* Space — the recurring steps in the mockup */
  --barari-space-1:4px;
  --barari-space-2:8px;
  --barari-space-3:12px;
  --barari-space-4:16px;
  --barari-space-5:20px;
  --barari-space-6:24px;
  --barari-space-7:30px;
  --barari-space-8:40px;
  --barari-space-9:56px;
  --barari-space-10:70px;
  --barari-gutter:40px;
  --barari-measure:1240px;

  /* Radius — the house style is nearly square */
  --barari-radius-sharp:2px;
  --barari-radius:4px;
  --barari-radius-card:7px;
  --barari-radius-panel:12px;
  --barari-radius-pill:20px;

  /* Elevation */
  --barari-shadow-card:0 12px 30px rgba(12,6,2,.34);
  --barari-shadow-lift:0 26px 60px rgba(12,6,2,.55);

  /* Direction-dependent — flipped once in the [dir=rtl] block below */
  --barari-gradient-gold:linear-gradient(135deg,#8E6A4C,#C79A6E);
  --barari-gradient-metal:linear-gradient(150deg,#8A6340,#C79A6E);

  /* Motion */
  --barari-ease:cubic-bezier(.2,.6,.3,1);
  --barari-duration:.18s;
}

/* Arabic reads in its own face. One token swap covers every element that
   inherits --barari-font-body; no per-component RTL rule is needed. */
[dir="rtl"] {
  --barari-font-body:var(--barari-arabic);
  --barari-gradient-gold:linear-gradient(225deg,#8E6A4C,#C79A6E);
  --barari-gradient-metal:linear-gradient(210deg,#8A6340,#C79A6E);
}

@media (prefers-reduced-motion: reduce) {
  :root { --barari-duration:.01ms; }
}

/* --------------------------------------------------------------------------
   Base primitives
   Scoped to the .barari-* namespace so they are inert until a screen opts in.
   -------------------------------------------------------------------------- */

.barari-btn {
  font-family:var(--barari-font-body);
  font-size:var(--barari-text-ui);
  font-weight:500;
  line-height:1.2;
  border:0;
  border-radius:var(--barari-radius-sharp);
  padding-block:13px;
  padding-inline:26px;
  cursor:pointer;
  text-align:center;
  text-decoration:none;
  display:inline-block;
  transition:opacity var(--barari-duration) var(--barari-ease);
}

.barari-btn:disabled,
.barari-btn[aria-disabled="true"] { opacity:.4; cursor:not-allowed; }

.barari-btn--gold  { background:var(--barari-gradient-gold); color:#231409; }
.barari-btn--dark  { background:var(--barari-brown); color:var(--barari-ivory); }
.barari-btn--cedar { background:var(--barari-cedar); color:var(--barari-ivory); }
.barari-btn--line  { background:transparent; color:var(--barari-ivory); border:1px solid rgba(241,241,237,.34); }
.barari-btn--ghost { background:transparent; color:var(--barari-brown); border:1px solid var(--barari-rule); }

/* Prices, weights, countdowns — never let digits reflow between updates. */
.barari-num { font-variant-numeric:tabular-nums; }

/* Focus is brand-coloured and never removed. */
.barari-btn:focus-visible,
.barari-num:focus-visible,
[class^="barari-"]:focus-visible,
[class*=" barari-"]:focus-visible {
  outline:2px solid var(--barari-bronze);
  outline-offset:3px;
}