/* =============================================================================
   VFincu design tokens — the single source of truth for both audiences.
   =============================================================================

   This block used to live in the :root of
   public/assets/frontend/css/design-system.css, which only the storefront loads.
   The admin panel needed the same palette, and the one thing guaranteed to rot
   is a second copy of a colour ramp. So it moved here, and design-system.css
   @imports it back at the very top of the file — an @import at the top of a
   stylesheet resolves in place, so the storefront cascade is unchanged
   byte-for-byte from before the extraction.

   Loaded by:
     resources/views/frontend/layouts/style.blade.php  (via design-system.css)
     resources/views/admin/core/layouts/admin.blade.php
     resources/views/frontend/layouts/supplier.blade.php
     resources/views/frontend/layouts/buyer.blade.php

   Rules, carried over from DESIGN_SYSTEM.md — they are what keep this file from
   restyling ~110 pages it was never asked to touch:

   1. Every token is prefixed --vf-. The legacy :root in
      public/asoug/css/style.css declares --primary, --secondary, --surface and
      ~25 more, and legacy CSS reads them. We never shadow those names.
   2. State the measured contrast ratio in a comment for any new text/background
      pair. Ratios here are computed, not estimated.
   3. This file declares tokens only. No component rules, no element selectors.
   ========================================================================== */


/* -----------------------------------------------------------------------------
   1. LIGHT / DEFAULT
   -------------------------------------------------------------------------- */

:root {
    /* --- Brand -------------------------------------------------------------
       #14003F is a near-black violet. It reads as ink, not as an accent, so it
       carries surfaces and primary buttons while --vf-accent carries links and
       interactive text. Contrast ratios below are measured against #ffffff. */
    /* These are exactly what App\Services\Core\BrandPalette derives from the
       default #14003f / #4a2a9c, so a default install renders identically whether
       or not the Appearance screen has ever been saved, and so this file is not a
       set of values permanently shadowed by the emitted brand block. Change the
       derivation, not these.

       600 is the hover step and 700 the active one, so pressed reads as a stronger
       hovered. The hand-picked values this replaces had 700 NEARER the base than
       600 and no active state at all, and both steps were a flat number of
       lightness points -- which lands a near-black hover on any brand that is
       already dark (#006C35 became #002A14, reading as the button switching off).
       The steps are a fraction of the remaining headroom now. */
    --vf-primary: #14003f;          /* 19.06:1 on white — white label is AAA */
    --vf-primary-700: #4100ce;      /* active  —  9.92:1 vs page */
    --vf-primary-600: #300098;      /* hover   — 13.30:1 vs page */
    --vf-primary-500: #4a2a9c;      /* 9.99:1 on white — links, active nav */
    --vf-primary-100: #edeaf5;      /* tint: selected rows, subtle fills */
    --vf-primary-50: #f8f6fb;

    /* Text that sits ON --vf-primary. Every white-on-brand declaration reads
       this rather than hard-coding #ffffff, because the brand colour is meant to
       become admin-editable: the planned BrandPalette recomputes it from real
       WCAG contrast and overrides this in a <style> block, so a pale brand gets
       black labels instead of invisible ones.
       NOTE: BrandPalette does not exist yet — see ADMIN_DASHBOARD_PLAN.md
       Phase 1.3. Until it does, this is simply the default. */
    --vf-on-primary: #ffffff;       /* 19.07:1 on the default brand */

    --vf-secondary: #ffeb3b;        /* 1.22:1 on white — NEVER put white text on it */
    --vf-secondary-600: #fbc02d;
    --vf-on-secondary: #14003f;     /* 15.61:1 on --vf-secondary — the only safe pair */

    --vf-accent: #4a2a9c;           /* alias of primary-500, used for links */

    /* --- Neutrals ----------------------------------------------------------
       Nine steps, surface to ink. 500 is the lightest step that still passes AA
       for body text on white (4.75:1); anything lighter is decoration only. */
    --vf-n-0: #ffffff;
    --vf-n-25: #fbfbfd;
    --vf-n-50: #f6f7f9;
    --vf-n-100: #eceef2;
    --vf-n-200: #dde0e7;            /* default border */
    --vf-n-300: #c3c8d4;            /* 1.9:1 — decorative only, never text */
    --vf-n-400: #8f97a8;            /* 2.9:1 — placeholder / disabled text only */
    --vf-n-500: #6b7385;            /* 4.75:1 — AA, smallest safe muted text */
    --vf-n-600: #4d5567;            /* 7.4:1 */
    --vf-n-700: #3d4453;            /* 9.77:1 — body copy */
    --vf-n-800: #262c38;
    --vf-n-900: #14181f;            /* 17.79:1 — headings */

    /* --- Semantic roles ---------------------------------------------------- */
    --vf-surface: var(--vf-n-0);
    --vf-surface-sunken: var(--vf-n-50);
    --vf-surface-raised: var(--vf-n-0);
    --vf-ink: var(--vf-n-900);
    --vf-body: var(--vf-n-700);
    /* Not var(--vf-n-500) any more: .vf-table th paints this on
       --vf-surface-sunken, where #6b7385 measured 4.44:1 -- under AA, against a
       comment claiming 4.75 that was again measured on white. */
    --vf-muted: #697182;            /* 4.57:1 on --vf-surface-sunken, 4.90:1 on white */
    --vf-border: var(--vf-n-200);
    --vf-border-strong: var(--vf-n-300);

    /* Measured against the surface each is actually painted on, not against
       white. Six rules are literally `background: var(--vf-success-bg);
       color: var(--vf-success)` -- .vf-delta-up, .vf-pill-in, .vf-state--success,
       .vf-badge--success, .vf-stat--success .vf-stat__icon and
       .vf-alert--success -- and #12805c on #e7f5f0 measured 4.39:1, under AA.
       The old comment's 4.92 was the ratio against white: correct for the token,
       wrong for every rule that uses it. Sizes rule out the 3:1 large-text
       allowance -- --vf-text-2xs is 12px and .vf-pill-in's parent sets 10px.
       One step darker clears it on both surfaces. */
    --vf-success: #117c59;          /* 4.62:1 on --vf-success-bg, 5.18:1 on white */
    --vf-warning: #a15c07;          /* 5.19:1 on white - warning TEXT (the 4.6 here was mismeasured) */
    --vf-warning-fill: #f59e0b;     /* fills / icons only */
    --vf-danger: #c62348;           /* 5.62:1 on white */
    --vf-info: #0b6bb5;             /* 5.55:1 on white */

    --vf-success-bg: #e7f5f0;
    --vf-warning-bg: #fdf3e3;
    --vf-danger-bg: #fdeaee;
    --vf-info-bg: #e8f2fb;

    /* --- Commerce ----------------------------------------------------------
       Price is ink, not brand: it must be the highest-contrast thing on a card.
       Sale red doubles as danger so the two never drift apart. */
    --vf-price: var(--vf-n-900);
    --vf-price-was: var(--vf-n-500);
    --vf-sale: #c62348;             /* 5.62:1 on white */
    --vf-sale-bg: #c62348;
    --vf-on-sale: #ffffff;          /* 5.62:1 on --vf-sale-bg */
    --vf-rating: #d97706;           /* 3.19:1 on white — meets 3:1 for non-text */
    --vf-stock-in: #12805c;
    --vf-stock-low: #a15c07;
    --vf-stock-out: var(--vf-n-500);

    /* --- Typography --------------------------------------------------------
       Two self-hosted WOFF2 families, declared in vf-fonts.css:
         Roboto               (Apache 2.0)  — Latin
         IBM Plex Sans Arabic (SIL OFL 1.1) — Arabic

       Previously this was system stacks only, on the reasoning that every
       platform already resolves an Arabic-capable face. That held for glyph
       coverage but not for WEIGHT: the admin panel's Segoe UI registration in
       public/css/fonts.css declared four separate FAMILIES rather than four
       weights of one, so nothing in the panel had a real bold to resolve to,
       and the Arabic face (MOLarabic) ships a single `normal` weight. A KPI
       dashboard is built out of weight contrast, so both were replaced.

       The system stack is retained after the webfont in each list, so a page
       that has not yet been given vf-fonts.css renders exactly as it did before.

       --vf-font-arabic leads with Plex Arabic and still lists Roboto, so Latin
       fragments inside Arabic copy stay in one texture rather than switching
       family mid-line. */
    --vf-font-sans: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI",
        "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --vf-font-arabic: "IBM Plex Sans Arabic", "Noto Sans Arabic", "Segoe UI",
        Tahoma, "Noto Naskh Arabic", "Geeza Pro", sans-serif;
    /* Figures in tables, KPI tiles and money. Tabular so columns of numbers
       line up and a changing value does not reflow its neighbours. */
    --vf-font-numeric: "Roboto", "IBM Plex Sans Arabic", ui-monospace, sans-serif;

    /* Modular scale, 1.125 → 1.25 as sizes grow */
    --vf-text-2xs: 0.75rem;         /* 12px — badges, meta */
    --vf-text-xs: 0.8125rem;        /* 13px */
    --vf-text-sm: 0.875rem;         /* 14px */
    --vf-text-base: 1rem;           /* 16px — body floor, never go under this */
    --vf-text-lg: 1.125rem;         /* 18px */
    --vf-text-xl: 1.25rem;          /* 20px */
    --vf-text-2xl: 1.5rem;          /* 24px */
    --vf-text-3xl: 1.875rem;        /* 30px */
    --vf-text-4xl: 2.25rem;         /* 36px */
    --vf-text-5xl: 3rem;            /* 48px */

    --vf-leading-tight: 1.2;
    --vf-leading-snug: 1.35;
    --vf-leading-normal: 1.55;
    --vf-leading-relaxed: 1.75;

    --vf-weight-normal: 400;
    --vf-weight-medium: 500;
    --vf-weight-semibold: 600;
    --vf-weight-bold: 700;

    /* --- Spacing: 4px base ------------------------------------------------- */
    --vf-space-1: 0.25rem;          /* 4  */
    --vf-space-2: 0.5rem;           /* 8  */
    --vf-space-3: 0.75rem;          /* 12 */
    --vf-space-4: 1rem;             /* 16 */
    --vf-space-5: 1.5rem;           /* 24 */
    --vf-space-6: 2rem;             /* 32 */
    --vf-space-7: 3rem;             /* 48 */
    --vf-space-8: 4rem;             /* 64 */

    /* --- Radius ------------------------------------------------------------ */
    --vf-radius-sm: 4px;
    --vf-radius-md: 8px;
    --vf-radius-lg: 12px;
    --vf-radius-xl: 16px;
    --vf-radius-pill: 999px;

    /* --- Elevation ---------------------------------------------------------- */
    --vf-shadow-xs: 0 1px 2px rgba(20, 0, 63, 0.06);
    --vf-shadow-sm: 0 1px 3px rgba(20, 0, 63, 0.08), 0 1px 2px rgba(20, 0, 63, 0.04);
    --vf-shadow-md: 0 4px 12px rgba(20, 0, 63, 0.08);
    --vf-shadow-lg: 0 12px 28px rgba(20, 0, 63, 0.12);
    --vf-shadow-focus: 0 0 0 3px rgba(74, 42, 156, 0.35);

    /* --- Motion ------------------------------------------------------------- */
    --vf-duration-fast: 120ms;
    --vf-duration-base: 200ms;
    --vf-duration-slow: 320ms;
    --vf-ease: cubic-bezier(0.4, 0, 0.2, 1);

    /* --- Z-index ------------------------------------------------------------
       Named so nobody has to invent another 9999. */
    --vf-z-base: 1;
    --vf-z-sticky: 100;
    --vf-z-header: 200;
    --vf-z-dropdown: 300;
    --vf-z-overlay: 400;
    --vf-z-modal: 500;
    --vf-z-toast: 600;

    /* --- Layout -------------------------------------------------------------
       Breakpoints match Bootstrap 5 so utility classes and custom media queries
       never disagree about where a layout changes. */
    --vf-container-max: 1320px;
    --vf-bp-sm: 576px;
    --vf-bp-md: 768px;
    --vf-bp-lg: 992px;
    --vf-bp-xl: 1200px;
    --vf-bp-xxl: 1400px;

    /* Touch target floor — WCAG 2.5.5 / practical thumb size */
    --vf-tap: 44px;

    /* --- Charts ------------------------------------------------------------
       A fixed categorical order, assigned by slot and NEVER cycled. A ninth
       series is not a generated ninth hue: it folds into "Other", becomes small
       multiples, or the chart is faceted.

       Validated as a set against this file's own surfaces, not adopted on trust.
       Light, against --vf-surface #ffffff:
         lightness band  all 8 inside L 0.43-0.77      pass
         chroma floor    all 8 >= 0.1                  pass
         CVD separation  worst adjacent 9.1 (protan)   pass  (>=8 target)
         normal vision   worst adjacent 19.6           pass  (>=15 floor)
         contrast        3 slots under 3:1             RELIEF REQUIRED
       Dark, against --vf-surface-raised #1b2029:
         CVD separation  worst adjacent 8.4 (protan)   pass
         normal vision   worst adjacent 19.3           pass
         contrast        all 8 >= 3:1                  pass

       Two conditions come with these numbers:

       1. RELIEF. In light mode --vf-chart-3 (2.82:1), -4 (2.17:1) and -5 (2.69:1)
          sit under 3:1 on white. That is a documented conditional relax, not a
          pass: any chart using them MUST carry visible direct labels or a legend
          with values, or offer the table view. Colour alone is not enough.
       2. A THREE-SLOT CAP for forms where any series can end up adjacent to any
          other -- scatter, bubble, choropleth. Only the first three slots clear
          the floors across all pairs. Bars, stacks and lines compare neighbours
          only and may use all eight.

       Dark is stepped for the dark surface, not flipped: same eight hues, chosen
       for the L 0.48-0.67 band. */
    --vf-chart-1: #2a78d6;          /* blue    */
    --vf-chart-2: #eb6834;          /* orange  */
    --vf-chart-3: #1baf7a;          /* aqua    — 2.82:1, needs relief */
    --vf-chart-4: #eda100;          /* yellow  — 2.17:1, needs relief */
    --vf-chart-5: #e87ba4;          /* magenta — 2.69:1, needs relief */
    --vf-chart-6: #008300;          /* green   */
    --vf-chart-7: #4a3aa7;          /* violet  */
    --vf-chart-8: #e34948;          /* red     */

    /* Chart chrome. Recessive by design: the grid is a reference, not content,
       and axis text wears a text token rather than a series colour. */
    --vf-chart-grid: var(--vf-n-100);
    --vf-chart-axis: var(--vf-muted);
    --vf-chart-label: var(--vf-body);

    /* --- Back-office shell -------------------------------------------------
       These were literals scattered through public/css/admin.css. Same values,
       so the panel looks identical; they are tokens now so the dark ramp below
       and the future BrandPalette have something to override. */
    --vf-sidebar-w: 250px;
    --vf-sidebar-bg: #0f172a;       /* admin.css:35 */
    --vf-sidebar-fg: #8391a2;       /* admin.css:47 — 5.29:1 on --vf-sidebar-bg */
    --vf-sidebar-fg-active: #ffffff;
    --vf-sidebar-active-bg: rgb(255 255 255 / 0.12);
    --vf-sidebar-divider: #8391a2;
    --vf-topbar-bg: var(--vf-n-0);
    --vf-topbar-fg: var(--vf-body);
    --vf-shell-bg: #fbfcfd;         /* admin.css:18 — the panel body background */

    /* Customizer-facing surfaces (doc/DASHBOARD_V2_PLAN.md T0/T1). Wired to the
       values these surfaces already render today, so declaring them changes
       nothing; SurfaceTheme overrides them from admin settings. The header ink
       is its own token because a coloured header needs its own readable title
       colour (derived) while every other title keeps --vf-title-ink. */
    --vf-card-header-bg: transparent;
    --vf-card-header-ink: var(--vf-title-ink);
    --vf-title-ink: var(--vf-ink);
}


/* -----------------------------------------------------------------------------
   2. DARK
   -----------------------------------------------------------------------------
   Driven by [data-bs-theme="dark"] on <html>, which is Bootstrap 5.3's own
   colour-mode switch — so stock components and these tokens flip together off
   one attribute. See resources/views/admin/core/layouts/admin.blade.php for how
   the attribute is resolved (cookie server-side, then a no-flash inline script).

   Dark is NOT an inversion. Two things break if it is:

   1. Every light-mode status colour fails on a dark surface. Measured against
      --vf-surface-raised #1b2029:
          --vf-success #12805c → 3.32:1   FAIL
          --vf-warning #a15c07 → 3.15:1   FAIL
          --vf-danger  #c62348 → 2.91:1   FAIL
          --vf-info    #0b6bb5 → 2.94:1   FAIL
          --vf-accent  #4a2a9c → 1.64:1   FAIL
      All five are re-picked below, and every replacement is measured.

   2. Elevation cannot be a shadow. A dark shadow on a dark surface is
      invisible, so "raised" becomes a lighter surface step instead, and the
      shadow tokens drop to hairlines that only separate overlays.
   -------------------------------------------------------------------------- */

[data-bs-theme="dark"] {
    /* Surfaces: sunken → base → raised, each a real step lighter. */
    --vf-surface: #14181f;          /* same value as the light ink — coherent, not arbitrary */
    --vf-surface-sunken: #0f1319;
    --vf-surface-raised: #1b2029;

    /* Text. Ratios against --vf-surface-raised #1b2029, the worst case, since
       cards are the most common background in the panel. */
    --vf-ink: #f2f4f8;              /* 14.84:1 — AAA, headings */
    --vf-body: #d4d9e3;             /* 11.54:1 — AAA, body copy */
    --vf-muted: #9aa3b4;            /*  6.44:1 — AA,  muted text */

    /* Borders. --vf-border is decorative (card edges, dividers) and is allowed
       to sit under 3:1. --vf-border-strong carries meaning — input outlines,
       focus targets — so it is picked to clear 3:1 for non-text contrast. */
    --vf-border: #2a3140;           /*  1.25:1 — decorative only */
    --vf-border-strong: #5f6b82;    /*  3.04:1 — AA for non-text */

    /* Brand. #14003f is near-black; on a dark surface it is a hole, not a
       colour, so the brand lightens for fills and further still for text.
       These are the values App\Services\Core\BrandPalette derives from the
       default #14003f, so a default install renders identically whether or not
       the Appearance screen has ever been saved. Do not hand-tune them here
       without changing the derivation -- they will disagree.

       A filled control needs TWO ratios, not one, and the pair below was
       originally picked on the first alone: --vf-primary was #5b37bf, chosen for
       its 7.65:1 white label, but that colour is only 2.13:1 against
       --vf-surface-raised -- under the 3:1 that WCAG 1.4.11 requires for the
       boundary of a UI component. Every primary button in dark mode had no
       visible edge. #7c3fff trades label contrast down to a still-AA 5.23:1 to
       buy a real 3.12:1 edge. */
    --vf-primary: #7c3fff;          /* 3.12:1 vs raised surface — AA non-text; white label 5.23:1 */
    /* Both of these were a full step lighter (#9665ff / #a67cff) and both painted
       the white label below AA: 3.75:1 and 3.02:1. design-system.css swaps them
       in as the button BACKGROUND on hover and active while the label stays
       --vf-on-primary, and BrandPalette::ramp() validated each derived step only
       against the PAGE (3:1 non-text), never against the label it carries. The
       shipped default palette had the defect too, not just admin-chosen brands.
       Derived by the engine now, and checked against both thresholds. */
    --vf-primary-600: #8851ff;      /* hover  — 3.63:1 vs surface, white label 4.50:1 */
    --vf-primary-700: #874eff;      /* active — 3.55:1 vs surface, white label 4.60:1.
                                       Both lighter than --vf-primary, never darker:
                                       darkening would spend the edge above. They sit
                                       close together because the label floor and the
                                       page floor squeeze this brand from both sides. */
    --vf-primary-500: #b5a2e6;      /* 7.22:1 — AAA, links and active nav */
    --vf-primary-100: #313143;      /* tint: selected rows — decorative, no text bar */
    --vf-primary-50: #242633;
    --vf-on-primary: #ffffff;       /* 5.23:1 on --vf-primary — AA */
    --vf-accent: #b5a2e6;           /* 7.22:1 — AAA */

    /* --vf-secondary is the brand yellow. It is already light, so it does not
       move; only the text that sits on it is re-checked, and #14003f on #ffeb3b
       is 15.61:1 in either mode. */
    --vf-on-secondary: #14003f;

    /* Status — all re-picked, all measured on #1b2029. */
    --vf-success: #34d399;          /*  8.50:1 — AAA */
    --vf-warning: #fbbf24;          /*  9.79:1 — AAA, warning TEXT */
    --vf-warning-fill: #f59e0b;     /*  7.61:1 — fills / icons */
    --vf-danger: #ff7a93;           /*  6.58:1 — AA  */
    --vf-info: #6bb8f5;             /*  7.63:1 — AAA */

    /* Status tints: dark, desaturated beds for the colours above, not the light
       pastels — a #e7f5f0 panel in dark mode is a flashlight. */
    --vf-success-bg: #10261f;
    --vf-warning-bg: #2a2010;
    --vf-danger-bg: #2c1620;
    --vf-info-bg: #10202e;

    /* Commerce */
    --vf-price: var(--vf-ink);
    --vf-price-was: var(--vf-muted);
    --vf-sale: #ff7a93;             /*  6.58:1 */
    --vf-sale-bg: #c62348;          /* white on it: 5.62:1 — badge fill is unchanged */
    --vf-on-sale: #ffffff;
    --vf-rating: #fbbf24;           /*  9.79:1 — comfortably over the 3:1 non-text floor */
    --vf-stock-in: #34d399;
    --vf-stock-low: #fbbf24;
    --vf-stock-out: var(--vf-muted);

    /* Elevation: hairlines, not shadows. */
    --vf-shadow-xs: 0 0 0 1px rgba(255, 255, 255, 0.04);
    --vf-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04);
    --vf-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.05);
    --vf-shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06);
    --vf-shadow-focus: 0 0 0 3px rgba(181, 162, 230, 0.4);

    /* Charts. The same eight hues, re-stepped for the dark band (OKLCH
       L 0.48-0.67) and validated as a set against --vf-surface-raised. All eight
       clear 3:1 here, so the light-mode relief rule does not apply in dark -- but
       the three-slot all-pairs cap still does. */
    --vf-chart-1: #3987e5;          /* blue    */
    --vf-chart-2: #d95926;          /* orange  */
    --vf-chart-3: #199e70;          /* aqua    */
    --vf-chart-4: #c98500;          /* yellow  */
    --vf-chart-5: #d55181;          /* magenta */
    --vf-chart-6: #008300;          /* green   */
    --vf-chart-7: #9085e9;          /* violet  */
    --vf-chart-8: #e66767;          /* red     */

    --vf-chart-grid: #2a3140;
    --vf-chart-axis: var(--vf-muted);
    --vf-chart-label: var(--vf-body);

    /* Shell. The sidebar is already near-black in light mode, so in dark mode it
       goes DARKER than the content area rather than lighter — otherwise the
       navigation reads as the raised element on the page. */
    --vf-sidebar-bg: #0d1117;
    --vf-sidebar-fg: #9aa3b4;       /*  7.72:1 on --vf-sidebar-bg */
    --vf-sidebar-fg-active: #ffffff;
    --vf-sidebar-active-bg: rgb(255 255 255 / 0.1);
    --vf-topbar-bg: var(--vf-surface-raised);
    --vf-topbar-fg: var(--vf-body);
    --vf-shell-bg: var(--vf-surface);

    /* Customizer-facing surfaces — dark counterparts. --vf-ink is already the
       dark-mode ink at this point in the cascade, so the aliases hold. */
    --vf-card-header-bg: transparent;
    --vf-card-header-ink: var(--vf-title-ink);
    --vf-title-ink: var(--vf-ink);
}


/* -----------------------------------------------------------------------------
   3. BOOTSTRAP BRIDGE — DARK ONLY
   -----------------------------------------------------------------------------
   Bootstrap 5.3 ships a complete dark mode of its own, keyed off the same
   attribute. Left alone, the two systems agree on the mechanism but not on the
   values: Bootstrap's dark body is #212529 against our #14181f, which reads as
   two different greys on one screen. So the handful of Bootstrap variables that
   set surfaces and text are pointed at our tokens.

   Deliberately scoped to dark. Bootstrap's LIGHT defaults are left untouched,
   including --bs-primary — rebranding stock components is Phase 1 (BrandPalette,
   which validates the contrast of an admin-chosen colour before applying it).
   Overriding --bs-primary here would restyle every button in the panel as a side
   effect of adding dark mode, which is not what this change is for.
   -------------------------------------------------------------------------- */

[data-bs-theme="dark"] {
    --bs-body-bg: var(--vf-surface);
    --bs-body-bg-rgb: 20, 24, 31;
    --bs-body-color: var(--vf-body);
    --bs-emphasis-color: var(--vf-ink);
    --bs-secondary-color: var(--vf-muted);
    --bs-tertiary-color: var(--vf-muted);
    --bs-secondary-bg: var(--vf-surface-raised);
    --bs-tertiary-bg: var(--vf-surface-sunken);
    --bs-border-color: var(--vf-border);
    --bs-border-color-translucent: rgba(255, 255, 255, 0.12);
    --bs-heading-color: var(--vf-ink);
    --bs-link-color: var(--vf-accent);
    --bs-link-hover-color: #c9b8ff;
    --bs-code-color: #ff9fb4;
}


/* -----------------------------------------------------------------------------
   4. ARABIC TYPE CORRECTION
   -----------------------------------------------------------------------------
   Arabic script has no capitals and hangs its distinguishing marks above and
   below the baseline, so at the same nominal size it reads smaller and needs
   more leading than Latin. Correcting it per-component never holds; it is set
   once, on the root font size, which the rem-based --vf-text-* scale then
   follows automatically. 1rem = 16px in LTR, 17px in RTL.

   Scoped to [data-vf-shell="admin"], which the three back-office layouts set on
   <html>. It is NOT applied to the storefront: this file is shared, the
   storefront is Arabic-first, and Bootstrap sizes almost everything in rem — so
   an unscoped rule here would silently grow every storefront page by 6% as a
   side effect of restyling the admin panel.
   -------------------------------------------------------------------------- */

html[data-vf-shell="admin"][dir="rtl"] {
    font-size: 106.25%;             /* 17px */
}