/*
    MADARIX (Almas) - design tokens (Wave 12A.2).

    Single source of truth for the visual identity: semantic Almas tokens
    (--almas-*) plus the mapping that re-points Bootstrap 5.3.3's own CSS
    variables (--bs-*) at them. Bootstrap stays the component foundation;
    this file only supplies values. Load order (both master pages):

        Bootstrap  ->  almas/tokens.css  ->  almas/base.css  ->  almas-ui.css

    Nothing here selects an element or a component class - only custom
    properties are declared. Token names are semantic (what a value is FOR),
    never page names, never language names: there is one token set for every
    language and both text directions. Direction (rtl/ltr) is decided by the
    application (html[dir], from the resolved localization context) and is
    not a token concern.

    THEMING
    Light is the default. Dark is token architecture only: every colour token
    is redefined under [data-bs-theme="dark"], exactly the attribute Bootstrap
    5.3 uses for colour modes. There is deliberately no theme switcher, no
    JavaScript, no persistence and no OS-preference detection in this slice -
    nothing sets the attribute yet, so the application renders light.
    Anything that must follow the active theme (all colours, shadows, the
    focus ring) is declared inside the theme blocks or in the shared
    ":root, [data-bs-theme]" block, so it is re-resolved inside any element
    that carries its own data-bs-theme, not only on <html>. Theme-independent
    scales (type, space, radius, control metrics) live once in :root.

    ACCESSIBILITY (contrast verified numerically for both themes)
      text tokens on their surfaces ................ >= 4.5:1 (WCAG AA)
      -text status tokens on surface AND on -subtle  >= 4.5:1
      control border, focus ring, status fills ..... >= 3:1 (non-text)
    Status colours therefore come in three roles: the plain token is a FILL
    or accent (icons, borders, badges, buttons); the -text token is for text
    on the surface or on the -subtle tint; -subtle is the tint background.
    The -rgb companions exist only for rgba() compositions and Bootstrap's
    own *-rgb variables; keep them in step with their hex twin.

    NAMING AND BRAND
    The product is shown to users as MADARIX. The technical namespace of this
    design system stays --almas-* (and the almas-* class names, the AlmasERP
    namespaces and the Almas* script identifiers): the visible brand and the
    implementation namespace are separate concerns, the namespace is already
    used throughout, and no --mdx-* alias layer exists (none is needed).

    TYPOGRAPHY
    System font stack only - no downloaded, licensed or CDN fonts. The stack
    is intended to give reasonable coverage of Arabic script (Persian,
    Kurdish Sorani, Arabic), Latin (English, Turkish) and Cyrillic (Russian)
    but does NOT promise identical rendering across operating systems, and it
    is never chosen per language. Selecting and self-hosting the definitive
    font family is a separate, later decision. No letter-spacing is applied
    to running text anywhere: it breaks the joining of Arabic-script letters.
*/


/* ==========================================================================
   1. Theme-independent scales
   ========================================================================== */
:root {
    /* ---- Typography ---------------------------------------------------- */
    --almas-font-family: system-ui, -apple-system, "Segoe UI", "Segoe UI Variable Text", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Noto Sans Arabic", "Noto Naskh Arabic", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --almas-font-family-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", "Cascadia Code", Consolas, Menlo, "Liberation Mono", monospace;

    /* Body text is 1rem (16px): Arabic-script text needs more size than Latin
       at the same value to read comfortably. Denser UI uses -sm / -xs. */
    --almas-font-size-xs: .75rem;
    --almas-font-size-sm: .875rem;
    --almas-font-size-md: 1rem;
    --almas-font-size-lg: 1.125rem;
    --almas-font-size-xl: 1.25rem;
    --almas-font-size-2xl: 1.5rem;
    --almas-font-size-3xl: 1.875rem;

    --almas-font-weight-regular: 400;
    --almas-font-weight-medium: 500;
    --almas-font-weight-semibold: 600;
    --almas-font-weight-bold: 700;

    /* Generous body leading - Arabic-script text carries taller ascenders and
       marks than Latin, and headings must not clip them. */
    --almas-line-height-tight: 1.25;
    --almas-line-height-snug: 1.35;
    --almas-line-height-base: 1.6;
    --almas-line-height-relaxed: 1.75;

    /* ---- Spacing ------------------------------------------------------- */
    /* Steps 1-4 follow Bootstrap's spacer steps (.25 / .5 / 1 / 1.5 rem).
       Step 5 stays at 2.5rem so existing layouts do not shift; 6-8 extend
       the scale upwards. */
    --almas-space-0: 0;
    --almas-space-1: .25rem;
    --almas-space-2: .5rem;
    --almas-space-3: 1rem;
    --almas-space-4: 1.5rem;
    --almas-space-5: 2.5rem;
    --almas-space-6: 3rem;
    --almas-space-7: 4rem;
    --almas-space-8: 5rem;

    /* ---- Radius (restrained: nothing above 1rem except the pill) -------- */
    --almas-radius-xs: .125rem;
    --almas-radius-sm: .25rem;
    --almas-radius-md: .5rem;
    --almas-radius-lg: .75rem;
    --almas-radius-xl: 1rem;
    --almas-radius-pill: 50rem;

    /* ---- Global measurements ------------------------------------------- */
    --almas-border-width: 1px;
    --almas-touch-target-min: 2.75rem;

    /* ---- Controls (inputs, selects, future buttons) -------------------- */
    --almas-control-height: 2.875rem;
    --almas-control-padding-block: .625rem;
    --almas-control-padding-inline: .75rem;
    --almas-control-border-width: var(--almas-border-width);
    --almas-control-radius: var(--almas-radius-md);
    --almas-focus-ring-width: 2px;
    --almas-focus-ring-offset: 2px;

    /* ---- Application shell (Site.master; see almas/shell.css) ----------- */
    /* Geometry. The header is a fixed height so the docked sidebar can stick
       directly beneath it. The overlay width is used by the small-viewport
       drawer only; min() keeps it inside a narrow screen. */
    --almas-shell-header-height: 3.5rem;
    --almas-shell-sidebar-width: 17rem;
    --almas-shell-sidebar-overlay-width: min(20rem, 85vw);

    /* Stacking. Aligned with Bootstrap 5.3's own scale (sticky 1020,
       offcanvas-backdrop 1040, offcanvas 1045, toast 1090) so future Bootstrap
       overlays (modals, dropdowns) stack sensibly against the shell. */
    --almas-z-shell-header: 1020;
    --almas-z-shell-backdrop: 1040;
    --almas-z-shell-drawer: 1045;
    --almas-z-shell-skip: 1100;

    /* Shell v2 foundation (declared in Step 2; first consumed by the Shell v2
       slice - nothing reads them yet, so the rendered UI is unchanged).
       Rail: the collapsed, icon-only sidebar width. Icon sizes: the three
       sizes of the future self-hosted SVG icon set, in rem so they follow the
       user's text size like the text beside them. */
    --almas-shell-sidebar-rail-width: 4rem;
    --almas-icon-size-sm: 1rem;
    --almas-icon-size-md: 1.25rem;
    --almas-icon-size-lg: 1.5rem;

    /* Motion. Only used inside prefers-reduced-motion: no-preference. */
    --almas-motion-duration: 200ms;
    --almas-motion-ease: cubic-bezier(.2, 0, 0, 1);
}


/* ==========================================================================
   2. Colour + elevation tokens - LIGHT (default)
   ========================================================================== */
:root,
[data-bs-theme="light"] {
    color-scheme: light;

    /* Surfaces */
    --almas-color-bg: #f5f7f8;
    --almas-color-bg-rgb: 245, 247, 248;
    --almas-color-surface: #ffffff;
    --almas-color-surface-elevated: #ffffff;
    --almas-color-surface-muted: #eef1f3;
    --almas-color-surface-muted-rgb: 238, 241, 243;

    /* Text */
    --almas-color-text: #1f2a33;
    --almas-color-text-rgb: 31, 42, 51;
    --almas-color-text-muted: #5b6670;
    --almas-color-text-muted-rgb: 91, 102, 112;

    /* Borders (decorative dividers) */
    --almas-color-border: #dfe4e8;
    --almas-color-border-strong: #c7ced4;

    /* Primary: calm teal for a multi-company enterprise ERP */
    --almas-color-primary: #0f6e66;
    --almas-color-primary-rgb: 15, 110, 102;
    --almas-color-primary-hover: #0c5b54;
    --almas-color-primary-active: #0a4f49;
    --almas-color-primary-strong: #0a4f49;
    --almas-color-primary-deep: #082e2b;
    --almas-color-primary-subtle: #e6f2f1;
    --almas-color-on-primary: #ffffff;

    /* Links */
    --almas-color-link: #0f6e66;
    --almas-color-link-rgb: 15, 110, 102;
    --almas-color-link-hover: #0a4f49;
    --almas-color-link-hover-rgb: 10, 79, 73;

    --almas-color-secondary: #3b4a5a;
    --almas-color-secondary-rgb: 59, 74, 90;

    /* Status: fill / -text / -subtle (see header for the three roles) */
    --almas-color-success: #1e8e5a;
    --almas-color-success-rgb: 30, 142, 90;
    --almas-color-success-text: #146c43;
    --almas-color-success-subtle: #e6f4ec;

    --almas-color-warning: #b7791f;
    --almas-color-warning-rgb: 183, 121, 31;
    --almas-color-warning-text: #7a4d00;
    --almas-color-warning-subtle: #fbf1e3;

    --almas-color-danger: #c0392b;
    --almas-color-danger-rgb: 192, 57, 43;
    --almas-color-danger-hover: #a93226;
    --almas-color-danger-active: #922b21;
    --almas-color-danger-text: #a93226;
    --almas-color-danger-subtle: #fbeceb;

    --almas-color-info: #1f6fb2;
    --almas-color-info-rgb: 31, 111, 178;
    --almas-color-info-text: #175a91;
    --almas-color-info-subtle: #e7f1fa;

    /* Form control boundary: >= 3:1 against surface, canvas and muted surface
       (the decorative --almas-color-border-strong is deliberately lighter). */
    --almas-control-border-color: #808b95;

    /* Focus ring: >= 3:1 on every surface above */
    --almas-focus-ring-rgb: 15, 110, 102;

    /* Elevation - restrained; shadows stay soft and low */
    --almas-shadow-rgb: 16, 24, 32;
    --almas-shadow-xs: 0 1px 1px rgba(var(--almas-shadow-rgb), .05);
    --almas-shadow-sm: 0 1px 2px rgba(var(--almas-shadow-rgb), .06);
    --almas-shadow-md: 0 2px 10px rgba(var(--almas-shadow-rgb), .08);
    --almas-shadow-lg: 0 10px 28px rgba(var(--almas-shadow-rgb), .14);
}


/* ==========================================================================
   3. Colour + elevation tokens - DARK (architecture only; not activated)
   Must stay AFTER the light block: equal specificity, later source wins.
   ========================================================================== */
[data-bs-theme="dark"] {
    color-scheme: dark;

    --almas-color-bg: #0e1418;
    --almas-color-bg-rgb: 14, 20, 24;
    --almas-color-surface: #151c22;
    --almas-color-surface-elevated: #1b242b;
    --almas-color-surface-muted: #222c34;
    --almas-color-surface-muted-rgb: 34, 44, 52;

    --almas-color-text: #e6ebef;
    --almas-color-text-rgb: 230, 235, 239;
    --almas-color-text-muted: #9fabb6;
    --almas-color-text-muted-rgb: 159, 171, 182;

    --almas-color-border: #2a353d;
    --almas-color-border-strong: #3b4853;

    /* Primary FILL keeps white text at >= 4.5:1; light teal is for text/links */
    --almas-color-primary: #12786f;
    --almas-color-primary-rgb: 18, 120, 111;
    --almas-color-primary-hover: #0f665e;
    --almas-color-primary-active: #0c554f;
    --almas-color-primary-strong: #8fe0d6;
    --almas-color-primary-deep: #0a1f1d;
    --almas-color-primary-subtle: #10302d;
    --almas-color-on-primary: #ffffff;

    --almas-color-link: #4cc0b4;
    --almas-color-link-rgb: 76, 192, 180;
    --almas-color-link-hover: #7fd8cf;
    --almas-color-link-hover-rgb: 127, 216, 207;

    --almas-color-secondary: #8b98a5;
    --almas-color-secondary-rgb: 139, 152, 165;

    --almas-color-success: #2fa36b;
    --almas-color-success-rgb: 47, 163, 107;
    --almas-color-success-text: #5fd19a;
    --almas-color-success-subtle: #10281c;

    --almas-color-warning: #d99a2b;
    --almas-color-warning-rgb: 217, 154, 43;
    --almas-color-warning-text: #f0c674;
    --almas-color-warning-subtle: #33260c;

    /* Danger FILL keeps white text at >= 4.5:1 (as the primary fill does): the
       fill is a touch deeper than a plain accent, and hover/active go deeper still. */
    --almas-color-danger: #c9483f;
    --almas-color-danger-rgb: 201, 72, 63;
    --almas-color-danger-hover: #b93f37;
    --almas-color-danger-active: #a93a32;
    --almas-color-danger-text: #ff8f85;
    --almas-color-danger-subtle: #3a1815;

    --almas-color-info: #4a9be0;
    --almas-color-info-rgb: 74, 155, 224;
    --almas-color-info-text: #8cc4f2;
    --almas-color-info-subtle: #0f2537;

    --almas-control-border-color: #7b8792;
    --almas-focus-ring-rgb: 76, 192, 180;

    /* Shadows read weakly on dark surfaces, so they are darker and denser */
    --almas-shadow-rgb: 0, 0, 0;
    --almas-shadow-xs: 0 1px 1px rgba(var(--almas-shadow-rgb), .30);
    --almas-shadow-sm: 0 1px 2px rgba(var(--almas-shadow-rgb), .35);
    --almas-shadow-md: 0 2px 10px rgba(var(--almas-shadow-rgb), .40);
    --almas-shadow-lg: 0 10px 28px rgba(var(--almas-shadow-rgb), .50);
}


/* ==========================================================================
   4. Derived tokens + Bootstrap 5.3.3 variable mapping

   Declared for ":root, [data-bs-theme]" so every value below is re-resolved
   in any themed scope. This block comes AFTER Bootstrap's own colour-mode
   blocks (same specificity, later source), so it wins for both themes.

   Only variables that Bootstrap components read at run time are mapped.
   Components whose variables Bootstrap compiles statically (.btn-primary)
   or whose focus ring is a hard-coded colour (.form-control:focus) cannot
   be re-skinned from here; those few component overrides stay in
   almas-ui.css.
   ========================================================================== */
:root,
[data-bs-theme] {
    /* Derived tokens */
    --almas-control-bg: var(--almas-color-surface);
    --almas-focus-ring-color: rgb(var(--almas-focus-ring-rgb));
    --almas-focus-ring-shadow: 0 0 0 .25rem rgba(var(--almas-focus-ring-rgb), .25);

    /* Application shell colours. Mapped onto the global tokens so the shell
       follows light/dark with no palette of its own. The active-item surface
       is the seam for the future navigation renderer (Wave 12B). */
    --almas-shell-surface: var(--almas-color-surface);
    --almas-shell-border: var(--almas-color-border);
    --almas-shell-sidebar-surface: var(--almas-color-surface);
    --almas-shell-nav-active-surface: var(--almas-color-primary-subtle);
    --almas-shell-scrim: rgba(var(--almas-shadow-rgb), .5);

    /* Typography */
    --bs-font-sans-serif: var(--almas-font-family);
    --bs-font-monospace: var(--almas-font-family-mono);
    --bs-body-font-family: var(--almas-font-family);
    --bs-body-font-size: var(--almas-font-size-md);
    --bs-body-font-weight: var(--almas-font-weight-regular);
    --bs-body-line-height: var(--almas-line-height-base);

    /* Body, emphasis and secondary surfaces / text */
    --bs-body-color: var(--almas-color-text);
    --bs-body-color-rgb: var(--almas-color-text-rgb);
    --bs-body-bg: var(--almas-color-bg);
    --bs-body-bg-rgb: var(--almas-color-bg-rgb);
    --bs-emphasis-color: var(--almas-color-text);
    --bs-emphasis-color-rgb: var(--almas-color-text-rgb);
    --bs-heading-color: var(--almas-color-text);
    --bs-secondary-color: var(--almas-color-text-muted);
    --bs-secondary-color-rgb: var(--almas-color-text-muted-rgb);
    --bs-secondary-bg: var(--almas-color-surface-muted);
    --bs-secondary-bg-rgb: var(--almas-color-surface-muted-rgb);
    --bs-tertiary-color: var(--almas-color-text-muted);
    --bs-tertiary-color-rgb: var(--almas-color-text-muted-rgb);
    --bs-tertiary-bg: var(--almas-color-bg);
    --bs-tertiary-bg-rgb: var(--almas-color-bg-rgb);

    /* Borders, radius, elevation */
    --bs-border-width: var(--almas-border-width);
    --bs-border-color: var(--almas-color-border);
    --bs-border-color-translucent: rgba(var(--almas-color-text-rgb), .15);
    --bs-border-radius: var(--almas-radius-md);
    --bs-border-radius-sm: var(--almas-radius-sm);
    --bs-border-radius-lg: var(--almas-radius-lg);
    --bs-border-radius-xl: var(--almas-radius-xl);
    --bs-border-radius-xxl: var(--almas-radius-xl);
    --bs-border-radius-pill: var(--almas-radius-pill);
    --bs-box-shadow: var(--almas-shadow-md);
    --bs-box-shadow-sm: var(--almas-shadow-sm);
    --bs-box-shadow-lg: var(--almas-shadow-lg);

    /* Links, code, highlight */
    --bs-link-color: var(--almas-color-link);
    --bs-link-color-rgb: var(--almas-color-link-rgb);
    --bs-link-hover-color: var(--almas-color-link-hover);
    --bs-link-hover-color-rgb: var(--almas-color-link-hover-rgb);
    --bs-code-color: var(--almas-color-primary-strong);
    --bs-highlight-bg: var(--almas-color-warning-subtle);
    --bs-highlight-color: var(--almas-color-text);

    /* Semantic colours */
    --bs-primary: var(--almas-color-primary);
    --bs-primary-rgb: var(--almas-color-primary-rgb);
    --bs-secondary: var(--almas-color-secondary);
    --bs-secondary-rgb: var(--almas-color-secondary-rgb);
    --bs-success: var(--almas-color-success);
    --bs-success-rgb: var(--almas-color-success-rgb);
    --bs-info: var(--almas-color-info);
    --bs-info-rgb: var(--almas-color-info-rgb);
    --bs-warning: var(--almas-color-warning);
    --bs-warning-rgb: var(--almas-color-warning-rgb);
    --bs-danger: var(--almas-color-danger);
    --bs-danger-rgb: var(--almas-color-danger-rgb);

    /* Alerts, badges, subtle utilities read these three per colour */
    --bs-primary-text-emphasis: var(--almas-color-primary-strong);
    --bs-primary-bg-subtle: var(--almas-color-primary-subtle);
    --bs-primary-border-subtle: rgba(var(--almas-color-primary-rgb), .30);
    --bs-secondary-text-emphasis: var(--almas-color-text);
    --bs-secondary-bg-subtle: var(--almas-color-surface-muted);
    --bs-secondary-border-subtle: var(--almas-color-border-strong);
    --bs-success-text-emphasis: var(--almas-color-success-text);
    --bs-success-bg-subtle: var(--almas-color-success-subtle);
    --bs-success-border-subtle: rgba(var(--almas-color-success-rgb), .30);
    --bs-info-text-emphasis: var(--almas-color-info-text);
    --bs-info-bg-subtle: var(--almas-color-info-subtle);
    --bs-info-border-subtle: rgba(var(--almas-color-info-rgb), .30);
    --bs-warning-text-emphasis: var(--almas-color-warning-text);
    --bs-warning-bg-subtle: var(--almas-color-warning-subtle);
    --bs-warning-border-subtle: rgba(var(--almas-color-warning-rgb), .30);
    --bs-danger-text-emphasis: var(--almas-color-danger-text);
    --bs-danger-bg-subtle: var(--almas-color-danger-subtle);
    --bs-danger-border-subtle: rgba(var(--almas-color-danger-rgb), .30);

    /* Form validation state colours */
    --bs-form-valid-color: var(--almas-color-success-text);
    --bs-form-valid-border-color: var(--almas-color-success);
    --bs-form-invalid-color: var(--almas-color-danger-text);
    --bs-form-invalid-border-color: var(--almas-color-danger);

    /* Bootstrap's own focus ring variable */
    --bs-focus-ring-color: rgba(var(--almas-focus-ring-rgb), .25);
}


/* ==========================================================================
   5. Enterprise UI V2 tokens (standard version 2.0.0)

   The V2 layer refines the existing system instead of replacing it: a denser
   scale for pointer devices, a slightly tighter radius, and a restrained
   dark-teal chrome (header + sidebar). Documented in
   Docs/Design/MADARIX-UI-V2-STANDARD.md; rules live in almas/ui-v2.css.

   CHROME. Site.master marks the header and the sidebar with
   data-bs-theme="dark" (the architecture of section 3 re-resolves every
   colour, derived token and Bootstrap variable inside them) and
   data-almas-chrome="teal", which only swaps the neutral dark surfaces for the
   deep-teal identity below. The content area stays light. Popovers that live
   inside the chrome (the account menu) carry data-bs-theme="light" so they
   read as ordinary light panels.
   Contrast (WCAG, computed): text 12.7:1, muted text 8.0:1 (6.3:1 on hover),
   link 9.3:1, brand 9.5:1 on the chrome surface; control border 5.2:1;
   focus ring 6.5:1.
   ========================================================================== */
:root {
    --almas-ui-version: "2.0.0";

    /* Slightly tighter corners for a data-dense interface (controls, cards, panels). */
    --almas-radius-md: .375rem;
    --almas-radius-lg: .5rem;

    /* Chrome palette (theme-independent: the chrome is dark in both themes). */
    --almas-chrome-surface: #0b2f2c;
    --almas-chrome-surface-raised: #12413d;
    --almas-chrome-surface-active: #14504a;
    --almas-chrome-text: #e8f3f1;
    --almas-chrome-text-muted: #a3c9c3;
    --almas-chrome-link: #7fe0d4;
    --almas-chrome-link-active: #9cf0e5;
    --almas-chrome-brand: #8fe0d6;
    --almas-chrome-border: #2a5f59;
    --almas-chrome-border-strong: #6fa59e;
}

/* Pointer devices get a denser scale (40px controls, 36px targets); touch and
   narrow screens keep the 44px targets of the base scale. */
@media (min-width: 768px) and (pointer: fine) {
    :root {
        --almas-touch-target-min: 2.25rem;
        --almas-control-height: 2.5rem;
        --almas-control-padding-block: .4375rem;
    }
}

[data-almas-chrome="teal"] {
    --almas-color-bg: var(--almas-chrome-surface);
    --almas-color-surface: var(--almas-chrome-surface);
    --almas-color-surface-elevated: var(--almas-chrome-surface-raised);
    --almas-color-surface-muted: var(--almas-chrome-surface-raised);
    --almas-color-text: var(--almas-chrome-text);
    --almas-color-text-muted: var(--almas-chrome-text-muted);
    --almas-color-border: var(--almas-chrome-border);
    --almas-color-border-strong: var(--almas-chrome-border-strong);
    --almas-color-link: var(--almas-chrome-link);
    --almas-color-link-hover: var(--almas-chrome-link-active);
    --almas-color-primary: var(--almas-chrome-link);
    --almas-color-on-primary: #062321;
    --almas-color-primary-strong: var(--almas-chrome-brand);
    --almas-color-primary-subtle: var(--almas-chrome-surface-active);
    --almas-control-border-color: var(--almas-chrome-border-strong);
    --almas-shell-surface: var(--almas-chrome-surface);
    --almas-shell-sidebar-surface: var(--almas-chrome-surface);
    --almas-shell-border: var(--almas-chrome-border);
    --almas-shell-nav-active-surface: var(--almas-chrome-surface-active);
}