:root {

  /* Product defaults — sigmahub-pf */

  --theme-primary: #00a99a;

  --theme-secondary: #b7dd35;

  --theme-accent: #14271f;

  --theme-supporting: #38bdf8;



  --surface-page: #f8fafc;

  --surface-card: rgba(255, 255, 255, 0.90);

  --surface-border: rgba(148, 163, 184, 0.20);

}



.app-header-atmosphere {

  background:

    linear-gradient(

      105deg,

      color-mix(in srgb, var(--theme-primary) 82%, white) 0%,

      color-mix(in srgb, var(--theme-secondary) 76%, white) 38%,

      color-mix(in srgb, var(--theme-accent) 70%, white) 68%,

      color-mix(in srgb, var(--theme-supporting) 68%, white) 100%

    );

}



.page-atmosphere {

  min-height: 100vh;

  background:

    radial-gradient(

      720px 380px at 16% -40px,

      color-mix(in srgb, var(--theme-primary) 16%, transparent),

      transparent 72%

    ),

    radial-gradient(

      560px 320px at 43% 0,

      color-mix(in srgb, var(--theme-secondary) 12%, transparent),

      transparent 72%

    ),

    radial-gradient(

      660px 360px at 67% -30px,

      color-mix(in srgb, var(--theme-accent) 13%, transparent),

      transparent 72%

    ),

    radial-gradient(

      580px 340px at 85% -10px,

      color-mix(in srgb, var(--theme-supporting) 10%, transparent),

      transparent 72%

    ),

    var(--surface-page);

}



.data-surface {

  background: var(--surface-card);

  border: 1px solid var(--surface-border);

  border-radius: 14px;

  box-shadow:

    0 1px 2px rgba(15, 23, 42, 0.03),

    0 8px 24px rgba(15, 23, 42, 0.035);

}