/* ============================================================
   Design Tokens — overrides common-theme.css :root defaults
   RULE: :root block + body + :lang(ar) ONLY.
         No element selectors, no transitions, no !important.
         Radius/shadow flow into common-theme automatically.
   Load AFTER common-theme.css
   ============================================================ */

:root {
  /* ── WhyGoLess brand ramp ─────────────────────────────────────
     THE single source of color for this application. Verbatim from
     WhyGoLess-Data/WGL_Quotation_Builder.html (its :root, lines 8-11),
     which is the brand's authoritative palette statement.

     Theme files map --bs-* / --s-* onto these. Component files must
     never name a color literal — if a value is missing here, add it
     here first.

     Contrast invariants (do not break these):
       * --wgl-yellow is a FILL, never text on a light surface
         (#FFD400 on white = 1.4:1). For yellow-family text/icons on
         light, --wgl-yellow-deep is the only legal choice.
       * A --wgl-yellow fill always carries --wgl-black text (13.4:1),
         never white.
       * --wgl-yellow as text is legal on dark only (12.8:1 on #111).  */

  /* brand — verbatim */
  --wgl-yellow:       #FFD400;
  --wgl-yellow-deep:  #B99A00;
  --wgl-tint:         #FFF6C9;
  --wgl-black:        #111111;
  --wgl-ink2:         #1B1B1B;
  --wgl-white:        #FFFFFF;
  --wgl-paper:        #FAFAF8;
  --wgl-gray:         #6B7280;
  --wgl-gray-lt:      #9C9C9C;
  --wgl-line:         #E7E5E0;
  --wgl-red:          #C0392B;

  /* derived — lightness steps of the above for interaction states.
     No new hues: -hi/-lo are ±L on --wgl-yellow, ink3 is +L on ink2. */
  --wgl-yellow-hi:    #FFDF3D;   /* hover lift */
  --wgl-yellow-lo:    #E6BF00;   /* pressed    */
  --wgl-tint-2:       #FFFBE6;   /* alt-row wash */
  --wgl-ink3:         #2A2A2A;   /* dark elevated surface */

  /* warm neutral steps between --wgl-paper and --wgl-line, for the
     secondary/tertiary surfaces Bootstrap expects. Same warmth. */
  --wgl-paper-2:      #F1EFEA;
  --wgl-paper-3:      #F6F4F0;

  /* warm-ground readable steps — the mirror of the -lt twins below.
     The dashboard sits on the brand's mustard paper, so its cards
     composite to ~#F2E7C5 rather than white. Against that, --wgl-gray
     falls to 3.9:1 and --wgl-green to 3.9:1; --wgl-red to 4.4:1. Each
     gets one darkened twin, same hue, ~10% down in value, used only
     on that surface. */
  --wgl-gray-dk:      #606773;
  --wgl-green-dk:     #506F25;
  --wgl-red-dk:       #BA372A;

  /* dark-theme readable steps. Text on #111 needs value, not more
     saturation: --wgl-red at 4.0:1 and --wgl-gray at 3.6:1 both fail
     there, so each gets one lifted twin used only on dark. */
  --wgl-red-lt:       #E4685A;   /* --wgl-red, lifted for dark */
  --wgl-paper-dim:    #E6E4DF;   /* dark body text  */
  --wgl-paper-dim-2:  #C9C6C0;   /* dark nav text   */
  --wgl-ink-mute:     #6E6C67;   /* dark placeholder / deleted */
  --wgl-ink-mute-2:   #55534F;   /* dark disabled   */

  /* addition — the brand has no success color, and a yellow "Saved"
     reads as a warning. Olive at ~80deg hue, next door to the yellow's
     ~79deg, so it harmonizes instead of importing a foreign hue.
     Used ONLY for success / valid states. */
  --wgl-green:        #5A7D2A;
  --wgl-green-lt:     #8FBF4A;   /* dark-theme readable step */

  /* addition — money OWED but not yet paid, which is neither an error
     nor a success and so can borrow neither of the two above. Amber at
     ~32deg: far enough from the brand yellow (~52deg) that a pending
     figure cannot be mistaken for a brand fill, close enough that it
     still belongs to the same family. Dark enough to be TEXT — unlike
     --wgl-yellow, which is a fill only. 4.9:1 on paper.

     Used ONLY for pending / awaiting states. */
  --wgl-amber:        #B45309;
  --wgl-amber-lt:     #F0A44A;   /* dark-theme readable step */
  --wgl-amber-rgb:    180, 83, 9;

  /* rgb channel forms, for rgba() composition */
  --wgl-yellow-rgb:   255, 212, 0;
  --wgl-black-rgb:    17, 17, 17;
  --wgl-white-rgb:    255, 255, 255;
  --wgl-paper-rgb:    250, 250, 248;
  --wgl-red-rgb:      192, 57, 43;
  --wgl-green-rgb:    90, 125, 42;

  /* ── Typography ──────────────────────────────────────────── */
  --bs-body-font-family:
    "Be Vietnam Pro", "Cairo",
    -apple-system, BlinkMacSystemFont, "Segoe UI",
    Helvetica, Arial, sans-serif;
  --header-font: var(--bs-body-font-family);
  --s-tabular-font: var(--bs-body-font-family);
  --bs-body-font-size: 15px;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.6;

  /* ── Icons — FA7 Pro Light (outline appearance) ──────────── */
  --s-icon-font: "Font Awesome 7 Pro";
  --s-icon-solid: 300;
  --s-tool-icon-size: 1.2rem;

  /* ── Shape — Apple-style generous radius ─────────────────── */
  --bs-border-radius:      10px;
  --bs-border-radius-sm:    7px;
  --bs-border-radius-lg:   14px;
  --bs-border-radius-xl:   18px;
  --bs-border-radius-2xl:  24px;
  --bs-border-radius-pill: 999px;
  --bs-card-border-radius: 16px;

  /* ── Spacing ─────────────────────────────────────────────── */
  --s-col-gap:  0.85rem;
  --s-row-gap:  1.25rem;
  --bs-gutter-x: 1.5rem;

  /* ── Input sizing ────────────────────────────────────────── */
  --s-input-padding-v:    0.45rem;
  --s-input-line-height:  1.5rem;
  --s-input-inner-height: 2.35rem;

  /* ── Sidebar dimensions ──────────────────────────────────── */
  --s-sidebar-pane-width: 264px;
  --s-sidebar-band-width:  64px;

  /* ── Animation ───────────────────────────────────────────── */
  --s-transition:      0.2s ease;
  --s-transition-slow: 0.35s ease;

  /* ── Shadows — layered, and warmed onto the brand ink so shade
        sits in the same family as the type instead of a cold gray ── */
  --s-shadow-xs: 0 1px 3px rgba(var(--wgl-black-rgb),0.06);
  --s-shadow-sm: 0 2px 8px rgba(var(--wgl-black-rgb),0.07), 0 1px 2px rgba(var(--wgl-black-rgb),0.04);
  --s-shadow-md: 0 4px 16px rgba(var(--wgl-black-rgb),0.08), 0 1px 4px rgba(var(--wgl-black-rgb),0.04);
  --s-shadow-lg: 0 8px 32px rgba(var(--wgl-black-rgb),0.10), 0 2px 8px rgba(var(--wgl-black-rgb),0.05);
  --s-shadow-xl: 0 20px 60px rgba(var(--wgl-black-rgb),0.12), 0 4px 16px rgba(var(--wgl-black-rgb),0.06);

  /* ── Brand focus ring — from the source's
        `box-shadow:0 0 0 3px var(--ytint)` on :focus ── */
  --s-focus-ring: 0 0 0 3px var(--wgl-tint);
}

/* ── Font smoothing ─────────────────────────────────────────── */
body {
  font-family: var(--bs-body-font-family);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── Arabic bilingual ───────────────────────────────────────── */
:lang(ar),
[dir="rtl"] {
  font-family: "Cairo", var(--bs-body-font-family);
}

/* ── FontAwesome 7 Pro icon config ───────────────────────────
   1) Thin (Light 300) weight on solid/regular icons.
   2) Set the Pro family for bare `.fa` (v4 syntax, e.g. Serenity's
      `faIcon()` buttons + nav `icon:"fa fa-x"`) — FA7 only defines
      --_fa-family on explicit style classes, so bare `.fa` otherwise
      inherits the Arabic (Cairo) body font in RTL and renders as tofu.
   3) Enforce the FA font with !important so Cairo can never leak in.
      Brands/duotone keep their OWN family via their own --_fa-family. */
.fa, .fas, .fa-solid, .far, .fa-regular, .fal, .fa-light {
  --_fa-family: var(--fa-family, var(--fa-style-family, "Font Awesome 7 Pro"));
  font-weight: 300;
}
.fa, .fas, .fa-solid, .far, .fa-regular, .fal, .fa-light,
.fab, .fa-brands, .fad, .fa-duotone {
  font-family: var(--_fa-family) !important;
}