/*
 * GREENBOX GLOBAL THEME V2
 * SURFACE READABILITY V3
 * VERSION=3.0.0
 *
 * Central semantic surface-family presentation.
 *
 * Does not own:
 * - Theme catalog
 * - Theme persistence authority
 * - Matrix/effect engine
 * - Background artwork catalog
 * - Application behavior
 */

:root {
  --gb-family-page-alpha: 72%;
  --gb-family-header-alpha: 94%;
  --gb-family-navigation-alpha: 90%;
  --gb-family-sidebar-alpha: 93%;
  --gb-family-section-alpha: 78%;
  --gb-family-data-alpha: 90%;
  --gb-family-article-alpha: 90%;
  --gb-family-form-alpha: 92%;
  --gb-family-dialog-alpha: 98%;
  --gb-family-footer-alpha: 90%;
}


/* PAGE / MAIN CONTENT */

html body
[data-gb-surface-family="page"] {
  background:
    color-mix(
      in srgb,
      var(--gb-bg, #07110b)
      var(--gb-family-page-alpha),
      transparent
    )
    !important;

  background-image:
    none
    !important;
}


/* HEADER */

html body
[data-gb-surface-family="header"] {
  background:
    color-mix(
      in srgb,
      var(--gb-surface, #0b1f12)
      var(--gb-family-header-alpha),
      transparent
    )
    !important;

  background-image:
    none
    !important;
}


/* NAVIGATION */

html body
[data-gb-surface-family="navigation"] {
  background:
    color-mix(
      in srgb,
      var(--gb-surface, #0b1f12)
      var(--gb-family-navigation-alpha),
      transparent
    )
    !important;

  background-image:
    none
    !important;
}


/* SIDEBAR / RAIL */

html body
[data-gb-surface-family="sidebar"] {
  background:
    color-mix(
      in srgb,
      var(--gb-surface, #0b1f12)
      var(--gb-family-sidebar-alpha),
      transparent
    )
    !important;

  background-image:
    none
    !important;
}


/* SECTION */

html body
[data-gb-surface-family="section"] {
  background:
    color-mix(
      in srgb,
      var(--gb-surface, #0b1f12)
      var(--gb-family-section-alpha),
      transparent
    )
    !important;

  background-image:
    none
    !important;
}


/* TABLES / LISTS / DATA */

html body
[data-gb-surface-family="data"] {
  background:
    color-mix(
      in srgb,
      var(--gb-surface-raised, #102a19)
      var(--gb-family-data-alpha),
      transparent
    )
    !important;

  background-image:
    none
    !important;
}


/* ARTICLES / WIDGETS / MODULES */

html body
[data-gb-surface-family="article"] {
  background:
    color-mix(
      in srgb,
      var(--gb-surface-raised, #102a19)
      var(--gb-family-article-alpha),
      transparent
    )
    !important;

  background-image:
    none
    !important;
}


/* FORMS / FILTERS */

html body
[data-gb-surface-family="form"] {
  background:
    color-mix(
      in srgb,
      var(--gb-surface, #0b1f12)
      var(--gb-family-form-alpha),
      transparent
    )
    !important;

  background-image:
    none
    !important;
}


/* DIALOGS / FLYOUTS */

html body
[data-gb-surface-family="dialog"] {
  background:
    color-mix(
      in srgb,
      var(--gb-surface-raised, #102a19)
      var(--gb-family-dialog-alpha),
      transparent
    )
    !important;

  background-image:
    none
    !important;
}


/* FOOTER / STATUS */

html body
[data-gb-surface-family="footer"] {
  background:
    color-mix(
      in srgb,
      var(--gb-surface, #0b1f12)
      var(--gb-family-footer-alpha),
      transparent
    )
    !important;

  background-image:
    none
    !important;
}


/* COMMON READABILITY */

html body
[data-gb-surface-family] {
  color:
    var(--gb-text, #ecfff1)
    !important;

  border-color:
    color-mix(
      in srgb,
      var(
        --gb-border,
        var(--gb-accent, #39ff14)
      )
      var(--gb-readability-border-pct, 75%),
      transparent
    )
    !important;

  box-shadow:
    0 10px 32px
    color-mix(
      in srgb,
      var(--gb-accent, #39ff14)
      var(--gb-readability-shadow-pct, 25%),
      transparent
    )
    !important;

  -webkit-backdrop-filter:
    blur(
      var(--gb-readability-blur, 6px)
    )
    !important;

  backdrop-filter:
    blur(
      var(--gb-readability-blur, 6px)
    )
    !important;
}


/*
 * DIAGNOSTIC MODE.
 *
 * Dashed = V3 family
 * Dotted = original Hero/Workspace/Panel/Card/Raised role.
 *
 * Outline only. No layout/position mutations.
 */

html[data-gb-surface-debug="1"]
body
[data-gb-surface-family] {
  outline:
    2px dashed
    var(--gb-accent, #39ff14)
    !important;

  outline-offset:
    -2px
    !important;
}


html[data-gb-surface-debug="1"]
body
[data-gb-surface-role] {
  outline:
    2px dotted
    var(--gb-text, #ecfff1)
    !important;

  outline-offset:
    -4px
    !important;
}