/*
 * GREENBOX GLOBAL THEME V2
 * SURFACE READABILITY V2
 * VERSION=2.0.1
 *
 * CENTRAL PRESENTATION CONSUMER ONLY.
 *
 * DOES NOT OWN:
 * - Theme catalog
 * - Theme persistence authority
 * - Matrix engine
 * - Effect engine
 * - Application behavior
 */


/* ==========================================================
   READABILITY VARIABLES
   ========================================================== */

:root {
  --gb-readability-background-brightness: 100%;
  --gb-readability-text-contrast-pct: 65%;
  --gb-readability-border-pct: 75%;
  --gb-readability-shadow-pct: 25%;
  --gb-readability-blur: 6px;
  --gb-readability-accent-pct: 70%;
}


/* ==========================================================
   FIVE CANONICAL SURFACE FAMILIES
   ========================================================== */

html body
[data-gb-surface-role="hero"] {
  background:
    var(--gb-central-hero-paint)
    !important;

  background-color:
    transparent
    !important;

  background-image:
    none
    !important;
}


html body
[data-gb-surface-role="workspace"] {
  background:
    var(--gb-central-workspace-paint)
    !important;

  background-color:
    transparent
    !important;

  background-image:
    none
    !important;
}


html body
[data-gb-surface-role="panel"] {
  background:
    var(--gb-central-panel-paint)
    !important;

  background-color:
    transparent
    !important;

  background-image:
    none
    !important;
}


html body
[data-gb-surface-role="card"] {
  background:
    var(--gb-central-card-paint)
    !important;

  background-color:
    transparent
    !important;

  background-image:
    none
    !important;
}


html body
[data-gb-surface-role="raised"] {
  background:
    var(--gb-central-raised-paint)
    !important;

  background-color:
    transparent
    !important;

  background-image:
    none
    !important;
}


/* ==========================================================
   SHARED SURFACE PRESENTATION
   ========================================================== */

html body
[data-gb-surface-role] {
  border-color:
    color-mix(
      in srgb,
      var(
        --gb-border,
        var(
          --gb-accent,
          #39ff14
        )
      )
      var(
        --gb-readability-border-pct
      ),
      transparent
    )
    !important;

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

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

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


/* ==========================================================
   STRUCTURAL WRAPPERS
   ========================================================== */

html body
[data-gb-surface-opt-out] {
  background:
    transparent
    !important;

  background-color:
    transparent
    !important;

  background-image:
    none
    !important;

  box-shadow:
    none
    !important;

  -webkit-backdrop-filter:
    none
    !important;

  backdrop-filter:
    none
    !important;
}


/* ==========================================================
   TEXT READABILITY
   ========================================================== */

html body :is(
  .muted,
  .note,
  .subtitle,
  .meta,
  .secondary,
  small
) {
  color:
    color-mix(
      in srgb,
      var(
        --gb-text,
        #ecfff1
      )
      var(
        --gb-readability-text-contrast-pct
      ),
      var(
        --gb-text-muted,
        #8eb69a
      )
    )
    !important;
}


/* ==========================================================
   ACCENT INTENSITY
   ========================================================== */

html body :is(
  a,
  button,
  .button,
  .btn,
  .badge,
  .pill,
  .tag,
  .chip
) {
  --gb-readability-accent-color:
    color-mix(
      in srgb,
      var(
        --gb-accent,
        #39ff14
      )
      var(
        --gb-readability-accent-pct
      ),
      var(
        --gb-text,
        #ecfff1
      )
    );
}


html body :is(
  a,
  .link
) {
  color:
    var(
      --gb-readability-accent-color
    )
    !important;
}


html body :is(
  button,
  .button,
  .btn
) {
  border-color:
    color-mix(
      in srgb,
      var(
        --gb-accent,
        #39ff14
      )
      var(
        --gb-readability-border-pct
      ),
      transparent
    )
    !important;
}


/* ==========================================================
   MATRIX / BACKGROUND READABILITY
   ========================================================== */

#greenbox-matrix-canvas,
#greenbox-theme-effect-layer {
  filter:
    brightness(
      var(
        --gb-readability-background-brightness
      )
    )
    !important;
}


/* ==========================================================
   FORM CONTROLS
   ========================================================== */

html body :is(
  input,
  select,
  textarea
) {
  background:
    var(
      --gb-central-raised-paint
    )
    !important;

  color:
    var(
      --gb-text,
      #ecfff1
    )
    !important;

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