/* ============================================================================
   HotelTRS design tokens - Direction D, Soft neutral
   ----------------------------------------------------------------------------
   Spec:  .design-system/direction-d.md
   Rules: .steering/design-system.md
   Audit: python .design-system/scripts/contrast-audit.py

   This file contains VARIABLES ONLY. No rules.
     - resets and element styling  -> css/base.css
     - app-specific overrides      -> app.css

   Colour values are mirrored in Components/TrsPalette.cs, because Blazorise
   parses Theme colours server-side with System.Drawing.Color and cannot read
   a CSS variable. Change both files together.
   ============================================================================ */

:root {

  /* --------------------------------------------------------------------
     1. PRIMITIVES
     Components must NEVER reference these. Use the aliases in section 2.
     -------------------------------------------------------------------- */

  /* primary - eucalyptus */
  --trs-p-50:  #F0F6F2;
  --trs-p-100: #E0EBE4;
  --trs-p-200: #C2D8CA;
  --trs-p-300: #9CBFA9;
  --trs-p-400: #75A388;
  --trs-p-500: #5B8B73;
  --trs-p-600: #4C7A66;
  --trs-p-700: #3A5E4F;
  --trs-p-800: #264036;

  /* neutral - warm grey */
  --trs-n-50:  #F5F5F2;
  --trs-n-100: #ECECE7;
  --trs-n-200: #E3E3DD;
  --trs-n-300: #CBCBC3;
  --trs-n-400: #A9A9A1;
  --trs-n-500: #85857E;
  --trs-n-600: #5F6563;
  --trs-n-700: #3F4442;
  --trs-n-800: #26292A;

  /* --------------------------------------------------------------------
     2. ALIASES
     The only colour tokens a component may use.

     Two rules that are NOT optional (see .steering/design-system.md):

     a) --trs-text-primary is NOT --trs-fill. The p-600 fill measures 4.49
        against the light ground, below AA for small text. Text uses p-700.
        Never style a link with the button colour.

     b) --trs-text-muted is NOT a ramp step. n-400 measures 2.75 and fails
        outright. These values are hand-picked to clear AA.

        "Clear AA" means on ALL THREE light grounds, not just white. The
        sunken surface is the tightest: #696E6A passed on white (5.20) and on
        the page ground (4.76) but measured 4.39 on --trs-surface-sunken, and
        muted text on a sunken panel is a common combination - chat bubbles,
        picker rows, money panels. #656A66 is 5.52 / 5.05 / 4.65.
     -------------------------------------------------------------------- */

  --trs-bg:              var(--trs-n-50);
  --trs-surface:         #FFFFFF;
  --trs-surface-sunken:  var(--trs-n-100);
  /* Translucent panel floated over content - the floor-plan legend and label
     toggles sit on top of the plan itself. Deliberately not var(--trs-surface)
     with an opacity: it has to composite over whatever the plan draws, and in
     dark mode that means darkening, not lightening. */
  --trs-surface-overlay: rgba(255, 255, 255, .92);

  --trs-text:            var(--trs-n-800);
  --trs-text-secondary:  var(--trs-n-600);
  --trs-text-muted:      #656A66;  /* was #696E6A: 4.39 on --trs-surface-sunken, under AA */
  --trs-text-primary:    var(--trs-p-700);

  --trs-fill:            var(--trs-p-600);
  --trs-fill-hover:      var(--trs-p-700);
  /* The ground of a SELECTED datagrid row. A step off the ramp rather than
     --trs-fill, because the row keeps --trs-text on top of it: a solid fill
     would need its own foreground and the grid has none. */
  --trs-selected:        var(--trs-p-200);
  /* The today column on the price grid: a wayfinding band, not a state. Light
     sinks it a step below the row ground; see the dark blocks for why that
     cannot be var(--trs-surface-sunken) in both. */
  --trs-today-band:      var(--trs-surface-sunken);
  --trs-on-primary:      #F6FAF7;

  --trs-border:          var(--trs-n-200);
  --trs-border-strong:   var(--trs-n-300);

  --trs-focus:           var(--trs-p-600);

  /* --------------------------------------------------------------------
     3. ROOM STATUS
     Semantically fixed. These keep their meaning across any future
     rebrand so front-desk and housekeeping never relearn the rack.
     -------------------------------------------------------------------- */

  --trs-status-occupied-bg:      #4C7A66;
  --trs-status-occupied-fg:      #F6FAF7;
  --trs-status-arriving-bg:      #DCE9E3;
  --trs-status-arriving-fg:      #33604D;
  --trs-status-departing-bg:     #F2E7D5;
  --trs-status-departing-fg:     #7A6234;
  --trs-status-vacant-clean-bg:  #E7EFE9;
  --trs-status-vacant-clean-fg:  #3D6B52;
  --trs-status-vacant-dirty-bg:  #ECECE7;
  --trs-status-vacant-dirty-fg:  #5F6563;  /* was #6E736F: 4.08 on its own bg, under AA for an 11px badge */
  --trs-status-ooo-bg:           #F0DEDA;
  --trs-status-ooo-fg:           #8A4A40;

  /* --------------------------------------------------------------------
     4. SEMANTIC
     Aliased onto the room-status hues rather than invented, so they are
     already contrast-audited and stay coherent with the rack.
     -------------------------------------------------------------------- */

  --trs-success:     var(--trs-status-vacant-clean-fg);
  --trs-success-bg:  var(--trs-status-vacant-clean-bg);
  --trs-info:        var(--trs-status-arriving-fg);
  --trs-info-bg:     var(--trs-status-arriving-bg);
  --trs-warning:     var(--trs-status-departing-fg);
  --trs-warning-bg:  var(--trs-status-departing-bg);
  --trs-warning-bg-soft: #FBF5EA;  /* half-strength amber, for detail rows under a warning header */
  --trs-danger-bg-soft:  #FAF0EE;  /* half-strength rust, for an ambient wash under explicit state */
  --trs-danger:      var(--trs-status-ooo-fg);
  --trs-danger-bg:   var(--trs-status-ooo-bg);
  --trs-secondary:   var(--trs-n-600);

  /* --------------------------------------------------------------------
     5. TYPE
     Base is 14px, not 16. This is a dense operational app.
     -------------------------------------------------------------------- */

  --trs-font-sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --trs-font-mono: 'DM Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --trs-text-3xl:  34px;
  --trs-text-2xl:  28px;
  --trs-text-xl:   22px;
  --trs-text-lg:   18px;
  --trs-text-md:   15px;
  --trs-text-base: 14px;
  --trs-text-sm:   13px;
  --trs-text-xs:   12px;
  --trs-text-2xs:  11px;

  --trs-weight-regular: 400;
  --trs-weight-medium:  500;
  /* A real weight, not a synthesised one: DM Sans is loaded as a variable font
     with an unbroken 400-700 axis, so 600 renders as drawn rather than as a
     browser-faked bold. */
  --trs-weight-semibold: 600;
  --trs-weight-bold:    700;

  --trs-tracking-label: .1em;

  /* --------------------------------------------------------------------
     6. SPACING - 4px base
     -------------------------------------------------------------------- */

  --trs-space-1:  4px;
  --trs-space-2:  8px;
  --trs-space-3:  12px;
  --trs-space-4:  16px;
  --trs-space-5:  20px;
  --trs-space-6:  24px;
  --trs-space-8:  32px;
  --trs-space-10: 40px;
  --trs-space-12: 48px;
  --trs-space-16: 64px;

  /* --------------------------------------------------------------------
     7. RADIUS
     11px is the signature of this direction. Use sm only where 11px
     would swallow the element (grid cells, chips, checkboxes).
     -------------------------------------------------------------------- */

  --trs-radius-sm:   6px;
  --trs-radius-md:   11px;
  --trs-radius-lg:   16px;
  --trs-radius-full: 999px;

  /* --------------------------------------------------------------------
     8. ELEVATION
     Not everything is a card. Spend border, fill, radius and shadow
     by role.
     -------------------------------------------------------------------- */

  --trs-elevation-0: none;
  --trs-elevation-1: 0 1px 2px rgba(60, 65, 60, .05);
  --trs-elevation-2: 0 1px 2px rgba(60, 65, 60, .05), 0 10px 24px -16px rgba(60, 65, 60, .3);

  /* --------------------------------------------------------------------
     9. DENSITY
     Comfortable is the default. Compact is a per-user preference worth
     about a third more rows per screen. Never hardcode a row height.
     -------------------------------------------------------------------- */

  --trs-row-h:     32px;
  --trs-cell-pad:  8px 12px;
  --trs-cell-pad-y: 8px;   /* split axes: Bootstrap's --bs-table-cell-padding-* */
  --trs-cell-pad-x: 12px;  /* take one value each, so the shorthand cannot feed them */
  --trs-control-h: 38px;

  /* --------------------------------------------------------------------
     10. MOTION
     All motion sits behind prefers-reduced-motion (see base.css).
     -------------------------------------------------------------------- */

  --trs-motion-instant: 0ms;
  --trs-motion-fast:    120ms;
  --trs-motion-base:    180ms;
  --trs-motion-slow:    260ms;
  --trs-ease:           cubic-bezier(.2, 0, .2, 1);
}

/* ============================================================================
   DENSITY - compact
   ============================================================================ */

:root[data-density="compact"] {
  --trs-row-h:     24px;
  --trs-cell-pad:  4px 8px;
  --trs-cell-pad-y: 4px;
  --trs-cell-pad-x: 8px;
  --trs-control-h: 30px;
}

/* ============================================================================
   DARK - system preference
   Guarded so an explicit light choice beats a dark OS.
   Redefines TOKENS ONLY, never component rules.
   ============================================================================ */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --trs-p-50:  #12201A;
    --trs-p-100: #1A2E25;
    --trs-p-200: #264036;
    --trs-p-300: #3A5E4F;
    --trs-p-400: #5B8B73;
    --trs-p-500: #6BA187;
    --trs-p-600: #7FB79C;
    --trs-p-700: #9CC9B2;
    --trs-p-800: #C2DFD1;

    --trs-n-50:  #171A18;
    --trs-n-100: #202422;
    --trs-n-200: #2F3532;
    --trs-n-300: #3F4642;
    --trs-n-400: #5C635E;
    --trs-n-500: #7B827D;
    --trs-n-600: #A6ADA8;
    --trs-n-700: #CBD1CC;
    --trs-n-800: #EDEFEC;

    --trs-surface:        var(--trs-n-100);
    --trs-surface-sunken: #121513;
    --trs-surface-overlay: rgba(24, 27, 25, .92);
    --trs-text-muted:     #8B938D;
    --trs-text-primary:   var(--trs-p-600);
    --trs-fill-hover:     var(--trs-p-500);
    --trs-on-primary:     #12201A;
    /* One step further up the ramp than light: the ramp inverts here, so
       p-200 is a DARK green and lands 1.2 on --trs-surface - present in a
       contrast checker, invisible in peripheral vision. p-300 is 1.9. */
    --trs-selected:       var(--trs-p-300);
    /* LIFTED, not sunk. --trs-surface-sunken is #121513 here against a #202422
       row - MEASURED 2.0 layer-on-layer, which stops reading as a marked column
       and starts reading as a hole in the table. --trs-n-200 sits 1.26 ABOVE the
       row instead, and the 2px --trs-fill edges do the rest of the work. */
    --trs-today-band:     var(--trs-n-200);

    --trs-status-occupied-bg:      #3C6555;
    --trs-status-occupied-fg:      #DDEDE4;
    --trs-status-arriving-bg:      #22362D;
    --trs-status-arriving-fg:      #93C7AF;
    --trs-status-departing-bg:     #3A3222;
    --trs-warning-bg-soft:         #2C261A;
    --trs-danger-bg-soft:          #2A1F1D;
    --trs-status-departing-fg:     #D8BE86;
    --trs-status-vacant-clean-bg:  #1F3128;
    --trs-status-vacant-clean-fg:  #87BB9F;
    --trs-status-vacant-dirty-bg:  #282C2A;
    --trs-status-vacant-dirty-fg:  #979D99;
    --trs-status-ooo-bg:           #3D2723;
    --trs-status-ooo-fg:           #D19488;

    --trs-elevation-1: 0 1px 2px rgba(0, 0, 0, .4);
    --trs-elevation-2: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 24px -16px rgba(0, 0, 0, .7);

    --bs-primary-rgb:      127, 183, 156;
    --bs-body-bg-rgb:      23, 26, 24;
    --bs-body-color-rgb:   237, 239, 236;
    --bs-light-rgb:        32, 36, 34;
    --bs-link-color-rgb:   127, 183, 156;

    color-scheme: dark;
  }
}

/* ============================================================================
   DARK - explicit choice
   Same body, so the toggle wins in both directions.
   ============================================================================ */

:root[data-theme="dark"] {
  --trs-p-50:  #12201A;
  --trs-p-100: #1A2E25;
  --trs-p-200: #264036;
  --trs-p-300: #3A5E4F;
  --trs-p-400: #5B8B73;
  --trs-p-500: #6BA187;
  --trs-p-600: #7FB79C;
  --trs-p-700: #9CC9B2;
  --trs-p-800: #C2DFD1;

  --trs-n-50:  #171A18;
  --trs-n-100: #202422;
  --trs-n-200: #2F3532;
  --trs-n-300: #3F4642;
  --trs-n-400: #5C635E;
  --trs-n-500: #7B827D;
  --trs-n-600: #A6ADA8;
  --trs-n-700: #CBD1CC;
  --trs-n-800: #EDEFEC;

  --trs-surface:        var(--trs-n-100);
  --trs-surface-sunken: #121513;
  --trs-surface-overlay: rgba(24, 27, 25, .92);
  --trs-text-muted:     #8B938D;
  --trs-text-primary:   var(--trs-p-600);
  --trs-fill-hover:     var(--trs-p-500);
  --trs-on-primary:     #12201A;
  /* See the media-query block above. */
  --trs-selected:       var(--trs-p-300);
  /* See the media-query block above. */
  --trs-today-band:     var(--trs-n-200);

  --trs-status-occupied-bg:      #3C6555;
  --trs-status-occupied-fg:      #DDEDE4;
  --trs-status-arriving-bg:      #22362D;
  --trs-status-arriving-fg:      #93C7AF;
  --trs-status-departing-bg:     #3A3222;
  --trs-warning-bg-soft:         #2C261A;
  --trs-danger-bg-soft:          #2A1F1D;
  --trs-status-departing-fg:     #D8BE86;
  --trs-status-vacant-clean-bg:  #1F3128;
  --trs-status-vacant-clean-fg:  #87BB9F;
  --trs-status-vacant-dirty-bg:  #282C2A;
  --trs-status-vacant-dirty-fg:  #979D99;
  --trs-status-ooo-bg:           #3D2723;
  --trs-status-ooo-fg:           #D19488;

  --trs-elevation-1: 0 1px 2px rgba(0, 0, 0, .4);
  --trs-elevation-2: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 24px -16px rgba(0, 0, 0, .7);

  --bs-primary-rgb:      127, 183, 156;
  --bs-body-bg-rgb:      23, 26, 24;
  --bs-body-color-rgb:   237, 239, 236;
  --bs-light-rgb:        32, 36, 34;
  --bs-link-color-rgb:   127, 183, 156;

  color-scheme: dark;
}

/* ============================================================================
   BOOTSTRAP BRIDGE
   ----------------------------------------------------------------------------
   This is why rebranding 342 components is a one-file change: Blazorise
   renders Bootstrap 5 markup, so mapping --bs-* onto the tokens rebrands
   every component without touching one of them.

   ROLLBACK LEVER: comment out this block to revert every Bootstrap and
   Blazorise surface to stock while the --trs-* layer stays live.

   Deliberately NOT set, because they are layout and Phase 4 owns layout:
     --bs-border-width, --bs-border-radius-pill, --bs-rows, --bs-columns,
     --bs-gap, --bs-gutter-x/y, --bs-offcanvas-*
   ============================================================================ */

:root {
  /* brand */
  --bs-primary:        var(--trs-fill);
  --bs-primary-rgb:    76, 122, 102;
  --bs-secondary:      var(--trs-secondary);
  --bs-success:        var(--trs-success);
  --bs-info:           var(--trs-info);
  --bs-warning:        var(--trs-warning);
  --bs-danger:         var(--trs-danger);
  --bs-light:          var(--trs-n-100);
  --bs-light-rgb:      236, 236, 231;
  --bs-dark:           var(--trs-n-800);

  /* body */
  --bs-body-bg:            var(--trs-bg);
  --bs-body-bg-rgb:        245, 245, 242;
  --bs-body-color:         var(--trs-text);
  --bs-body-color-rgb:     38, 41, 42;
  --bs-body-font-family:   var(--trs-font-sans);
  --bs-body-font-size:     var(--trs-text-base);
  --bs-body-font-weight:   var(--trs-weight-regular);

  /* surfaces - consumed directly by 17 frozen razor files */
  --bs-emphasis-color:       var(--trs-text);
  --bs-secondary-color:      var(--trs-text-secondary);
  --bs-secondary-bg:         var(--trs-surface-sunken);
  --bs-tertiary-color:       var(--trs-text-muted);
  --bs-tertiary-bg:          var(--trs-surface-sunken);
  --bs-primary-bg-subtle:    var(--trs-p-50);
  --bs-primary-border-subtle:var(--trs-p-200);
  --bs-primary-text-emphasis:var(--trs-text-primary);
  --bs-heading-color:        var(--trs-text);
  --bs-code-color:           var(--trs-text-primary);
  --bs-highlight-bg:         var(--trs-p-100);

  /* links */
  --bs-link-color:       var(--trs-text-primary);
  --bs-link-color-rgb:   58, 94, 79;
  --bs-link-hover-color: var(--trs-p-800);

  /* borders and shape */
  --bs-border-color:             var(--trs-border);
  --bs-border-color-translucent: var(--trs-border);
  --bs-border-radius:            var(--trs-radius-md);
  --bs-border-radius-sm:         var(--trs-radius-sm);
  --bs-border-radius-lg:         var(--trs-radius-lg);
  --bs-border-radius-xl:         var(--trs-radius-lg);

  /* tables - --bs-table-bg MUST stay opaque or sticky headers go transparent */
  --bs-table-bg:           var(--trs-surface);
  --bs-table-color:        var(--trs-text);
  --bs-table-border-color: var(--trs-border);
  --bs-table-striped-bg:   var(--trs-surface-sunken);
  --bs-table-hover-bg:     var(--trs-p-50);

  /* focus */
  --bs-focus-ring-color:   var(--trs-focus);
  --bs-focus-ring-width:   2px;
  --bs-focus-ring-opacity: 1;
}