/* =============================================================================
   Relite Logistics — Design System : SIGMA SHELL ADAPTER            (P1 Wave 1)
   =============================================================================
   Puts the guest/public site (Content/site-theme/*) on design tokens.

   Loaded ONLY by Views/Shared/_Layout.cshtml — the guest layout. Must come AFTER
   Content/site-theme/style.css: both blocks below target :root, which is the same
   specificity (0,1,0) as Sigma's own, so source order is what decides.

   -----------------------------------------------------------------------------
   Why this file is four lines of mapping instead of a selector hunt
   -----------------------------------------------------------------------------
   Unlike Inspinia and Angle — which hard-code hex into hundreds of rules and had to be
   ported selector by selector (panel-inspinia.css, panel-angle.css) — Sigma already
   drives itself from custom properties declared in its own :root:

       --thm-base        #de1e07    174 uses
       --thm-base-hover  #a21c0c     49 uses
       --thm-secondary   #232230     76 uses

   So re-pointing those variables at the tokens moves the entire theme at once. No Sigma
   selector is touched and no vendor file is edited; remove this <link> and the guest site
   returns to its own palette exactly.

   -----------------------------------------------------------------------------
   Lossless by default
   -----------------------------------------------------------------------------
   Guest defaults to the `scarlet` preset, which IS Sigma's palette copied out of that
   same :root block, so this adapter changes nothing until an Admin picks another scheme.
   That is deliberate: the guest site is the public brand, and adopting the design system
   must not rebrand it. (`crimson` was NOT reused — that is Angle's #f05050, a visibly
   different red.)
   ============================================================================= */

:root {
    /* Primary. --thm-base is the single most-used variable in the theme (174 rules:
       buttons, links, icons, underlines, hovers), so this one line is most of the port. */
    --thm-base:       var(--ds-accent);
    --thm-base-hover: var(--ds-accent-hover);

    /* Sigma composes rgba() shadows and tints as rgba(var(--thm-base-rgb), .1), so this
       must stay a bare "r, g, b" triplet — a hex here would break every one of those 7
       rules silently, since an invalid rgba() simply drops the declaration. That is what
       --ds-accent-rgb exists for. */
    --thm-base-rgb:   var(--ds-accent-rgb);

    /* "Primary low hue" — the pale tint behind icon chips and section labels. */
    --thm-base-hue:   var(--ds-accent-subtle);
}

/* -----------------------------------------------------------------------------
   Deliberately NOT mapped
   -----------------------------------------------------------------------------
   --thm-secondary (#232230), --thm-b-text (#4E5164), --thm-border (#e1e1e1) and the two
   font variables stay Sigma's own. They are the site's neutral scaffolding and typography,
   not its accent: pointing them at --ds-text-primary / --ds-border-subtle would restyle
   the public pages rather than re-colour them, and the theme picker is meant to change the
   scheme, not the design. If the guest site is ever redesigned onto the component library
   (Wave 2), that is the moment to revisit these — not now.
   -------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------
   Guest auth CTAs (Phase 430)
   -----------------------------------------------------------------------------
   The SignIn and SignUpBusiness pages hard-coded their primary buttons with utility
   colours — bg-red-500 (submit), bg-blue-500 (send OTP), bg-green-500 (verify). Three
   different colours for the same class of action, none of them the site accent, so the
   pages looked off-brand and inconsistent with each other. Those colour utilities are
   replaced in the markup with .guest-btn-primary, which takes the accent from tokens and
   therefore follows the guest preset like everything else.

   Layout utilities on those buttons (w-full, rounded-lg, py-2, tracking-wide, flex…) are
   left in place — only the colour is taken over here, so nothing about the shape moves.
   -------------------------------------------------------------------------- */
.guest-btn-primary {
    background-color: var(--ds-accent);
    color: var(--ds-text-on-color);
    border: 1px solid var(--ds-accent);
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.guest-btn-primary:hover,
.guest-btn-primary:focus {
    background-color: var(--ds-accent-hover);
    border-color: var(--ds-accent-hover);
    color: var(--ds-text-on-color);
}

.guest-btn-primary:disabled,
.guest-btn-primary.disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ── Service-card icon rules must not reach buttons ────────────────────────
   The Sigma theme styles the decorative icon on a service card:

       .sigma_service i                       { font-size: 60px }
       .sigma_service.style-4 i,
       .sigma_service.style-9 i               { display: block }

   Those are written for a card whose icon IS the artwork. But any <button>
   placed inside such a card inherits them, and a 16px glyph becomes a 60px
   block that pushes the label onto its own line. Measured on
   /Home/ConsignmentTracking: the "Track Shipment" submit button rendered 135px
   tall with the magnifier stacked above its text.

   Specificity matters here. `.sigma_service.style-9 i` is (0,2,1), so a plain
   `.sigma_service button i` at (0,1,2) LOSES and the display:block survives.
   Qualifying with the style- class takes these to (0,2,2), which wins outright
   rather than depending on which stylesheet happens to load last.

   Scoped to icons inside buttons only — the card's own decorative icon is
   untouched, which is the whole point. */
.sigma_service button i,
.sigma_service button i.fas,
.sigma_service button i.far,
.sigma_service button i.fab {
    font-size: inherit;
    line-height: 1;
    width: auto;
    height: auto;
}

.sigma_service.style-4 button i,
.sigma_service.style-9 button i {
    display: inline-block;
}