/*
 * Glass skin — design tokens (screen only).
 *
 * Loaded after css/tokens.css. It re-values the canonical --meva-* tokens, so every stylesheet that already
 * reads them (and the legacy aliases --hbys-*, --ui-*, --app-*, --color-* defined in tokens.css) follows.
 *
 * Colour roles: emerald = act / confirm / approve, graphite = open / in progress, amber = attention,
 * red = danger. Emerald on neutral surfaces; no blue anywhere (owner decision): the --lapis-* tokens hold graphite.
 */

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../../fonts/plus-jakarta-sans/plus-jakarta-sans-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../../fonts/plus-jakarta-sans/plus-jakarta-sans-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../../fonts/plus-jakarta-sans/plus-jakarta-sans-latin-ext-700-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../../fonts/plus-jakarta-sans/plus-jakarta-sans-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* The second selector outranks the classic [data-theme="dark"] block in tokens.css: the glass skin has no
   dark variant yet, so a stored dark preference must not half-apply. */
html.ui-glass,
html.ui-glass[data-theme="dark"] {
  color-scheme: light;

  /* ── Emerald (confirm, selection, navigation, focus) ── */
  --emerald-50:  #ecf8f2;
  --emerald-100: #d6f1e4;
  --emerald-200: #aee3cb;
  --emerald-500: #17966e;
  --emerald-600: #0b7d5b;
  --emerald-700: #08664b;
  --emerald-800: #0a513d;
  --emerald-rgb: 11, 125, 91;

  /* ── Lapis (act, links, information) ── */
  --lapis-50:  #f2f2f4;
  --lapis-100: #e8e8ed;
  --lapis-200: #d2d2d7;
  --lapis-600: #48484a;
  --lapis-700: #3a3a3c;
  --lapis-800: #2c2c2e;
  --lapis-rgb: 72, 72, 74;

  /* ── Ink and surfaces ── */
  --ink-900: #1d1d1f;
  --ink-700: #3a3a3c;
  --ink-600: #515154;
  --ink-500: #6e6e73;
  --ink-400: #86868b;
  --ink-300: #aeaeb2;
  --fill-1: #f5f5f7;
  --fill-2: #eeeef1;
  --fill-3: #e5e5ea;
  --line: #e3e3e8;
  --line-strong: #d1d1d6;

  /* ── Status ── */
  --warn-600: #b45309;
  --warn-700: #92400e;
  --warn-50: #fdf3e1;
  --bad-600: #d70015;
  --bad-700: #b00012;
  --bad-50: #fdecee;
  --bad-rgb: 215, 0, 21;

  /* ── Canonical tokens (same names as tokens.css) ── */
  --meva-primary:          var(--lapis-800);
  --meva-primary-dark:     #122a4d;
  --meva-primary-light:    var(--lapis-600);
  --meva-accent:           var(--emerald-600);
  --meva-accent-light:     var(--emerald-500);
  --meva-action:           var(--emerald-600);
  --meva-action-hover:     var(--emerald-700);
  --meva-success:          var(--emerald-600);
  --meva-success-hover:    var(--emerald-700);
  --meva-warning:          var(--warn-600);
  --meva-warning-hover:    var(--warn-700);
  --meva-error:            var(--bad-600);
  --meva-error-hover:      var(--bad-700);
  --meva-secondary:        var(--ink-500);
  --meva-secondary-hover:  var(--ink-600);
  --meva-text:             var(--ink-900);
  --meva-text-muted:       var(--ink-500);
  --meva-bg:               var(--fill-1);
  --meva-bg-alt:           var(--fill-1);
  --meva-card-bg:          #ffffff;
  --meva-border:           var(--line);
  --meva-border-light:     #efeff2;
  --meva-sidebar-bg:       rgba(255, 255, 255, .72);
  --meva-sidebar-surface:  rgba(255, 255, 255, .72);
  --meva-sidebar-hover:    rgba(0, 0, 0, .045);
  --meva-sidebar-active:   rgba(var(--emerald-rgb), .12);
  --meva-topbar-bg:        transparent;

  --meva-sidebar-width:    252px;
  --meva-sidebar-collapsed:76px;
  --meva-topbar-height:    64px;
  /* No status line in this skin; the bottom edge of the window takes its place for anything parked above it. */
  --meva-statusbar-height: var(--win-inset);

  /* Radii step down from the window to the smallest control, never one size for everything. */
  --meva-radius-sm:        8px;
  --meva-radius:           10px;
  --meva-radius-md:        14px;
  --meva-radius-lg:        18px;
  --radius-window:         26px;
  --radius-card:           22px;
  --radius-panel:          14px;
  --radius-control:        12px;

  /* ── The app window: one sheet of glass floating over a calm colour field ── */
  --win-inset:             12px;
  --backdrop-base:         #e8edef;
  --backdrop-image:
    radial-gradient(70vmax 60vmax at 0% 0%, rgba(var(--emerald-rgb), .3), transparent 60%),
    radial-gradient(64vmax 58vmax at 100% 100%, rgba(var(--lapis-rgb), .28), transparent 62%),
    radial-gradient(46vmax 40vmax at 96% 4%, rgba(96, 178, 168, .2), transparent 64%),
    radial-gradient(44vmax 40vmax at 4% 100%, rgba(132, 166, 222, .18), transparent 64%);
  --win-bg:                #f3f6f6;                      /* opaque unless the browser can blur */
  --win-bg-glass:          rgba(255, 255, 255, .4);
  --win-shadow:            0 0 0 1px rgba(16, 24, 40, .045), 0 2px 6px rgba(16, 24, 40, .04), 0 28px 70px -30px rgba(16, 40, 60, .32);
  --win-rim:               inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 0 0 1px rgba(255, 255, 255, .55);

  /* Surfaces that sit on the window (no blur of their own). Text on them keeps ≥ 4.5:1. */
  --surface-card:          rgba(255, 255, 255, .8);
  --surface-raised:        rgba(255, 255, 255, .9);
  --surface-quiet:         rgba(255, 255, 255, .5);
  --surface-edge:          rgba(255, 255, 255, .92);
  --surface-hover:         rgba(255, 255, 255, .55);
  --card-shadow:           0 0 0 1px rgba(16, 24, 40, .05), 0 1px 2px rgba(16, 24, 40, .04), 0 14px 34px -20px rgba(16, 40, 60, .28);
  /* Soft filled fields (the dashboard's converter inputs): light grey on white and on glass alike. */
  --field-fill:            rgba(240, 241, 244, .92);
  --field-fill-hover:      rgba(232, 234, 238, .96);
  --pill-shadow:           0 1px 2px rgba(16, 24, 40, .07), 0 4px 12px -6px rgba(16, 24, 40, .16);
  --hairline:              rgba(16, 24, 40, .07);
  --ink-on-glass-muted:    #5c5c61;                       /* labels straight on the tinted glass */

  --meva-shadow-sm:        0 1px 2px rgba(16, 24, 40, .05);
  --meva-shadow:           0 1px 2px rgba(16, 24, 40, .04), 0 2px 8px rgba(16, 24, 40, .04);
  --meva-shadow-md:        0 6px 20px rgba(16, 24, 40, .08);
  --meva-shadow-lg:        0 16px 48px rgba(16, 24, 40, .16);

  --meva-transition:       .2s ease;
  --meva-transition-fast:  .12s ease;

  --meva-font-family:      system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --meva-font-display:     "Plus Jakarta Sans", var(--meva-font-family);
  --meva-font-size-xs:     .6875rem;
  --meva-font-size-sm:     .75rem;
  --meva-font-size-base:   .8125rem;
  --meva-font-size-md:     .9375rem;
  --meva-font-size-lg:     1.125rem;
  --meva-font-size-xl:     1.375rem;

  --meva-focus-ring:       rgba(var(--emerald-rgb), .28);

  /* ── Glass material (navigation layer only, never content) ── */
  --glass-bg:              rgba(255, 255, 255, .72);
  --glass-bg-solid:        rgba(255, 255, 255, .96);
  --glass-edge:            rgba(255, 255, 255, .75);
  --glass-shadow:          0 0 0 1px rgba(16, 24, 40, .05), 0 10px 32px rgba(16, 24, 40, .07);

  /* ── Bootstrap 5.3 variables ── */
  --bs-font-sans-serif:    var(--meva-font-family);
  --bs-body-font-family:   var(--meva-font-family);
  --bs-body-font-size:     .8125rem;
  --bs-body-line-height:   1.45;
  --bs-body-color:         var(--ink-900);
  --bs-body-color-rgb:     29, 29, 31;
  --bs-body-bg:            var(--fill-1);
  --bs-body-bg-rgb:        245, 245, 247;
  --bs-emphasis-color:     #000000;
  --bs-secondary-color:    var(--ink-500);
  --bs-secondary-color-rgb: 110, 110, 115;
  --bs-tertiary-color:     var(--ink-400);
  --bs-secondary-bg:       var(--fill-2);
  --bs-tertiary-bg:        var(--fill-1);
  --bs-border-color:       var(--line);
  --bs-border-color-translucent: rgba(60, 60, 67, .14);
  --bs-border-radius:      10px;
  --bs-border-radius-sm:   8px;
  --bs-border-radius-lg:   14px;
  --bs-border-radius-xl:   18px;
  --bs-heading-color:      var(--ink-900);
  --bs-link-color:         var(--emerald-700);
  --bs-link-color-rgb:     8, 102, 75;
  --bs-link-hover-color:   var(--emerald-800);
  --bs-link-hover-color-rgb: 10, 81, 61;
  --bs-code-color:         #a61e5c;
  --bs-focus-ring-color:   var(--meva-focus-ring);
  --bs-box-shadow:         var(--meva-shadow-md);
  --bs-box-shadow-sm:      var(--meva-shadow-sm);
  --bs-box-shadow-lg:      var(--meva-shadow-lg);

  --bs-primary:            #0b7d5b;
  --bs-primary-rgb:        11, 125, 91;
  --bs-secondary:          #6e6e73;
  --bs-secondary-rgb:      110, 110, 115;
  --bs-success:            #0b7d5b;
  --bs-success-rgb:        11, 125, 91;
  --bs-info:               #48484a;
  --bs-info-rgb:           72, 72, 74;
  --bs-warning:            #b45309;
  --bs-warning-rgb:        180, 83, 9;
  --bs-danger:             #d70015;
  --bs-danger-rgb:         215, 0, 21;
  --bs-light:              #f5f5f7;
  --bs-light-rgb:          245, 245, 247;
  --bs-dark:               #1d1d1f;
  --bs-dark-rgb:           29, 29, 31;

  --bs-primary-text-emphasis:   #0a513d;
  --bs-success-text-emphasis:   #08664b;
  --bs-info-text-emphasis:      #2c2c2e;
  --bs-warning-text-emphasis:   #7c3a06;
  --bs-danger-text-emphasis:    #9c0010;
  --bs-secondary-text-emphasis: #3a3a3c;
  --bs-primary-bg-subtle:       #ecf8f2;
  --bs-success-bg-subtle:       #ecf8f2;
  --bs-info-bg-subtle:          #f2f2f4;
  --bs-warning-bg-subtle:       #fdf3e1;
  --bs-danger-bg-subtle:        #fdecee;
  --bs-secondary-bg-subtle:     #f1f1f4;
  --bs-primary-border-subtle:   #aee3cb;
  --bs-success-border-subtle:   #aee3cb;
  --bs-info-border-subtle:      #d2d2d7;
  --bs-warning-border-subtle:   #f5d9a6;
  --bs-danger-border-subtle:    #f6b8be;
  --bs-secondary-border-subtle: #d1d1d6;

  --bs-table-color:             var(--ink-900);
  --bs-table-bg:                transparent;
  --bs-table-border-color:      var(--line);
  --bs-table-striped-color:     var(--ink-900);
  --bs-table-striped-bg:        rgba(16, 24, 40, .018);
  --bs-table-hover-color:       var(--ink-900);
  --bs-table-hover-bg:          rgba(var(--emerald-rgb), .055);
  --bs-table-active-color:      var(--ink-900);
  --bs-table-active-bg:         rgba(var(--emerald-rgb), .1);
}

/* Window margin: a little more air on large screens; edge to edge where every pixel counts. */
@media (min-width: 1600px) {
  html.ui-glass { --win-inset: 16px; }
}
@media (max-width: 991.98px) {
  html.ui-glass { --win-inset: 0px; --radius-window: 0px; }
}

/* Accessibility preferences: solid surfaces, firmer lines, darker secondary text. */
@media (prefers-reduced-transparency: reduce) {
  html.ui-glass {
    --win-bg-glass: var(--win-bg);
    --surface-card: #ffffff;
    --surface-raised: #ffffff;
    --surface-quiet: #ffffff;
    --surface-hover: #ffffff;
  }
}
@media (prefers-contrast: more) {
  html.ui-glass {
    --ink-500: #48484c;
    --ink-400: #5f5f64;
    --ink-on-glass-muted: #3a3a3c;
    --line: #b8b8bf;
    --line-strong: #8e8e93;
    --hairline: rgba(16, 24, 40, .28);
    --win-bg-glass: var(--win-bg);
    --surface-card: #ffffff;
    --surface-raised: #ffffff;
    --surface-quiet: #ffffff;
    --surface-hover: #ffffff;
    --surface-edge: #8e8e93;
  }
}